[WIP] Platforming game (I'm new to HTML5 games, advice appreciated !)

[mugg]

Hi there,

 

I'm making a HTML5 platforming game. I'm really new to this sort of thing so advice I appreciated. I was asked to change this post's structure to present the game more rather than inquirying about programming problems.

 

What kind of game I'm making

 

I want my game to have a medieval feel. At night (so some rooms will be dark). The player walks through a forest and maybe later caves and a castle. The game is made up by rooms and you walk through one room, then the next and so on. I want to make this a maze and the objective will simply be to play through the rooms and trying to find the end.

 

The rooms will later be filled with enemies and puzzles. For enemies, I want to make sword-swinging guys and spear throwers and the like. For puzzles, they will depend on the items that I end up making. Items will just be lying on the ground throughout the game and you can pick them up and throw them or use them. For example I will make an apple item that you can eat but can also throw at a switch to open a door.

 

I'm adding a timer to the game so the objective will not only be to play through the game, but play through it as fast as possible trying to find better and better strategies. For that purpose I hope to add enough variety and different objects (i.e. enemies and items) that have different behavior towards each other.

 

Things to add

 

I'm doing this game at my work whenever I happen to have nothing else to do. I've been adding things to the game but it's still in a very early phase, not even 10% done. I have a TODO list that I will not bother pasting here since it's so long but it's mainly these things:

- Config and help screens

- Adding items, weapons, objects(that can't be picked up such as doors or ladders), enemies, NPCs and adding the logic to them e.g. I want to push NPCs around but also want them to push me when I don't press any key. I want to be able to stand on items and NPCs. etc.etc.

- Adding attacks, adding coins that you can collect and use to pay NPCs for items etc.

- Designing all the rooms and switching the placeholder graphics for actual graphics. I want the playable character to be a female mercenary/knight, but a cute small one with red hair or something.

- Adding some kind of object that saves the progress from each room: When I leave a room, all items and enemies' positions should be saved and when I come back those positions and speeds should be loaded.

- Audio! I don't know how I'm going about this. I already saw audio may work easily in HTML5, I just need the WAV files. Maybe there's a site where I can easily compose 8bit sounds?

 

Screenshots

 

From version 1:

 

 

From version 5:

 

 

From version 8:

 

 

From version 21:

 

 

From v27 (non playable), the game was made back from 2.5D into 2D:

 

 

 

Play

 

v8 http://mugg1991.altervista.org/v8.html

 

v21 http://mugg1991.altervista.org/v19/21.html

[AzraelTycka]

Hello,

 

first thing, I don't think your topic name best describes your game (or even your problem), second thing people usually tend not to download files from unknown sources (as you are), that's why code tag is here so you can post your code here for others to check (or some other webpages like fiddle) - also people with tablets and phones won't even bother to check your download links ;-).

 

The webpage you link to is mainly for beginners that's why there isn't too much logic (and also too much other stuff), it introduces the basics of working game to you in the way that you can build your own game upon that knowledge and enhance it very easily.

 

When you run update(delta / 1000) in main() loop you feed the update function with time difference since last call of main(). This time highly depends on how fast your computer is capable to process your code in main() function. Therefore, first call to main gets starting time and proceeds with game logic, then you lag and the second call comes after a longer time period thus everything that depends on delta (time difference) in your game logic will move (increase, decrease, ...) in proportion to this (~larger) delta. You can for example call your main inside the loop like this update(Math.min(delta, 0.1)) or something similar, this will make sure that your game won't skip too far ahead in time when your computer encounters some unexpected problems and your game logic stays more smooth. And also this way you can avoid problems when you switch tabs, minimaze, ...

 

 

EDIT: I just rechecked the link of the tutorial, and my point wasn't exactly precise, because you set new time (then) before calling REF (requestAnimationFrame), but basic idea remains the same.

 

PS: Post your code in code tags here, then someone can give you an advice or two ;-).

[mugg]

I would like to edit my previous message, but the editor doesn't show any textarea. Probably the message ended up being too long for the editor to handle... What I wanted to add:

 

Please don't pay too much attention to the commented notes in my code, some info may be outdated, wrong or it may be in German language.

 

There was one other question:

I was wondering how to add two event listeners to one canvas. I wish I could track "mouse move" and "mouse down" coordinates seperately. (I googled for it a while but couldn't get a good solution yet).

[AzraelTycka]

I'm not really sure if I got it correct, but (in javascript) you can add more event listeners to one object. I didn't read your whole code just went swiftly through it so hopefuly someone else gives you more hints, but I'd like to highlight a few things before anything happens (btw if anyone who is knowledgeable about this forum reads this: code tags element really doesn't have its own scroll bar?).

 

At first, you should really use some common syntax, your names are really hard to read, usually in programming you name your variables, functions, ..., something like this: nameOfTheVariableOrFunctionOrWhatever or name_of_the_variable_or_... (second example is long for typing that's why you usually meet the first one xD), it helps a lot to you and anyone else who reads your code.

I also noticed that you call console.log(diff) in yoru main loop, don't do that unles you are testing a specific part of you code but delete (comment) it immediately after you finish that. Right now it adds unnecessary overheat to your runs, if you were testing your game with this the whole time you could lag because of that really heavily (this can kill yoru fps from 60 to 0 if you are not careful).

 

Btw when you say lags what exactly do you mean, your computer is so outdated that even hamsters run faster than your processor? Have you tested the game with chrome build in tools, you can easily discover bottlenecks this way.

 

And the most important thing, can you upload your game to somewhere (your website, or just create one on a some free server providing space) with your imgs and all the stuff you use so anyone can try it? You are in showcase section where you are supposed to show something other than your code :-D. Doesn't really matter if your game has bugs, isn't finished or whatever. (especially if you are looking for what causes yoru problems, others can't exactly help you when they can't reproduce it and you could show your game code there because here it seems it kinda gets in the way when there are no scroll-bars with height regulation for code in your post )

[mugg]

About variable names, I named them so that at least I can understand them. I didn't expect to show my code to anyone hence why commented notes are more or less useless or non-English. Please feel free to point out the variable names you find misleading or confusing.

 

I also know that I don't really need some variables (I may be able to use just one for all of these: jumpingframe, fallingframe, stun... I was also going to add attackingframe later). Saving on those variables would probably take some painful rewriting though, and I don't know if I'm going to need those variables later so...

 

About console.log() I must have forgotten it. I usually notice this kinda thing sooner or later and delete it.

 

About my computer, yes it's kinda crappy. I don't have much RAM so when I have some livestreams or a big game open and test my HTML5 game at the same time, that's when that glitch happened where my character jumped really high.

 

Since I have never done this before, I wasn't aware of the "distributing html5 games as files is bad" thing. Unfortunately I have never done something like setting up my own server. For right now, maybe you can link me a site where I can upload my game.

[AzraelTycka]

You actually don't need to set your own server, just register at any free hosting you find with google and then upload your html file and images (don't forget to create folders as images or whatever you use for yoru files - you don't need to create folders but I noticed that you have your files distributed this way so you need to have correct paths and also the same folder structure) to the server, it's really easy, it's basically same as having an extended harddrive :-).

 

If you can, try checking yoru games at some other computer which is a bit faster adn you will see for yourself, btw that Math.min() trick is a nice and easy way how to cap your delta time. For other bugs, inconsistencies we need the running game (test sample) and then we can tell you more, so set it up it's really easy.

 

Search 'free hosting' or 'free webhosting' and it will give you tons of options, just pick one of them which you find most suitable for you and you are ready to go.

[mugg]

I adjusted some things about my game. Now it waits until 16 milliseconds have passed before updating and rendering a new frame. I did this thinking that it would prevent fast computers from running my game faster than they should.

 

I'm feeding the update function a constant 0.7 now on top of the above, because I don't want such inconsistencies in my game where player can randomly jump 7 pixels higher.. I want this to become a platform game that people can speedrun through and see how fast they did when they reached the end. So it needs to be robust.

 

The version of the game (v5) that I pasted and linked to is outdated by now. I've been working on v7 and it includes smaller canvas size (but stretched by CSS) to increase performance. There was also no screenscrolling whatsoever and rooms where just constant images. Now, rooms are twice the canvas' size and screen scrolls if player's position exceeds canvas' width/2 or height/2. Also included an FPS display.

 

The stats and wallboxes can be toggled by clicking the top left screen (stats and wallboxes are for debug purposes only after all).

 

 

So about the free hosting, please name a site (at best one that you've used), otherwise I feel lost. I googled for a few sites but many claim things like "first year free, then 2$/m" or "first three months free". They ask my password and real name. I registered at one site and got the note that they will come back at me by email but didn't get any mail all day yet. I feel really uncomfortable entering my passwords in just any website, possibly phishing sites.

[AzraelTycka]

At first I think it will be wiser to remove the post with your code (or at least delete its content) it will help the readability of your whole thread - especially if you have already made some changes (but for advices on code post it on your website together with the game, just one page for code and the other one for your game should be enough ;-)).

Regarding the free hosting, I can't help you that much I only used local ones (in my country) which are mostly not in english and definitely not in german. Otherwise I pay for space on server it's quite cheap considering the cost per year, but I picked server provider very carefully to meet all my criteria as well as credibility. Paying for space is quite useful you don't need to take care of server itself, you responsible just for your website (basically). In regards to registration, well it can take a day or two or a week depending on where you are registering, that's how the system is set up on their side so it mostly depends on which hosting you pick.

I just swiftly searched for free hostings and got these leaders to see which are suitable and have some credibility. Hopefully it will help you set up your environment and show us what you have ;-).

Link1, link2, otherwise you can search as me for: free hosting review or free hosting recommendation, ...

 

Looking forward to seeing from you, bye.

[mugg]

I can't edit or remove the post with the code because of the scrollbar thing.

 

Ok, I was finally able to set it up.

 

Please keep in mind this game is nowhere near finished (with the stuff on the todo list, I think maybe 10% is done and I've been at this for about 30-40 hours..). Stats and wallboxes will be enabled by default and you can toggle by clicking in the top left corner of the canvas (while in the first room). Graphics are all placeholders.

 

http://mugg1991.altervista.org/v7.html

 

http://pastebin.com/Bz9f6MwY

 

I can't stress enough, I'm worried about lag. It seems the game lags even when I don't have programs opened. Maybe someone can help me improve it or fix it. Or maybe it is just something that HTML5 game devs have to expect and accept? I don't know

 

Maybe it's possible to improve performance if I halve the framerate and make player move twice the distance? I don't think this will fix the random lag spikes (that last 1 sec, on my end at least) though.

[AzraelTycka]

Well I guess I have a bad message for you. I just tried your prototype-demo on my super old computer (like eight years old, maybe more, one of the first intel dual core processors ever, 2 GB RAM ;-)) and the whole thing was running smoothly at 60 fps I practically didn't experience drop of a single fps (at least that's what chrome dev tools say as well as your fps meter), chrom tools also didn't show any significant memory problems or whatever. Basicaly it was as smooth as that's famous baby's butt!

 

