Novice Game Questions

[markwaynejones]

I have recently decided to build a simple HTML5/Canvas platformer game. This is the first time I have created any type of game and I just had a few questions so any answers will be much appreciated.

I have currently created a platformer where the character can move left and right, the camera follows him as expected and I have even added blocks for him to jump on. However how would I make the character walk up some steps or up and down a slope such as a hill or some stairs?

Also I am currently using one big image for the background of the game however I have seen some examples where background/levels are built up using really small tiles (sprite sheets) along with arrays to plot the tiles. Which is the best way to do this and if its using an array is there any examples or tutorials of how I can create levels this way?

I tried to go through the code on the following site http://madebyevan.com/metroid/ as it has the up and down stair functionality I require, however I found the code quite difficult to understand.

Thanks

[Nincompop]

How are you developing the game? What engine?

 

You'd probably want a single background that only appears to move, and tiles to cover the the blocks you jump on. Slopes, I can't really help you with, but try this.

http://higherorderfun.com/blog/2012/05/20/the-guide-to-implementing-2d-platformers/

[OadT]

Well, I think you use plain js right? I have a feeling

 

A solution for your stairs:

when your character is walking there  must be a statement like "posX--;" in your code. If you want to walk up you must also change the value for the Y-position. You must add the maximum high, which your character can walk up without jumping, for example 20px to you posY and save the value in an variable

"var testPosY = posY - MaxStepUp".

Now you can use a while-loop to set the testPosY lower and lower until you detect a bottom, so: 

...posX--;for(var testPosY = posY - MaxStepUp; testPosY < posY; testPosY++){    if(isAtBottom[posX][testPosY]/*You must create here your own solution, i don't know how your world works, srry*/){        break;    }}posY = testPosY;...

I just want to tell you this concept (hope you understand me xD else you can write me a message) I do not know if the solution works on your game, because I don't know how your game works

 

BTW: I like madebyevan.com, I found this site some weeks ago. http://madebyevan.com/webgl-water/ is fantastic

[Solidus]

It is actually a quite advanced topic.  Walking up/down slopes and the "pixel perfect" collision I see in this engine are probably going to be over the head of a novice programmer.

 

That's just my opinion, I'd love to hear differing thoughts though.

[Quetzacotl]

It is an advanced topic. You have to cast your character velocity onto slope line, probably add gravity, check intersections with slope and few more things. It is actually more of a math problem, than programming.

[gamingthinktank]

Use box2d physics engine, one of its ports support html5, it is free and open source. It would solve all of your dynamics. A lot of examples, demos and documents are available. A set of editors are also available to visually edit your game.

 

PS: Box2D physics engine became famous due to Angry Birds game. Guess its power