Download Panel scroll RPG (1) set up and PC

Panel scrolling RPG (1) Set up and PC
1. Setting up the world
File, New.
Double click the white box below “Thumbnail” (Frame 1) to see the game
area
The game is too small, so we are going to make it bigger
It is currently 640 x 480 pixels (about half a page of A4 paper)
You need to change the Properties (size and colour)of the frame.
If at any time you cannot see the Properties window, your toolbar or
anything else, select View, Toolbars and make sure all the controls in the
picture are ticked. Click on Frame to see its properties.
We want it 9 times as big, so that we can have 9 areas to wander around in, so we are going to change Size in the
Frame properties to 1920 x 1440 and change the background colour to one of the greens
640 x 3
640 pixels
480
pixels
480 x 3
To view your whole game area, choose 25%.
To see a single panel, select 100%.
2. Setting up the grid
There are three grid controls, Setup, Show/Hide and Snap to grid.
Check that Show and Snap are both on (when are they are highlighted in blue)
Set the grid size to 32 x 32 pixels with Grid setup.
Grid setup
Show/hide grid
Snap to grid
3. Creating backdrops (objects like stones and trees)
Right click on the frame, select “Insert object” and choose Backdrop object (NOT Active backdrop).
Delete the image, using the Selection tool (dotted rectangle) and the Delete key (NOT Backspace) on your
keyboard
Make sure your big shapes (rocks, trees) use the full width and/or height of the frame
Firstly we will draw a rock.
Choose a grey or a brown and with the Brush tool draw
the outline. Again, make sure you use the full width or
height of the canvas. Use the Fill tool to colour it.
Shading. Imagine the sun is on the top right of your
game. The rock will be a lighter shade there. The part
away from the sun will be in the shade, and therefore darker. So we are going to pick a shade about 3
shades lighter and another 3 shades darker to colour the rock
I used a dark green for its shadow on the grass.
Use the Brush tool to shade. Save your stone. Click on the rock and
check in its Properties rename it stone and set its Obstacle type to
Obstacle.
Drawing a tree
Using the same technique, choose a mid-brown and draw the trunk,
branches and roots, then fill. Do the same with the canopy (leaves) of the
tree. Make sure you use the whole height of the frame.
Use the same technique of choosing darker and lighter colours to shade
Save your tree, in its
properties rename it Tree
and set its Obstacle type
to Obstacle.
I drew a couple of mushrooms. These are not
obstacles.
Copy and paste a couple of rocks and trees to see the effect
If you make mushrooms or flowers, set the Obstacle type to None.
If you click on the Paint mode button, you can
paint objects in the frame quickly
If you manage a couple of rocks and trees, then create
different sized backdrop objects. My tree here will be part
of a quest. The dimensions must fit the grid. This tree is 96
pixels high x 160 wide (3 blocks wide and 5 blocks high). Go
to the properties and change the size.
4. Inserting (temporary) panel indicators
Add a new Backdrop (NOT Active backdrop) and totally fill it with a colour that contrasts with the background colour.
In its Properties, change its size to the window size, 640 x 480 pixels and set its x and y coordinates to zero. Zoom out
to 25%
This needs to be copied and pasted to create a chessboard effect. Set the x and y coordinates to ( 640, 480) (1280, 0)
(1280, 960) (0, 960)
Continue until you have set up five blue rectangles. As the player character walks from on rectangle to the next, the
screen will flip to that next panel. We will delete these once we have placed trees and rocks along the edges.
5. Inserting the Backdrops (scenery)
We are now going to paint trees and rocks dotted about and along every border. Where a green and a blue join, you
must paint a backdrop on both panels:
To do this, we use the Paint mode. Select the Paint tool (
)then click on the backdrop you wish to paint onto
your game. Next just trace the path of where you wish the objects to be placed.
The completed backdrops shown on the left (below). The blue rectangles were just to show the screen sizes. Once
we have painted the trees and rocks, we can delete the blue rectangles (right, below).
Remember, make sure all your trees and rocks are set to Obstacle, so we cannot walk through them and flowers or
mushrooms, obstacle type to None.
6. Inserting the Camera object
Right click on the frame, Insert object, Active Object. In its Properties, its current name is Active. Rename it Camera
and uncheck Visible at start. Add and rename 4 alterable values, X Pos, Y Pos, Target X, and Target Y.
7. Insert the Player character
Create another Active object and name it Player.
Double click on it to edit. Delete the default design. Import
the Sideways 1 graphic from the Sprites folder in Teams
You should now see the first of the player character sideways when
he is standing and facing right. You only need one frame for this; for
walking, you will need four frames in each animation.
Use the same image, flipped, to stand facing left. Right click and copy the player sprite on Frame 1
Click on the little square on the left and the arrow will change
direction
Right click in the space where Frame 1 should be and paste.
Right click on the sprite and choose Flip horizontally.
Create the movement animations
Copy the right facing
stopped frame. Select the
Walking animation. Right
click where you should see
the sprite and paste. Right
click on the sprite and
select New frame. Clickteam will create a blank frame 2.
Select Import (as you did
before) and choose the second
of the walking animations.
Repeat this until you have all
four walking frames.
Use the same method as before (to select all four, click on the first, hold
down Shift, then click on the fourth) right click, to copy and paste to the
left-facing walking animation. Flip horizontally, as before
On the Options tab, set the variables as shown. Do this for both directions
Once you have done this, repeat for the walking towards,
walking away, stopped facing forwards and stopped facing
away frames
Ok all of this and select Movement in the player characters
the variables as shown in the image.
In Properties make sure Use Fine detection is unchecked
Properties. Again, set
You can now test all of this. Make sure your player character is in the top left frame of your game
Click on the Run
button and use the arrow keys to move your character
8. The Event editor
Now we need to make sure you cannot walk through trees and rocks. Open the Event editor.
Click on New condition and select the player character, then Collisions, Backdrop.
Click on the cell below the player character and select Movement,
Bounce.
9. Scrolling
Go back to the Event editor.
Right click on New condition and select Special then Always.
In the Storyboard controls (chessboard icon)
right click, Scrollings, Centre window position
in frame.
In the popup dialogue box, select Relative to
and choose the Camera object
Create another Always event, as above
We are going to insert this code to allow us to flip from screen to screen:
Right click below the Camera object,
select the Player character icon, Position,
X coordinate.
Type a minus sign
Again, right click on the Player character icon,
Position, X coordinate.
Then type mod 640 + 320
Repeat for the Y coordinate but this time put mod 480
+ 240.
Start your game.
You should now be able to
walk around your entire map