Author Topic: [tutorial] Program Flow - Platformer (Read 30900 times)

Eeems · « **on:** March 20, 2010, 02:29:56 am »

Code is outdated, but the ideas behind it is not

Index

Preface
Structure
Initializing Sprites and Variables
Store 'map' or screen to back buffer
Repeat getkey(15) and (other checks
Animations/Sprites
Updating the Screen
Collision Check
Gravity and Jumping
End/Return and Routines
Conclusion

Preface

Program flow can sometimes be one of thetoughest challenges when programming. In Axe it can still be a problem,especially with the buffers.
This is a short guide on how to setup your program so that it is easyto handle and relativly quick.

*Note - this is for AXE programs only, butyou can take some of what you learn and apply it to xLib/Celtic IIIprograms.

Structure

the basic structure I find Issometimes the hardest to come up with, but a good one for platformergames is as follows:

Initialize sprites and variables
store 'map' or screen to back buffer
repeat getkey(15) and (other checks
all drawing things here, like animations
draw sprites that are constant
dispGraph
recallpic
X axis collision check
X axis movement code
Y axis collision check
Jump check
gravity/jump action
End
return
routines

I will go more in depth tomorrow on each section.

Initializesprites and variables

Sprites and variables are a no brainer.Everybody will have to initialize them at some time, so why not do itright at the start? The easiest way to do it is to store all thecharacter sprites to one location, and all the enemy sprites toanother, and then all the other sprites to yet, another.

[sprite data->Pic1
[sprite data->Pic2
[sprite data->Pic3

This is the usual setup for sprites, and it works quite well. Pic1 willstore all the standard sprite data for the character and can be calledby:

A*8+Pic1

where A is the sprite you want to call starting at 0.
You can also just change the sprite calling to exact numbers, so:

Pic1       sprite 0
Pic1+8       sprite 1
Pic1+16    sprite 2
Pic1+24      sprite 3
    ...etc...

You will then want to initialize the other variables. So there are"real" variables and then pointers. "Real" variables will be easy youjust store the value to it.

0->X
0->Y
10->Z

Storing to pointers is kind of hard compared to that. You can store itin a few different ways. You can just do the standard:

10->{L1

Then there is the harder to use:

[data->GDB1
conj(GDB1,L1,size)

This is a lot harder to use due to how it is stored.

Store 'map' or screen to back buffer

This can be kind of hard, you can eitherdraw it manually or you can just use a map type engine to draw usingsprites.

Map data format:

The data uses run length encoding for compression. Lets say we had a simple map:

11111000001111
00000222220000

Pretty simple, each number representing a different tile. With normal storage this would takea single byte per tile. Or we could represent the data in a different way:

150514052504

Seems much smaller, but what does it mean? lets insert some imaginary commas and dashes to makeit easier:

1-5,0-5,1-4,0-5,2-5,0-4

Now you may or may not be able to see how the data is represented. The first segment is 1-5, or 5 '1's ina row, followed by 0-5, or five '0's in a row, and so on. This is how the data in run length encoding isrepresented. And to further the compression (or confusion), each #-# segment is packed into a single byte.Instead of two hex digits to represent a number from 0-255, we will have 2 hex digits, each from 0-15,representing the two numbers of each #-# element.
The first Hex digit 0 to 15 is the tile number. The second hex digit is the number of tiles to add to thetilemap. The digit goes from 0-15, but 0 doesnt make much sense, since that would mean this element doesntdo anything , so we will add one to this after we decompress it so that it has a range of 1 to 16.
There is a small disadvantage that if you have empty spaces of 17 or more in a row, it will take more than1 byte to represent in the code.

Decompressing the Map:

[Data]->GDB1 //map data to GDB1
[tileData]->Pic1 //tile data for tilemap

0->N //element index for map data
0->I //map index for storing tile data

While I>=96 //until we have stored all tiles
{GBD+N}->A //Take the first element of the map data
N+1->N //Increment the map index
A^16->B //spit the map element into it
A/16->A two separate elements

For(F,0,B //fill the map from current position I to I+B
A->{L1+I} //could be optimized with Fill but i couldn't get it
I+1->I //working :/
End

End //End while

After this code is run, the tile data will be decompressed into L1, as follows

0 1 2 3 4 5 6 7 8 9 10 11 12 13...

ect, it will be in a straigt line, but you will have to access it using your own routine. Something like this

{Y*W+X+L1}

where W is the width in tiles of your map. X and Y would be the tile coordinates starting at the top left at0,0.

Displaying the map:

here is a rudimentary program that should be run right after the previous decompressing program:

For(X,0,11 //loop through the entire screen coordinates with tiles of 8x8
For(Y,0,7
{Y*12+X+L1}->A //retrieve the correct tile from the data in L1
Pt-On(X*8,Y*8,A*8+Pic1 //draw the sprite to the screen
End
End
Also attached is a PEDIT program to create and compress maps into a Hex String into Str1, as well as an Axe program to decompress and display them. Just put the string data into GDB1

Repeatgetkey(15) and (other checks

This is the core of the program, the<body> tag if you will. All your checks to see if thegame has ended go here in this format:

getkey(15) and (check 0 and (check 1 and(check 2

The easiest way is to make a variable your game end flag, I usually useF, and do all your checks in the loop.

Animations/Sprites

All animation code should be put before thescreen is updated as well as all the sprite code. The most basic onewould be to just display theenemy and the character.

pt-change(X,Y,Pic1
pt-change({L1},{L1+1},Pic2

Updatingthe Screen

Next You want to update the screen and thenprepare if for collision detection.

DispGraph
RecallPic

If you store the map to the back-buffer then you will want to recall itso that you can use pixel-based collision detection.

CollisionCheck

The easiest way to do collision check in apixel-based way is to check one pixel off of the side:

0->Z
0->V
0->S
0->T
For(A,0,7
Z+pxl-test(X-1+A,Y)->Z
V+pxl-test(X+8+A,Y)->V
S+pxl-test(X,Y-1+A)->S
T+pxl-test(X,Y+8+A)->T
End

Zwill return the amount of pixels on on the left of the character, Vreturns on the right, S above, and T below. the way to return where the pixels are would be:

0->Z
0->V
0->S
0->T
For(A,0,7
Z+(8-A*(pxl-test(X-1+A,Y)))->Z
V+(8-A*(pxl-test(X+8+A,Y)))->V
S+(8-A*(pxl-test(X,Y-1+A)))->S
T+(8-A*(pxl-test(X,Y+8+A)))->T
End

This will return 1 if the first pixel tested is on, 2 if the second, 3if the third, etc. This can be good for detecting slopes.

Gravityand Jumping

Now there are many different way's to dogravity, but the easiest way is to apply a constant force in onedirection.

Y+(!collision)->Y

yourcharacter will fall until you a collision is detected, creating theeffect of gravity. Jumping is harder, you have to have a jump variablewhich changes as your jump progresses.

!If J
10*(getkey(4) and (collision))-J
Else
J-1->J
End
Y+(2*(!collision and (J)))->Y

Ifthe ground beneath you is solid, and J is 0 and you are pressing the upkey then 10 will be stored to J. If J !=0 then it willdecrement.If J !=0 then your character will move up two pixels. twopixelscompensates for the gravity so in reality you move down one pixel and uptwo, which balaces out to 1 pixel up.

End/Returnand Routines

Thelast part of your code will include and End statement to end the loopand then whatever closing code you want. then you will place all yourroutines due to the fact that it is the logical place to place them

Conclusion

In this tutorial I have taught you how toset up your program flow easily for platformer games in AXE. Soremember anything involving animation or sprites should go before thedispGraph command and everything involving movement should be after it.

DJ Omnimaga · « **Reply #1 on:** March 20, 2010, 02:34:49 am »

mhmm that might be useful, because sometimes I have no clue about the best order for my code

Btw can we post here?

And 6000th post for me on the new forums

trevmeister66 · « **Reply #2 on:** March 20, 2010, 03:00:53 am »

Very nice start and layout. I'm looking forward to reading more.

Eeems · « **Reply #3 on:** March 20, 2010, 03:07:07 am »

Thanks! Don't worry, any new additions I'll add to the first post.

ztrumpet · « **Reply #4 on:** March 20, 2010, 02:39:22 pm »

That looks great Eeems! That's the general layout I use too.

Congratz DJ!

Eeems · « **Reply #5 on:** March 20, 2010, 03:46:35 pm »

updated the look I'll post more later today.
also thanks ztrumpet

EDIT: added new section

Will_W · « **Reply #6 on:** March 20, 2010, 04:37:46 pm »

It's often helpful to make a flowchart. I use Dia for that.

The core of my BASIC parser by the way.

Eeems · « **Reply #7 on:** March 20, 2010, 04:39:16 pm »

True, but this is a good way for people to get started. Also, I have added another section.

Quigibo · « **Reply #8 on:** March 20, 2010, 04:50:40 pm »

You should get used to having the number come before the sprite.

Instead of doing:
Pic1+(A*8

Do this:
A*8+Pic1

It saves 2 bytes in the compiled code since you don't need the parenthesis. Same thing with lists. You can even extend it to 3 dimensions. Say you need to reference an 8x8x8 grid:

Instead of doing this:
L1+(X*64)+(Y*8 )+Z

You can do this:
X*8+Y*8+Z+L1

Notice the multiplication distributes which even further reduces the code since powers of 2 are more optimized when they're smaller.

EDIT: By the way, the routine for copying memory from one place to another is conj(source,destination,bytes to copy) So your example would be conj(GDB1,L1,#)

Eeems · « **Reply #9 on:** March 20, 2010, 04:51:56 pm »

Thanks I'll fix that

jsj795 · « **Reply #10 on:** March 20, 2010, 04:54:18 pm »

-post deleted due to quigobo's edit-

Eeems · « **Reply #11 on:** March 20, 2010, 06:02:33 pm »

oh right

thanks Quigobo.
also, adding a few more sections

Gale · « **Reply #12 on:** March 20, 2010, 06:45:14 pm »

that was great!!! exactly what i needed to know for making a platformer under axe!!! i gave you a +1 thumbs up P:, but i wish i could give more!

Eeems · « **Reply #13 on:** March 20, 2010, 06:51:00 pm »

Thanks

I still have two more sections to add, but they are inconsequential

hope it helps a lot

I actually am using this on a project I'm working one, which is what gave me idea to write it.

EDIT: added some cooler styling

Gale · « **Reply #14 on:** March 20, 2010, 07:05:23 pm »

i have a question. for the gravity and jumping section, what would you put in (collision)? sorry, i'm kinda new to platformers