A step-by-step guide on harnessing the power of RPG.J

Question

A step-by-step guide on harnessing the power of RPG.J

Attempting to utilize the RPG.js library as it appears to be quite powerful. I checked out the official tutorial but am struggling to understand certain aspects, particularly State 4: "Initialize the canvas in your JS file." Any guidance on which one to use?
Has anyone had experience working with this library or recommend another powerful one?
Appreciate any help.

javascript

Answer 1

Answer №1

It wasn't as easy as I thought it would be; I faced some challenges before finally achieving a basic functional game. My approach may not have been the most efficient, but it did the job for me (I was using Google Chrome on a Mac OS). If there are better ways to do this that someone could suggest (as I'm also new to this library), I am open to learning. Since I couldn't find a straightforward beginner tutorial online, I decided to share my experience in the hopes of helping others.

To start, create an HTML file and include the necessary libraries inside the <head> tag:

<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>

Then, add the canvas within the <body> tag:

<canvas id="canvas_id" width="640" height="480"></canvas>

There is a 'sample' folder within the GitHub project (refer to https://github.com/RSamaium/RPG-JS), containing a playable game which can be launched in the browser through the file quick.html. The idea is that if the sample game functions, then your game can too. Therefore, I started by mimicking the graphics and data from the sample game.

Firstly, you need to create the following folders and subfolders at the root of your project:

core
core\scene
Data
Data\Maps
Graphics

For a basic functional game, you require 1) a map for your character to navigate, and 2) a character for control. Hence, you must have graphics for tiles to construct your map and a model for your character's movement. Create the subfolders below:

Graphics\Characters
Graphics\Tilesets
Graphics\Windowskins

Next, copy the following files from the respective sample subfolder into the newly created folders:

Graphics\Characters\event1.png
Graphics\Tilesets\tileset.png
Graphics\Windowskins\window.png #this file might not be used in all scripts, but is essential due to dependencies; removing this necessity requires editing multiple files - a task best avoided initially.

The 'core/scene' folder contains JavaScript files for loading scenes (e.g., map navigation, game over screen). I had to transfer all JS files from the 'sample' project's corresponding folder to the 'core/scene' folder of my game. This folder is located at the root of the GitHub project, not within the 'sample' directory. To get my game running properly, I included all 7 JS files (you can eliminate unwanted scenes without code modifications, but for now, let's copy them):

Scene_Gameover.js
Scene_Generated.js
Scene_Load.js
Scene_Map.js
Scene_Menu.js
Scene_Title.js
Scene_Window.js

Finally, I inserted the following code within a <script> tag in the HTML. It closely resembles what was mentioned in the documentation. These snippets will generate an "actor" (character), a "map", and the tiles intended for the map. Further details on maps or tiles can be found in the documentation linked in your question.

RPGJS.Materials = {
    "characters": {
        "1": "event1.png"
    },
    "tilesets": {
        "1": "tileset.png"
    }
};

RPGJS.Database = {
    "actors": {
        "1": {
            "graphic": "1"
        }
    },
    "tilesets": {
        "1": {
            "graphic": "1"
        }
    },
    "map_infos": {      
        "1": {
            "tileset_id": "1"
        }
    }
};

RPGJS.defines({
    canvas: "canvas_id",
    autoload: false
}).ready(function() {

RPGJS.Player.init({
    actor: 1,
    start: {x: 10, y: 10, id: 1} // Here, map id doesn't exist
});

RPGJS.Scene.map();

Lastly, create a JSON file defining every tile in your map. I simply copied the MAP-1.json file from the 'sample' folder into the Data\Maps folder.

This should enable you to move your character around an empty map! Open the HTML file in your browser and give it a try!

Screenshot of the game running in a browser

Of course, developing a full-fledged game will involve significant changes (like creating a database.json file and a materials.json file to store much of the script present in the <script> tag); however, with these basics, you should be able to make progress!

Answer 2

It wasn't as easy as I thought it would be; I faced some challenges before finally achieving a basic functional game. My approach may not have been the most efficient, but it did the job for me (I was using Google Chrome on a Mac OS). If there are better ways to do this that someone could suggest (as I'm also new to this library), I am open to learning. Since I couldn't find a straightforward beginner tutorial online, I decided to share my experience in the hopes of helping others.

To start, create an HTML file and include the necessary libraries inside the <head> tag:

<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>

Then, add the canvas within the <body> tag:

<canvas id="canvas_id" width="640" height="480"></canvas>

There is a 'sample' folder within the GitHub project (refer to https://github.com/RSamaium/RPG-JS), containing a playable game which can be launched in the browser through the file quick.html. The idea is that if the sample game functions, then your game can too. Therefore, I started by mimicking the graphics and data from the sample game.

Firstly, you need to create the following folders and subfolders at the root of your project:

core
core\scene
Data
Data\Maps
Graphics

For a basic functional game, you require 1) a map for your character to navigate, and 2) a character for control. Hence, you must have graphics for tiles to construct your map and a model for your character's movement. Create the subfolders below:

