Part Two: Importing a Character Spritesheet and Setting Up a Player Gadget
In the first part of this tutorial, we covered the very first steps in IG Maker: how to set up a new project in IG Maker, import some graphics and create a simple map. Now it’s time to put a character on that map! Let’s begin by importing some placeholder graphics for the character and setting up basic movements.
Again, we’ll be using a very simple placeholder spritesheet. Save the image on the left (a simple character graphic just for learning purposes) to your local hard drive (right-click, save as). Return to IG Maker, go to the Materials tab -> Graphics and click “Create” on the toolbar. Select the placeholder spritesheet from where you saved it and open it. Rename “ghost-character″ into something more memorable – double-click on the name and change it to “player”. So far, the process is identical to importing tilesets. In order to use this graphic as a spritesheet, we first have to declare it as such. Set Split Graphic (Horizontal) and Split Graphic (Vertical) to 4 and 5, respectively. Uncheck the uses we don’t need – everything except “Animation” (see the screenshot below).
Since this is a simple “standby” action, we just want the player character to stand still and do nothing – so let’s define those frames. Click on The Action’s Display Directions (1). The graphics for all four directions currently look the same, so let’s change that. Click on “left” (2) and chose the corresponding image on Per Frame Settings -> Graphic (3). Repeat for “down” and “up” (4).
Now let’s define the walking animation! First, select “standby” (1), copy (2) and paste (3) it. Now rename “standby(2)” into “walk” (4). Next, click the plus sign (5) on In-direction Frame List three times to add three frames to the walk right animation (this makes it four frames altogether). Assign the corresponding images to all four frames (one by one) by clicking on them (6) on Per Frame Settings -> Graphic. Repeat the whole process for left (7), down and up. Since this is a real animation and not just a static picture like we used for standby, we should also set it to loop. Switch to Per Action Settings (8a) to set infinite looping. Frames per second will already be set to twenty (8b), but click inside the box anyway and manually type 20 again. Only then check Infinite looping (8c). At this point, IG Maker will ask for permission to recalculate the duration of all the frames – say yes.
All the animations are set and we are almost done! Now let’s assign them to the actual player gadget.
3) Assigning actions to the player gadget
Switch to Gadgets (1). The player gadget already exists there. Rename Action001 to “Standby” (2). Switch to Emergence Settings (3) and chose “test-animation” from the Assigned Animations drop down menu (4). Set it to appear on the 3rd layer (5), select “Standby” for The First Action Program (6) and return to Registering Actions (7).
Click on the “Action to be Assigned” drop down menu and select “standby” (1), then select “Right” from the menu below it (2). Check the “Don’t designate a direction of movement” option (3) and set the movement speed to 0 (4).
The standby action is all set, now let’s see whether it works! Switch to Canvas (1) and Gadgets (2). Select the player character(3) and place it on the canvas by clicking where you want to put it (for example somewhere among the flowers). A window will appear – make sure the third layer is selected(3) and click OK. Now save your game and click Play (or press F5) to test it.
It works! (Or at least it should. If not, go back a few steps and see whether you omitted something). The player can turn in all four directions, but can’t walk yet (we still have to define that action). Let’s go back to Gadgets (1) and click on the “Standby” action to select it (2). Copy (3) and paste (4) it, then rename the new action to “Walk” (5). Click on the “Action to be Assigned” drop down menu and select “walk” (6), then select “Right” from the menu below it (7). Check the “Don’t designate a direction of movement” option (8) and set the movement speed to 100 (9).
Now let’s connect those two states. Click on the “Standby” action to select it (1). Walk should appear under The Next Action Program. Under Conditions & Key Commands for Switching Actions, check “The following command was entered” (2). Select “Up/Down/Right/Left” and “Upon pressing” from the drop down menus (3).
Now click on the “Walk” action to select it (1). Check “The following command was entered” (2). Select “Up/Down/Right/Left” and “Upon release” from the drop down menus (3).
And that’s it! The player character can move around now.
Questions? Comments? Developer’s Corner on Nekomura forum has a special section just for IG Maker!