I like the graphic design though I'm not sure if that's how you are gonna present your game or if it's just some dummy picture for testing purposes only.

 

My advice right now is, don't think about lags and fps drops, when you are developing the game phase when you are interested in such things comes at the end not at the beginning of the whole game creating process. One thing is that your computer is probably the only problem and not the game code. The other one is that before you have most of your game created (regarding at least all game core features) it's pointless to focus on optimization (of your game it self, of parts of your code).

(For example, latest wicher, from cd project, was first developed for pc and then they were porting it to consoles and at first when they finally were able to run the game it had only 4 fps and developers were happy about such a great result but said that they have to first finalize all of the game features before optimizing it.)

 

Well I hope I saved you some troubles. But now you should work on finishing your game logic, it's main features and create one level of your game with these so you can actually test functionality and have something to present your game with.

(Don't get stuck right now on minor things otherwise you will never finish your game ;-)).

 

By the way I still recommend using time-dependent time step (use that Math.min(step, hardStep) or something similar, where step is what you used to have in your code from that tutorial website and hardStep is what you have right now, this way you have more smooth frame transitions but you still keep your hardStep as a cap in case of lags or whatever happens), your game is running super smooth (at least for me) but when you add more features using hard time step makes the game choppy).

 

PS: If you are experiencing troubles with removing your post or content of your post with game code please contact moderator of this forum about this, they will surely help you. That way more people will probably tend to check your thread when you bring news ;-).