Graphics\Characters
Graphics\Tilesets
Graphics\Windowskins

Next, copy the following files from the respective sample subfolder into the newly created folders:

Graphics\Characters\event1.png
Graphics\Tilesets\tileset.png
Graphics\Windowskins\window.png #this file might not be used in all scripts, but is essential due to dependencies; removing this necessity requires editing multiple files - a task best avoided initially.

The 'core/scene' folder contains JavaScript files for loading scenes (e.g., map navigation, game over screen). I had to transfer all JS files from the 'sample' project's corresponding folder to the 'core/scene' folder of my game. This folder is located at the root of the GitHub project, not within the 'sample' directory. To get my game running properly, I included all 7 JS files (you can eliminate unwanted scenes without code modifications, but for now, let's copy them):

Scene_Gameover.js
Scene_Generated.js
Scene_Load.js
Scene_Map.js
Scene_Menu.js
Scene_Title.js
Scene_Window.js

Finally, I inserted the following code within a <script> tag in the HTML. It closely resembles what was mentioned in the documentation. These snippets will generate an "actor" (character), a "map", and the tiles intended for the map. Further details on maps or tiles can be found in the documentation linked in your question.

RPGJS.Materials = {
    "characters": {
        "1": "event1.png"
    },
    "tilesets": {
        "1": "tileset.png"
    }
};

RPGJS.Database = {
    "actors": {
        "1": {
            "graphic": "1"
        }
    },
    "tilesets": {
        "1": {
            "graphic": "1"
        }
    },
    "map_infos": {      
        "1": {
            "tileset_id": "1"
        }
    }
};

