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

0 Members and 1 Guest are viewing this topic.

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
[tutorial] Program Flow - Platformer
« on: March 20, 2010, 02:29:56 am »
Code is outdated, but the ideas behind it is not
Index
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.
« Last Edit: November 21, 2012, 03:11:08 pm by Eeems »
/e

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55941
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: [tutorial] Program Flow - Platformer
« 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 x.x

Btw can we post here?

And 6000th post for me on the new forums :P
« Last Edit: March 20, 2010, 03:04:31 am by DJ Omnimaga »

Offline trevmeister66

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1009
  • Rating: +14/-5
    • View Profile
Re: [tutorial] Program Flow - Platformer
« Reply #2 on: March 20, 2010, 03:00:53 am »
Very nice start and layout. I'm looking forward to reading more.
Projects:    nameless RPG: 1.0%  |  Reverse Snake v1.5: 100%  |  Secret Project: 5%  |  DUNGEON: 70%

My MW2 Blog <-- Please visit :)

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [tutorial] Program Flow - Platformer
« Reply #3 on: March 20, 2010, 03:07:07 am »
Thanks! Don't worry, any new additions I'll add to the first post.
/e

Offline ztrumpet

  • The Rarely Active One
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5712
  • Rating: +364/-4
  • If you see this, send me a PM. Just for fun.
    • View Profile
Re: [tutorial] Program Flow - Platformer
« Reply #4 on: March 20, 2010, 02:39:22 pm »
That looks great Eeems!  That's the general layout I use too. ;D

Congratz DJ! O0

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [tutorial] Program Flow - Platformer
« 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
« Last Edit: March 20, 2010, 04:22:21 pm by Eeems »
/e

Offline Will_W

  • LV3 Member (Next: 100)
  • ***
  • Posts: 54
  • Rating: +1/-1
    • View Profile
Re: [tutorial] Program Flow - Platformer
« 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.
ex de,hl
ld (hl),e
inc hl
ld (hl),d
ld a,(hl)

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [tutorial] Program Flow - Platformer
« 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.
/e

Offline Quigibo

  • The Executioner
  • CoT Emeritus
  • LV11 Super Veteran (Next: 3000)
  • *
  • Posts: 2031
  • Rating: +1075/-24
  • I wish real life had a "Save" and "Load" button...
    • View Profile
Re: [tutorial] Program Flow - Platformer
« 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,#)
« Last Edit: March 20, 2010, 04:55:01 pm by Quigibo »
___Axe_Parser___
Today the calculator, tomorrow the world!

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [tutorial] Program Flow - Platformer
« Reply #9 on: March 20, 2010, 04:51:56 pm »
Thanks I'll fix that :)
/e

Offline jsj795

  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1105
  • Rating: +84/-3
    • View Profile
Re: [tutorial] Program Flow - Platformer
« Reply #10 on: March 20, 2010, 04:54:18 pm »
-post deleted due to quigobo's edit-
« Last Edit: March 20, 2010, 05:04:20 pm by jsj795 »


Spoiler For funny life mathematics:
1. ROMANCE MATHEMATICS
Smart man + smart woman = romance
Smart man + dumb woman = affair
Dumb man + smart woman = marriage
Dumb man + dumb woman = pregnancy
2. OFFICE ARITHMETIC
Smart boss + smart employee = profit
Smart boss + dumb employee = production
Dumb boss + smart employee = promotion
Dumb boss + dumb employee = overtime
3. SHOPPING MATH
A man will pay $2 for a $1 item he needs.
A woman will pay $1 for a $2 item that she doesn't need.
4. GENERAL EQUATIONS & STATISTICS
A woman worries about the future until she gets a husband.
A man never worries about the future until he gets a wife.
A successful man is one who makes more money than his wife can spend.
A successful woman is one who can find such a man.
5. HAPPINESS
To be happy with a man, you must understand him a lot and love him a little.
To be happy with a woman, you must love her a lot and not try to understand her at all.
6. LONGEVITY
Married men live longer than single men do, but married men are a lot more willing to die.
7. PROPENSITY TO CHANGE
A woman marries a man expecting he will change, but he doesn't.
A man marries a woman expecting that she won't change, and she does.
8. DISCUSSION TECHNIQUE
A woman has the last word in any argument.
Anything a man says after that is the beginning of a new argument.

Girls = Time * Money (Girls are a combination of time and money)
Time = Money (Time is money)
Girls = Money squared (So, girls are money squared)
Money = sqrt(Evil) (Money is also the root of all evil)
Girls = sqrt(Evil) squared (So, girls are the root of all evil squared)
Girls = Evil (Thus, girls are evil)
*Girls=Evil credit goes to Compynerd255*

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [tutorial] Program Flow - Platformer
« Reply #11 on: March 20, 2010, 06:02:33 pm »
oh right :) thanks Quigobo.
also, adding a few more sections
/e

Offline Gale

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 115
  • Rating: +1/-0
  • Ti-84+ Silver Edition
    • View Profile
Re: [tutorial] Program Flow - Platformer
« 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!
remember me as a time of day...

Offline Eeems

  • Mr. Dictator
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6265
  • Rating: +318/-36
  • little oof
    • View Profile
    • Eeems
Re: [tutorial] Program Flow - Platformer
« 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 :P
« Last Edit: March 20, 2010, 07:03:34 pm by Eeems »
/e

Offline Gale

  • LV4 Regular (Next: 200)
  • ****
  • Posts: 115
  • Rating: +1/-0
  • Ti-84+ Silver Edition
    • View Profile
Re: [tutorial] Program Flow - Platformer
« 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
remember me as a time of day...