Day 5 - Jumping

MikeDX - 4-3-2016 at 01:40 AM

All the code and assets for this tutorial are on github !

On day 4, we added a little 3 frame running animation to our player. Now we're going to make him jump!

To catch up, download day 4 from github

Open up the DIV IDE. If you choose to continue at the splash screen, we should see where we were when we left off yesterday.

First thing we need to do is create our jumping sprite.

close all the open maps via the MAP menu, and make a copy of graph 1 like we did previously.

edit the new graph using the graph editor to show our character in a jump motion.

Once you're done, drag this image into your FPG and give it the ID of 5.

Now onto the jumping code!

Add these three new private variable in your player PROCESS PRIVATE
list just below animcount as follows:

jumping = FALSE; jump_offset = 0; jump_power = 8;

The "jumping" variable we will use to know if we are jumping (or not)
The "jump_offset" variable is going to be used to keep track of how many pixels to jump every "FRAME"
The "jump_power" variable is used to store how strongly our player can jump.

Let's see how these are used:

We will use the spacebar to jump, lets add the condition to check for space being pressed in our code:

IF ( KEY(_space) && jumping == FALSE ) jump_offset = -jump_power; jumping = TRUE; END

This code does two things. First it checks if the spacebar is pressed, and then checks to see if we are already jumping. If we are, we don't want to jump again! We'll later change this to also check if we are standing on the ground.

now below this, add another IF statement, to do some calculations on the Y variable.

IF ( jumping == TRUE ) y = y + jump_offset; jump_offset = jump_offset +1; graph = 5; IF ( jump_offset > jump_power ) jumping = FALSE; graph = 1; END END

This simplified jump routine changes the Y variable by a different ammount each frame and sets the graph to be 5 (which is our jump sprite), until the offset has return to its original value. At which point it set jumping back to FALSE, and returns the graph to the walking sprite.

Run the code with F10, we should get something that resembles some reasonable jumping animation

Keywords learned in this lesson:

TRUE FALSE IF() KEY() _space END graph y

That's all for this step. next time - running!

humildadever - 14-3-2016 at 07:01 PM

I like Very good

RKSoft - 15-3-2016 at 02:47 PM

looks good :)

humildadever - 20-3-2016 at 12:50 AM

Thanks a lot. I waiting news upgrates..

pommyman - 19-1-2017 at 10:29 AM

That's Brilliant!

I've got a little jumping man!

RKSoft - 21-1-2017 at 04:21 PM

What about tutorial videos? Are they welcome?

MikeDX - 22-1-2017 at 05:09 PM

Absolutely! I have done some on YouTube already

RKSoft - 23-1-2017 at 01:25 PM

Mike, i took your tutorial prg, played with your code and this is the current result :D

smb_tutorial_test1.jpg - 93kB smb_tutorial_test2.jpg - 87kB

But, i found some baaaaaad bugs. I report them in the bug report forum.

This is the current version. A work of 2 days (2-3 hours per day).

ESC to kill
Q or ALT+X to quit the program
Cursor keys to move, jump and duck.

[Edited on 23-1-2017 by RKSoft]

Attachment: Tutorial 1 - Jumpman.7z (14kB)
This file has been downloaded 2500 times

MikeDX - 23-1-2017 at 07:13 PM

wow that is really nice!

Kinda puts my tutorial to shame, you've take it to the next level and beyond!

on linux I had to rename screens.fpg to screens.FPG but apart from that it ran flawlessly

RKSoft - 24-1-2017 at 02:43 PM

Thanks, but you are a better programmer, you work on DIV ;).
So, if i finish this little 1-level programm i will prepare it to a tilebase system with an editor (sperate) for DIV users who search such a system.

MikeDX - 24-1-2017 at 06:31 PM

I really like your colour scheme you have setup in the IDE. is that based on the blitz ide?

RKSoft - 25-1-2017 at 02:59 PM

I think it could be like Blitz but in my Blitz ide i setup white background and black font color ^^. This (in my DIV) color scheme i like because it is good to read the syntax, numbers etcl. When you are interest i can write the definitions here. ;)

Mario of Many Colours.

dom cook - 31-1-2017 at 10:10 PM

Here's my effort.

It's Mario pretending to be Marvin Spectrum.

Keys: _up = jump
_right = roll
_z = red suit
_x = green suit
_c= blue suit
combinations of _z,_x,_c make the other colours.

Attachment: smb.fpg (33kB)
This file has been downloaded 2529 times

Attachment: smb.prg (7kB)
This file has been downloaded 2463 times SNAP0002.PNG - 4kB

Here's the music (courtesy of the amazing LMMS, which I've just discovered)
Attachment: forestrun.ogg (1.1MB)
This file has been downloaded 2816 times

[Edited on 1-2-2017 by dom cook]

MikeDX - 31-1-2017 at 11:17 PM

That's very cool Dom. I'm a huge fan of the spectrum. DIV can even output a spectrum type mode via a dll.

Roland, yes I'd like your colour config please! :)

dom cook - 1-2-2017 at 06:26 AM

Quote: Originally posted by MikeDX  
That's very cool Dom. I'm a huge fan of the spectrum. DIV can even output a spectrum type mode via a dll.

Not that Spetrum, Marvin Spetrum is/was a nice mini game involving hopping through coloured light gates. (It was on Newgrounds I think)

MikeDX - 1-2-2017 at 07:49 AM

Your colour scheme threw me off!

Still cool though

RKSoft - 1-2-2017 at 05:19 PM

@dom cook
nice little programm, continue work and make it final :)

dom cook - 1-2-2017 at 07:26 PM

Quote: Originally posted by RKSoft  
@dom cook
nice little programm, continue work and make it final :)

Sure, just keep supplying the graphics. (Did you notice?)

Here's an update in which I've added music, removed a redundant key _right function, and changed the reverse scroll after collisions so that only the player is affected (wrt screen coordinates).

[Edited on 1-2-2017 by dom cook]

Attachment: smb.prg (7kB)
This file has been downloaded 2423 times

Attachment: forestrun.ogg (1.1MB)
This file has been downloaded 2790 times

RKSoft - 1-2-2017 at 09:29 PM

It will be better when you pack all needed files into one zip ;)

Nice run, but i'm confused with the keys. ^^

[Edited on 1-2-2017 by RKSoft]

willicab - 2-2-2017 at 01:40 PM

Hi, can you give me permission to translate this tutorial and post it on my blog?

MikeDX - 2-2-2017 at 02:29 PM

Yes you can have permission to do that :)

willicab - 2-2-2017 at 02:44 PM

Oh thanks :D