[mugg]

Alright.

 

I have a huge todo list so I think I'm somewhat well organised and I know what to do next, what functionality to add etc.

 

The graphics are placeholders. I want this to look like an SNES/GBA game, characters and everything should look pixelated more or less. The atmosphere should be medieval, at night (darkness), in the forest. The player - who is what I imagine to be a female cute knight/mercenary character - moves through a forest and maybe later also through caves and a castle and eventually reaches the last room where the dawn of the sun can be seen. That's very roughly what I imagined.

 

> I was still wondering how to add two mouse listeners to my canvas

 

 

 

I'm not really sure if I got it correct, but (in javascript) you can add more event listeners to one object

 

If I add mousemove and mousedown listeners, only the last one I declare will be registered. I really need both mousemove and mousedown for my game though. I'd be glad for a solution

 

Mousedown comes into play when:

- clicking on titlescreen and subscreen buttons

- clicking on item slots and weapon slot

- later: clicking on nearby items to pick them up

- later: clicking on the canvas to use the item/weapon that is selected

- later: clicking on the selected itemslot/weaponslot (i.e. clicking on the same item/weaponslot twice) to discard the item or weapon. In that case, the item/weapon will hover wherever your mouse cursor is and you can click on the canvas and the item/weapon will be thrown that direction

