Simple Canvas Start - RPG Tutorial 1
Welcome to my first Phaser tutorial and the road to a very large RPG game. I will be documenting my process here, writing about what works, what doesn’t and everything in between… as I try to create this game.
First off, let’s start by getting a game canvas “map” displayed on your page. Below you will see the contents of a simple
Now let’s create the referenced
main.js file from above:
Now let’s talk about the above js. There is a lot there and a lot that we aren’t really using yet, but I thought I would go ahead and add the barebones setup. We will be getting into all of it in the up coming tutorials.
First, if you run this file, what it should produce on screen is a 200px by 200px grey (#787878) canvas block. If you don’t see that, open your dev console and make sure everything is connected properly.
Here is this tutorial demoed live: Open Demo
Here is a portion of the above js file, this is where we are initiating the game constructor and setting some parameters. The first argument, 200, is the width of the canvas block (in px), the second is the height. Then we tell it to render as Canvas with
Phaser.CANVAS, then we throw an id on it (tutorial-1), and this tells phaser to inject our game canvas within our div in our html markup:
<div id="tutorial-1"></div>, acting as a container for our entire game canvas! Next we have the config object which is for state, we will dive more deeply into this in the coming blog posts.
Hopefully all is well! Everything else in the js file should be self explanatory. The next tutorial in this series is tilemapping.