(This is a Public Draft )
This tutorial will help you create a “Hello World” application which basically showcases how to program game logic and render to the screen.
Difficulty Level : Beginner
By the end of this tutorial, you will recreate the example HTML5 App seen below:
Step 1) Creating a New Project
First be sure to download the latest build of Game Pencil Engine.
When launching the Game Pencil Engine, you will be presented with the “Start Page” as pictured below:
Now click on the “Project Browser” link on this page as highlighted in the image above.
Using Project Browser Tab you can click on “New Project” or alternatively use the keyboard shortcut CTRL+N.
Doing so should create a popup menu as seen below:
Simply create a new Project by specifying a Project Location and then clicking the “Create” button.
(We recommend your Documents folder, but wherever you prefer to keep your gamedev files/folders is perfectly fine).
This process should create a directory filled with many engine related sub-directories on your system with “hello_world.gppf” on the same level as the “hello_world” directory.
Navigating back to the Start Page you should see your new Project now on the “Resource bar” (on left or right pane depending on your settings).
Step 2 ) Creating your First Game Object
Without Game Objects you can not have a game or app in Game Pencil Engine. Game Objects are where the action, logic and rendering functions typically takes place. Lets create a game object so we can actually “build an app”. In the resource bar right click the “Objects” folder under your “HelloWorld” Project Folder. A context menu should pop-up with the option to “Add Resource”. Click on that option to create your first object!
If this is the first object you ever made in this project, you should see a new object popup within the tab manager called “newObject1”. Although not necessary we renamed this object to “obj_controller” as this object will “control” the entire app.
If you done all of that you should see something similar to the below:
Hooray! You created your first object in Game Pencil’s editor. Go ahead and hit CTRL+S to save your project.
Step 3 ) Programming your First Game Object’s Constructor
Now objects “think” by default due to the engine’s structure. But it is up to us to tell our game object how to “think” and what to draw onto the scene(which is drawn on the screen of course).
Lets enter the Object’s Basic Functions. It is the STAR within the Object Editor’s button-bar. You should see a list of “Basic Functions” starting with “Constructor” and ending with “Render HUD”.
Click on the “Constructor” function and add these 2 lines of code into it:
//Toy around with it
this.phrase = "Hello World!";
The first line is what we call a “Comment line”. It is there simply for the programmer(s) accessing the project. It is a note to tell you what meant for this part of code to do.
The keyword “this” is telling the engine that THIS exact object’s variable and/or function will be called, modified and/or set.
To put it all together, it means that this object’s “phrase variable” will now be set to “Hello World”.
Now that we made the constructor, lets modify the object’s logic that is called every frame of the app.
Step 4) Programming your First Game Object’s Main Logic
In Game Pencil, the culmination of many object’s logic is what creates a game. It is what helps object’s move,process user input, etc.
Although this is just a “Hello World” example we decided to add a small bit of logic into this tutorial.
Please copy and paste the code below into the “Main Logic” codeblock of your object.
//If you press X check the console window in your browser.
if( gpe.check_keyboard(gp_x) )
//To make this example slightly more interesting use WASD to change the phrase
if( gpe.check_keyboard(gp_a) )
this.phrase = "Hello world";
else if( gpe.check_keyboard(gp_d) )
this.phrase = "Sup?";
else if( gpe.check_keyboard(gp_w) )
this.phrase = "Duuuuuubya";
else if( gpe.check_keyboard(gp_s) )
this.phrase = "Ello Guvnah!";
In the first if-statement, we call function on THIS object. As the name implies, it will self destruct this specific instance whenever the X-Key is pressed.
The next four if-else statements are dependent on keyboard input.
If a W, A, S or D is pressed the phrase changes from it’s default “Hello World” to another string of text. It should look like this in the editor:
Step 5) Programming your First Game Object’s Render Function
Now simply click on the “Render” function of your object and copy the following code:
Renders the phrase ("Hello World") to the screen at this x/y coordinates aligned top/left.
With the 1st parameter being the -1 it will use the "Browser's" default font to render it.
gpe.render_text(-1,this.getx(), this.gety(),this.phrase,"white",fa_left, fa_top );
gpe.render_text(-1,this.getx(), this.gety()+32,"Use the WASD keys to change text","yellow",fa_left, fa_top );
The script begins with a MULTI-LINE comment which begins with “/*” and ends with “*/”.
You may notice instead of calling “this.” we begin by calling “gpe.”. gpe is a global object representing the engine. The engine is equipped with many functions that render/draw things onto the scene. The functions we will be using is “render_text”.
The parameters within render text are listed above.
The fontIdIn value will be set to -1 since we are not using any custom fonts in this tutorial. They typically are set to the name of a font resource you create with your project.
The next 2 parameters are the x/y coordinates on where to render the text on the scene and/or screen. We will select this.getx(), and this.gety() which is your controller object’s x and y coordinates within the scene.
In the fourth parameter is a string, the textToRender. For this example we will just use this.phrase to draw whichever phrase your object has set.
The fifth is the color to render. In html5 this can simply by a rgba, hex or string name. To keep things simple we chose to just type “white”.
The last two parameters dictate how to horizontally and vertically align the font. We chose “fa_left” and “fa_top” respectively. The three options for the fontHalign are “fa_left”, “fa_center”, and “fa_right”. The three options for fontValign are “fa_top”, “fa_middle” and “fa_bottom”. Feel free to experiment with any of the parameters!
Line 6 is basically a duplicate of line 5 with changes to the text being rendered and instead of “white” we chose “yellow” for the color.
When done it should look like this
Congratulations! your game object is made and ready for action.
As a small bonus we added something the object’s destructor. Be sure to check your browser’s console window after pressing the X-key.
//For its final action it writes to the console its sad note
console.log(" Goodbye world!");
Step 6) Adding your Game Object to the Scene
Now in order for a game to work, we will need to have a scene.
Like in theater, scenes is where all the action takes place.
So just like you created your first object, create a scene by right clicking on “Scenes” and selecting “Add Resource”.
You should see something like this now:
To keep things simple we will skip to the “Layers” tab in the scene editor’s button bar. If successful you should see the editor’s left pane look like this:
We need to add our first layer to the scene. Simply hit the plus button and select “Add Object Layer” and select any of the 32 layers.
If done right you should see something like this…
Click the “Object” resource drop down and select your game object. By going into the “Scene Zone” you should see a little Blue Car following your mouse.
Simply left click on the scene and it should place an instance of your object. Click back on that resource bar and set it to “Object”.
Save your project. Our work in the the scene and object editors are done for this tutorial.
So let’s get your project built and ready for testing.
Step 7 ) Building your Project
Simply Hit F5 and it should Build your HTML5 project and open your browser to play it.
If not you can always hit the cog in your Editor’s Button bar or use the Toolbar’s Build->Build HTML5 & Run option.
If successful it should open up app nearly identical to one on the top of the page.
If not review any input in the “Build Log” of Game Pencil or the “Console” window of your browser (Press F12 in many modern browsers).
Congratulations! You created your first App using Game Pencil.