- later maybe: click on nearby NPCs to talk

 

Mousemove comes into play when:

- later: hovering over titlescreen or subscreen buttons to change their color

- later: for positioning the discarded item/weapon that I mentioned above.

[AzraelTycka]

Well I still don't see the problem, here (see the fiddle link below) is the example where I set four eventListeners for one div element and then there is a canvas element where I set up two eventListeners as you are trying to do, both works fine (though tracking mouse position in canvas needs to be done dfferently, I just hardcoded it because it was easier for this example).

Link to fiddle.

 

The second thing, right now this thread is going seriously off-topic considering which section it is in. I suggest removing posts about game code and advices about them to clear this thread up, so only your game presentation posts and peoples reactions to that are left here. For the code help I suggest you to create a new thread at coding section of this forum and there we and others can advice you in that way. (let's respect the rules of each section ;-)). If you can't adjust your posts (seriously, why can't you just edit your code post select all the text in that post and hit delete on your keyboard, I can edit any post I left here without any problems) contact forum administrator or moderator to help you out with this because it must be some forum malfunction :-).

Link to coding section (game logic and coding questions here) and link to StackExchange related to games (game logic questions here) and link to StackOverflow related to programming (coding questions here).

 

Otherwise looking forward to your updates here about your game, but seriously it needs to be cleaned up first and foremost ;-).

 

PS: add your game links directly into your first post so everyone can see it! Also adjust your first post to look like you are presenting your project, currently it's mroe a question about how to do some stuff, just delete parts about coding and so on and only leave stuff about your game, game progress, your plans, screens, ... (presentation!).

[mugg]

Well, yes, this topic was made as a programming inquiry more than a presentation of what I made. I didn't know better since I'm new here. I will tidy things up later this evening!

 

Ok, game presentation thread is this one. I remade the first post.

Programming thread is here: http://www.html5gamedevs.com/topic/11920-new-to-html5-game-development-advice-appreciated/

[mugg]

I updated the link from v7 to v8. (I think you need to delete cache/cookies if you played v7, otherwise v8 will have broken graphics).

 

- I made sloped ceiling tiles (not in the demo at the moment).

- Improved the wall collision checks; Graphics and wallboxes (those that were in v7, that I use for debugging purposes) are no longer displaced.

- Reduced character size from 50x50 to 40x40.

 

Things to fix or add next:

 

- I want to improve the way the character moves down a slope. Instead of entering falling status and landing rapidly over and over, character should keep walking and his y position should be adjusted according to where you are on the slope while walking down on it.

- Y velocity. Right now character jumps and falls at a constant speed, but I want him to move fast while starting jump/falling and slow while at the peak of a jump. The fall damage will not be dictated by falling frames anymore, but by the y speed.

- Pause screen, config screen, help screens

- Handling multiple loading zones in the same room

- ...

 

and only then, I will start adding items/objects/enemies, the things I've been hesitating to add (as it won't be easy for me...).

[mugg]

(EDIT: Oops, I meant to post this in the other topic. But oh well...)

 

About the canvas style width / style height properties: They get a value such as "800px". But I can't extract the 800 number from that easily. I have to use substring to get the number at every click I do.

If I apply a value to the style properties without "px" it doesn't seem to apply at all. The value would turn out 0 then.

 

This is what my current solution looks (not final, and not tested). Drawback is that style width isn't allowed to go past 999px. (fixed)

 

var style_to_canvas_width_ratio = canvas.style.width.substring(0,canvas.style.width.length-2)/canvas.width;
var style_to_canvas_height_ratio = canvas.style.height.substring(0,canvas.style.height.length-2)/canvas.height;