RPGJS.defines({
    canvas: "canvas_id",
    autoload: false
}).ready(function() {

RPGJS.Player.init({
    actor: 1,
    start: {x: 10, y: 10, id: 1} // Here, map id doesn't exist
});

RPGJS.Scene.map();

Lastly, create a JSON file defining every tile in your map. I simply copied the MAP-1.json file from the 'sample' folder into the Data\Maps folder.

This should enable you to move your character around an empty map! Open the HTML file in your browser and give it a try!

Screenshot of the game running in a browser

Of course, developing a full-fledged game will involve significant changes (like creating a database.json file and a materials.json file to store much of the script present in the <script> tag); however, with these basics, you should be able to make progress!

Answer 3

Answer №2

This tutorial provides a very straightforward explanation.

3. To implement this functionality, include the following code in your webpage:

<!DOCTYPE html>
<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>
<strong><canvas id="canvas_id" width="640" height="480"></canvas></strong>

That's how you utilize "the canvas" element!

Answer 4

This tutorial provides a very straightforward explanation.

3. To implement this functionality, include the following code in your webpage:

<!DOCTYPE html>
<script src="canvasengine-X.Y.Z.all.min.js"></script>
<script src="rpgjs-X.Y.Z.min.js"></script>
<strong><canvas id="canvas_id" width="640" height="480"></canvas></strong>

That's how you utilize "the canvas" element!

Answer 5

Answer №3

Brian Hellekin shared an insightful tutorial. To unlock the full potential of this library, follow these modifications in your html file:

<!DOCTYPE html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">


<script src="http://canvasengine.net/cdn/dev/canvasengine-latest.all.min.js"></script>
<script src="http://rpgjs.com/cdn/rpgjs-2.0.0.min.js"></script>

<script src="plugins/gamepad.js"></script>
<script src="plugins/virtualjoystick.js"></script>
<script src="plugins/soundmanager2-jsmin.js"></script>
    <script>

    var Data = null;

    if (Data) {
        Data.database._scenes = Data.menus;
        Data.database.system = Data.settings;
    }

    RPGJS.defines({
        canvas: "canvas",
        plugins: ["/rpgjs/plugins/Hub", "/rpgjs/plugins/Arpg", "/rpgjs/plugins/MenuGenerated"],
        scene_path: "/rpgjs/",
        soundmanager: {
            url: "/rpgjs/swf/",
        },
        autoload: Data == null,
        ignoreLoadError: true
    }).ready(function(rpg) {

        var material_json = {};
        var m, type;

        if (Data) {
            for (var i in Data.materials) {

                m = Data.materials[i];
                type = m['type'] + "s";

                if (!material_json[type]) {
                    material_json[type] = {};
                }

                material_json[type][m['material_id']] = RPGJS_Canvas.Materials.getFilename(m['path'], true);
            }



            var m, e;
            var map_info = Data.maps, info;
            for (var id in Data.data_maps) {
                m = Data.data_maps[id];
                this.setMap(id, m.map.map);

                info = map_info[id];
                info.tileset_id = info.tileset;
                info.autotiles_id = info.autotiles;
                info.events = [];
                info.dynamic_event = [];

                for (var i=0 ; i < m.events.length ; i++) {
                    e = m.events[i];

                    if (e.data_event.type == "event" ) {
                        var format = 
                            [
                                {
                                    "id"    :   e.event_id,
                                    "x"     : e.position_x,
                                    "y"     : e.position_y,
                                    "name"  : 'EV-' +  e.event_id
                                },
                                e.data_event.data.pages
                            ];
                        this.setEvent(id, 'EV-' +  e.event_id, format);
                        info.events.push('EV-' +  e.event_id);
                    }
                    else {
                        var name, _id;

                        for(var key in e.data_event.data) {
                            _id = e.data_event.data[key];
                            name = key;
                            break;
                        }

                        info.dynamic_event.push({
                            "x"     : e.position_x,
                            "y"     : e.position_y,
                            "name"  : name,
                            "id"    : _id
                        });
                    }
                }

            }

            Data.database.map_infos = map_info;

            global.materials  = material_json;
            global.data = Data.database;


            global.game_player.init();

        }

        var scene = this.scene.call("Scene_Title", {
            overlay: true
        });
        scene.zIndex(0);

    }); 


</script>


<style>

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: black;
}

canvas {
    -webkit-user-select : none;
    -moz-user-select    : none;
    overflow    : hidden;
}

@font-face{
        font-family : "RPG";
        src : url("Graphics/Fonts/Philosopher-Regular.ttf");
    }
@font-face{
    font-family : "Megadeth";
    src : url("Graphics/Fonts/Elementary_Gothic_Bookhand.ttf");
}



</style>

<div id="game">
    <canvas id="canvas" width="640" height="480"></canvas>
</div>

Note:

/rpgjs/ is where I store my project on my local server. To play the game, you can access it at http://localhost/rpgjs/

To make it work, remember to modify the JS files in the /plugins/ directory.

/Hub/Sprite_Hub.js

Use the following path:

array.push(RPGJS.Path.getFile("pictures", "../Pictures/hub.png", "hub"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_meter.png", "hp_meter"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_number.png", "hp_number"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/Hero_Face.png", "hero_face"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_A.png", "button_a"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_B.png", "button_b"));

It's very helpful to debug using Google Chrome developer tools. If you encounter a 404 error for an image resource, check your project files and fix the path as needed.

Also, the tutorial within the library project may not be crystal clear or comprehensive. It seems more like a promotional tool for their RPG editor rather than focusing solely on the JS library.

You can view my completed project here: . It's just a demo, but it showcases the capabilities of this library.

This demo includes:

1- A welcome page with options for new and loaded games 2- A custom map with one event 3- A functional event: opening a chest reveals 30 gold 4- A player menu: press ESC on the keyboard

I'm still figuring out how to utilize the arpg plugin for real-time combat events, but I'm working on understanding its usage.

Answer 6

Brian Hellekin shared an insightful tutorial. To unlock the full potential of this library, follow these modifications in your html file:

<!DOCTYPE html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">


<script src="http://canvasengine.net/cdn/dev/canvasengine-latest.all.min.js"></script>
<script src="http://rpgjs.com/cdn/rpgjs-2.0.0.min.js"></script>

<script src="plugins/gamepad.js"></script>
<script src="plugins/virtualjoystick.js"></script>
<script src="plugins/soundmanager2-jsmin.js"></script>
    <script>

    var Data = null;

    if (Data) {
        Data.database._scenes = Data.menus;
        Data.database.system = Data.settings;
    }

    RPGJS.defines({
        canvas: "canvas",
        plugins: ["/rpgjs/plugins/Hub", "/rpgjs/plugins/Arpg", "/rpgjs/plugins/MenuGenerated"],
        scene_path: "/rpgjs/",
        soundmanager: {
            url: "/rpgjs/swf/",
        },
        autoload: Data == null,
        ignoreLoadError: true
    }).ready(function(rpg) {

        var material_json = {};
        var m, type;

        if (Data) {
            for (var i in Data.materials) {

                m = Data.materials[i];
                type = m['type'] + "s";

                if (!material_json[type]) {
                    material_json[type] = {};
                }

                material_json[type][m['material_id']] = RPGJS_Canvas.Materials.getFilename(m['path'], true);
            }



            var m, e;
            var map_info = Data.maps, info;
            for (var id in Data.data_maps) {
                m = Data.data_maps[id];
                this.setMap(id, m.map.map);

                info = map_info[id];
                info.tileset_id = info.tileset;
                info.autotiles_id = info.autotiles;
                info.events = [];
                info.dynamic_event = [];

                for (var i=0 ; i < m.events.length ; i++) {
                    e = m.events[i];

                    if (e.data_event.type == "event" ) {
                        var format = 
                            [
                                {
                                    "id"    :   e.event_id,
                                    "x"     : e.position_x,
                                    "y"     : e.position_y,
                                    "name"  : 'EV-' +  e.event_id
                                },
                                e.data_event.data.pages
                            ];
                        this.setEvent(id, 'EV-' +  e.event_id, format);
                        info.events.push('EV-' +  e.event_id);
                    }
                    else {
                        var name, _id;

                        for(var key in e.data_event.data) {
                            _id = e.data_event.data[key];
                            name = key;
                            break;
                        }

                        info.dynamic_event.push({
                            "x"     : e.position_x,
                            "y"     : e.position_y,
                            "name"  : name,
                            "id"    : _id
                        });
                    }
                }

            }

            Data.database.map_infos = map_info;

            global.materials  = material_json;
            global.data = Data.database;


            global.game_player.init();

        }

        var scene = this.scene.call("Scene_Title", {
            overlay: true
        });
        scene.zIndex(0);

    }); 


</script>


<style>

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: black;
}

canvas {
    -webkit-user-select : none;
    -moz-user-select    : none;
    overflow    : hidden;
}

@font-face{
        font-family : "RPG";
        src : url("Graphics/Fonts/Philosopher-Regular.ttf");
    }
@font-face{
    font-family : "Megadeth";
    src : url("Graphics/Fonts/Elementary_Gothic_Bookhand.ttf");
}



</style>

<div id="game">
    <canvas id="canvas" width="640" height="480"></canvas>
</div>

Note:

/rpgjs/ is where I store my project on my local server. To play the game, you can access it at http://localhost/rpgjs/

To make it work, remember to modify the JS files in the /plugins/ directory.

/Hub/Sprite_Hub.js

Use the following path:

array.push(RPGJS.Path.getFile("pictures", "../Pictures/hub.png", "hub"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_meter.png", "hp_meter"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/hp_number.png", "hp_number"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/Hero_Face.png", "hero_face"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_A.png", "button_a"));
    array.push(RPGJS.Path.getFile("pictures", "../Pictures/button_B.png", "button_b"));

It's very helpful to debug using Google Chrome developer tools. If you encounter a 404 error for an image resource, check your project files and fix the path as needed.

Also, the tutorial within the library project may not be crystal clear or comprehensive. It seems more like a promotional tool for their RPG editor rather than focusing solely on the JS library.

You can view my completed project here: . It's just a demo, but it showcases the capabilities of this library.

This demo includes:

1- A welcome page with options for new and loaded games 2- A custom map with one event 3- A functional event: opening a chest reveals 30 gold 4- A player menu: press ESC on the keyboard

I'm still figuring out how to utilize the arpg plugin for real-time combat events, but I'm working on understanding its usage.

A step-by-step guide on harnessing the power of RPG.J

Answer №1

Answer №2

Answer №3

Similar questions

Creating distinctive ng-form tags within a form using ng-repeat in Angular

Display modal popup only once the dropdown has been validated, with the validation focusing on criteria other than the dropdown itself

AngularJS Component enthusiasts

Is there a way to instruct Express to refrain from parsing the request's query string?

ClassNames Central - showcasing a variety of class names for interpolation variables

Embracing Error Handling with ES6 Promises

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

Failure to trigger jQuery.ajax success function on Windows XP operating system

Use jQuery to display the first 5 rows of a table

Is there a way to retrieve cookie data from a component that has been rendered in _app.js using Next.js?

Sass is throwing an error message saying 'Module not found' during the compilation process

Unable to bind to property as it is not recognized as a valid attribute of the selector component

What is the purpose of Access-Control-Allow-Headers in an HTTP response and why is it important to include it?

TypeError thrown by Mapbox markers

What is the method to determine the duration of a video using the FileReader function to access the video file?

Continuously flowing chain of replies from a series of queries using RxJS

Storing input data in a JavaScript array instead of sending it through an AJAX request

Exploring the contrasts in employing functions within a react-native environment

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

Unable to generate this QUIZ (JavaScript, HTML)