Open a new project in Construct. This tutorial will not be importing sprites, but rather creating basic animations from scratch. Import desired animations in replace of recreating from scratch. On the layout, Right Click to Insert a New Object. Select Sprite. When the “Cross-Hair” appears, Click anywhere on the layout to open up the Edit Image Window(s). Select the Rectangle Symbol & a desired color. Begin shaping your “Hero.” (NOTE: If you already have your own Sprites/Animations Set up, skip to step 6 for setting up Origin Points or Step 8 for Image Points to Spawn Hit Boxes.) SIZE IT 64X64 FOR THIS TUTORIAL SAKES.
In the ANIMATION FRAME WINDOW, Right Click on FRAME 0 (one you just created) & DUPLICATE. With FRAME 1 now highlighted, go to the EDIT IMAGE WINDOW & Cut & Paste the Head to be placed slightly down the neck or fill in the eyes with the same body color to represent the Hero “Blinking.”
Go to the ANIMATIONS WINDOW. “Default” will be the only one in it. Right Click on it to rename it to “IDLE.” Then with “IDLE” selected, go over to the Properties Tab and Change the Speed to 2 and LOOP to Yes so the IDLE Frames loop between Frame 0 & 1 at a speed of 2 per second.
Right Click on the IDLE in ANIMATIONS Window & DUPLICATE > Rename it to “MOVE”. Select FRAME 0 and Begin reconfiguring the Image to begin to show the Hero Running. Duplicate or Add more Frames as needed. Set the Speed to 6 & Keep LOOP to Yes.
Repeat Process for the Following Animations needed for this Tutorial (Take Note of how many Frames per Animation & the Speed. Your speed may vary if you have more or less frames per animation.)
In the Edit Image Window of any frame/any animation Click on the Origin Symbol to make the Origin Point Window appear. Right Click on the Word Origin > Scroll over to Quick Assign & Select Bottom (This is more for Platform Style Games, but will help keep the Animations Consistent in the 8-Directional Movement.)
The image point will appear at the bottom. Repeat Step 6, but this time select Apply to All Animations. Select Yes when the new Window Pops Up. This method is quicker than doing each frame individually. (You will see the option to Apply to all Animations in the Previous Image.)
While we are on Image Points, we need to create 1 extra image point for each attack. This will be used to spawn a “Hit Box” so the game knows when it has collided with a THUG. (A) Select “ATTK” Animation & then >(B) Select the Attack Frame you want this to occur. FRAME 1 in this tutorial’s case. > (C) Select the origin/image point symbol >(D) Click the “+” symbol to add a new Image Point > (E) Right Click to Rename it “ATTK” > (F) Click on the image where you want this “ATTK” Image Point to spawn a Hit Box. (Around the Fist or Foot)
Repeat this Process for “ATTK_2,” “ATTK_3 (Which is just a Duplicate of “ATTK”),” “ATTK_FIN,” & “JUMP_KICK”
(NOTE: For “ATTK_FIN” you can add the “ATTK” Image Points to Frames 2 & 3 if so desire.)
Close out the Edit Image Window.
If you haven't already, over in the Projects Tab Right Click on this Sprite you just created to rename it HERO.
With HERO Selected, go over to the Properties Tab & Click on the Add/Edit Behaviors. Click the “+” Symbol to add the PIN Behaviors to HERO.
Still in the Properties Tab & HERO Selected, Click on the Instance Variables to Add 3 New Variables. Once again, click the “+” Symbol to add a new variable. (NOTE: The STATUS Variable Type is Text. TYPE IN IDLE FOR INITIAL VALUE.) Health represents how much Health the HERO has & Recover is how many times the HERO can get back up before Game Over. (Set the Numbers how you see fit in the future, but for learning purposes keep the same for now.)
We are going to create 2 separate sprites to handle the 8 directional movement & the Platform Jumping. So on the Layout, Right Click > Insert New Object > Select Sprite > Resize to 14 x 14 (This is going off the size of the HERO created in this tutorial.) > Fill it in with a Color & set the Origin Point to the Top.
Close out & Rename it 8_DIRECTIONAL
Give it the following Behaviors (8Direction & Solid) > Set the 8 Direction Behavior Default Controls to NO / Directions to 8 directions / Set Angle to NO
Create another Sprite. Name it PF_MOVEMENT (Platform). Resize it 14x14 (Same as 8_DIRECTIONAL) Set the Origin Point to the Bottom / Set Default Controls to NO
Insert a New Object > Choose TiledBackground & give it a color to represent Day or Night Sky. Name it TILED_BG_SKY. Repeat the process to create a ground. Call it TILED_BG_GROUND
Drag the TILED_BG_SKY until the Width is 1724 & Height 254
Drag the TILED_BG_GROUND until the Width is 1714 & Height 232
Create 4 new Sprite Objects (Each sized 32x480) Give them each the SOLID Behavior. Label them as follows: LEFT_EDGE_BARRIER, SCROLL_1_BARRIER, SCROLL_2_BARRIER, & SCROLL_3_BARRIER (THESE WILL BE USED TO PREVENT THE HERO FROM WALKING FORWARD TO THE NEXT SECTION UNTIL ALL THUGS ARE DEFEATED.)
Place the Barriers apart from each other around the Window size you set earlier in the project. These will eventually be set to INVISIBLE in the Properties Tab once all Events are created.
Since we are on the Scrolling Aspect, might as well add the Camera Object & Create a Flashing Advanced Signal. Insert a New Object > Select Sprite > Size it 32x32 > Give it a Color > Give it Scroll To & BoundToLayout Behaviors > Call it CAMERA (This will also be set to INVISIBLE)
Insert a New Object > Select Sprite > Size it 64x32 > Leave the Default Animation Blank > Call it ADVANCED_SIGNAL
Right Click on DEFAULT Animation & Duplicate. This time create a Hand or Desired Signal. Add a Blank Frame & Duplicate it Multiple Times so when it plays it will appear as it is Flashing On & Off. Make sure the Last Frame is Blank.
Create 2 new Sprites sized 6x6 > Give them their own Color > Call one HERO_ATTK_BOX & the other THUG_ATTK_BOX.
Create 2 more Sprites one sized 12x12. This will be titled HERO_FIN_ATTK_BOX & the other sized 24x24. Title this one HERO_JK_ATTK_BOX. Drag all of these just outside the layout. (NOTE: IF YOU PLAN TO MAKE ONLY ONE SIZE HIT BOX FOR HERO THEN JUST CREATE ONE HIT BOX & ADJUST WHEN IT COMES TIME TO PLUG IT INTO THE EVENTS.)
CREATE 2 MORE SPRITES TO REPRESENT HERO & THUG SHADOWS. SIZE THEM 24X24. ORIGIN POINT: MIDDLE
NAMES: HERO_SHADOW & THUG_SHADOW