if (gamestate===2) {

if (y>390* style_to_canvas_height_ratio  )
{hero.selectedslot=-1;}

if (   x>460 * style_to_canvas_width_ratio
    && x<500 * style_to_canvas_width_ratio
    && y>400 * style_to_canvas_height_ratio
    && y<440 * style_to_canvas_height_ratio)

 

[AzraelTycka]

Hi,

 

I don't understand why did you create this problem for yourself?

If you change style width and height with javascript that means that you must have the number itself to enlarge the canvas. So why first enlarging canvas to a set value and then extracting that same value?

 

Example - no need to extract style.width/height in reverse order:

// initiationvar w = 300, h = 250;canvas.style.width = w + 'px';canvas.style.height = h + 'px';// want to enlarge the canvas:var newW = 500, newH = 500;canvas.style.width = newW + 'px';canvas.style.heigh = newH + 'px';// want to keep ratio?var ratio = w/h;var newWidth = 500;var newHeight = newWidth / ratio;// newHeight = Math.round(newWidth / ratio); // to avoid decimal digits you could even round it (or floor, or ceil)canvas.style.width = newWidth + 'px';canvas.style.heigh = newHeight + 'px';

Now you do have all the numbers in variables as numbers, therefore you don't need to do any string operation (except concatenation which was done as newWidth + 'px').

Or did I understand you problem in a wrong way?

Edited February 6, 2015 by AzraelTycka

[mugg]

Thank you.

The thing is I was worried about making my game responsive. I would want my canvas to fit to the browser screen and so the style values would change depending on the browser window's size, right?

 

I made my last post thinking it was the "coding" topic, oops. I guess whatever. I will just make a new "show off" topic once the game is more presentable. I do like how I present my game's development in the screenshots in the first post, though.

[AzraelTycka]

in that case you'll be probably using property of window object and that's innerWidth/Height, i.e.:

var w = window.innerWidth, h = window.innerHeight;

Just replace variables w, h declaration from my previous post with this line and you get what you want.

innerWidth/Height is a number not a string, therefore no px is inside these properties written. You can check it this way:

console.log(typeof window.innerWidth);

Just try changing size of your browser window and everytime you do it print out (console.log) the innerWidth.

Is this ok?

 

PS: Still no need to get style.width of canvas, if you want to change size of your canvas you have to change it with javascript, therefore you need to know the value before inserting it into the object.style.width/height property and with that you obviously don't need to get that value from style property (because you already know it).

 

EDIT:

Not sure if I understood, but no style won't be changed just because user changes the size of his window. If you set your cavnas.style.width to 300px then no matter what user does it will keep these 300px until you change it.

 

btw: When moving on slopes I can't jump until I reach the end of the slope, though when I stop on a slope I can jump, was that designated that way, or it's some kind of bug?

Edited February 6, 2015 by AzraelTycka

[mugg]

So, if user makes a window smaller, then window.innerWidth and window.innerHeight decrease? I would then change the style width and style height accordingly. I will look into this.

 

btw: When moving on slopes I can't jump until I reach the end of the slope, though when I stop on a slope I can jump, was that designated that way, or it's some kind of bug?

 

 

This is the intended behavior:

 

 

What other behavior did you expect? (if the above behavior is not happening in your case, please tell what version/link of the game and what browser you use and be detailed what your problem is)

You jump for as long as you hold the "up" key.

On steeper slopes such as in the image above, if you are considered inside the slope tile then you will be placed above it with the "standing" state so you would jump again (if you have been holding "up").

 

It will be an exercise in level design later to not use steep slopes.

[AzraelTycka]

I get the idea behind jump when it's during climbing but during descend it feels weird that you actually can't jump.

(I tried your latest one http://mugg1991.altervista.org/v8.html in latest Firefox)

 

Basically problem seems to be that your character doesn't even try to jump at highest speed, when I stop the climb half-way (ie where as in your picture) and then start moving I can actually jump during climbing and even during descend but if the character gets to maximum speed it just doesn't jump until it gets to the end of the slope.

(I was jumping hitting multiple times the up arrow key as well as holding it, not working either way ;-)).

 

EDIT:

 

Here you can see how they do resizing the window, you just need to add one more (or two depending on you needs) listeneres and do the resizing as mentioned above.

Edited February 7, 2015 by AzraelTycka

[mugg]

I get the idea behind jump when it's during climbing but during descend it feels weird that you actually can't jump.

(I tried your latest one http://mugg1991.altervista.org/v8.html in latest Firefox)

 

 

Ah. That's an outdated version. The latest one I upped is here http://mugg1991.altervista.org/v19/21.html

When descending a slope that's too steep, you will fall.

When the slope is flat enough the character will be fixed onto it (so it prevents the rapid back and forth between "falling" and "standing").

 

On another note, I think about stopping 2.5D because it is a lot of trouble. It's limiting in terms of designing the game. I'd really love to give all my rooms an individual feel..

2.5D has been preventing me from actually going on with the game (in terms of functionality, enemies and all that stuff I wanted to add to it) since I spend too much time on it..

[mugg]

How can I stretch a canvas or image to get a result like this?

 

[AzraelTycka]

If you are looking for html elements, it's called skew and it's possible with css transform - skew., for canvas related things there's also transform method which posseses skew parameter - see w3schools skew Test it for yourself. Otherwise I advice to develop your own function which does the same if your expectations are different. :-)

 

EDIT: Similar question on stackoverflow.

Edited February 12, 2015 by AzraelTycka