My most basic movable blue square program slows down the longer the browser window is open.
I will paste my js code and a link to Drew Conley's code in a reply.
......
I made some optimizations like using push instead of unshift and calling from the end of the array instead of the beginning. I have integrated a delta in the game loop which I am still tweaking. Most basic setups for movement do not take in account remembering the second to last key you pressed and are still holding. Drew Conly posted a YT video of a basic 2D game working with the desired movement, but it uses the deprecated 'which' command, the updated e.key command broke Drew's code and I do not want to copy verbatim and plagiarize because I would like to the freedom to monetize what I build.
I came up with code myself, but the longer the game is running, the frame drops get pretty noticeable the longer the game stays open without refreshing. There are two key differences between my code and Drew's code. Drew has one switch statement while I have three switch statements. Drew's code for the movement is wrapped in a single constructor and called once during the update() function. That is what I will be working on changing about my code next and may have more to report later. If I can get that to work, I will probably try again to reduce my three switch statements down to only one
Later I will fixate my character to the center again and add back sprites and a map, but I want to get my basic movement system and game loop optimized before I go too far.
15 Replies
Drew Conley
CodePen
Top Down 2D Game Camera
Here's a method for creating a camera illusion for top down web games. This Pen covers arrow key movement and camera following. Video Tutorial here: h...
For key up, you only remove one item from the array, but key down repeatedly adds keys for the duration of the key press. The net effect is that the array keeps growing in size throughout the game.
to prevent multiple keydown events on a longer press, you can use
if (e.repeat) return;
I tried inserting a console.log(held_keys"); command in different places, but it kept only showing me one item in the array. I thought it was fixed, but I was sus that my array was ever growing though I couldn't see it.
Can one of you show me where to insert a simple console.log command in the current code to reveal this bug, so I can better troubleshoot myself next time?
What I find odd is that you are calling
requestAnimationFrame
inside draw
as well. You shouldn't need to do that and I suspect is probably responsible to some extend for the slow down.
Apparently he has a Discord server as well: https://discord.gg/umD2GRy Maybe is worth asking there directly there? Not that is not ok to ask here, but I'd assume people there are more familiar with game devAwesome, I always welcome more places from where I can ask for help and get advice.
I commented out the requestAnimationFrame(); function out from the draw function and it still works.
I have been going through so many revisions of this simple code just to see what works and what doesn't. There is nothing like continuously programming the same thing over and over from scratch until you become comfortable and it becomes ingrained in you.
I feel really good about the above replies stating that the array is continuously growing until the script crashes. I have made some other optimizations to the code and hopefully in a few min or later tonight, I will start trying to incorporate the part into my code.
I still would like to know the appropriate place to put my consolelog("held_keys"); to see the array ever growing, so I can become a better debugger.
Since you are updating the held_keys array on every game loop iteration I would just place that under the update function. It may be a bit too much information to spit to the console and despite what it may seem at first, logging output will definitely have negative performance impact, so make sure you delete this later.
or you can even use a simple setInterval for this one time.
But yeah, you are reading and writing the array multiple times per second so try to find a way to reduce that as it seems the bottleneck here.
Did you look at the link to the Codepen? What is so different in the way that he sets up his code??? He also uses an array to make sure it is recorded if a key is still being pressed, so that the directions seem more fluid. Adding the did prevent some slow downs.
It is running better for longer, but I am still getting some slow downs. Here is my updated script.js by the way.
I will also see about adding back that one part of the code back to the update(); function. I did have it there in a previous version of code, but it was before I made other changes, so it will be good to try that again.
Should I include the entire character movement function inside the update function or can I get away with just moving over the 'if' statement that is constantly being looped to update the character's movement?
So I moved the if statement for movement that is looped from the character movement function from characterMovement to the update function. So far the slow down doesn't happen unless I am holding down more than one direction for five to ten seconds. The game does not recover until the page is refreshed, but overall performance has improved a little.
If I mvoed all of the character movement under the update function, would it get messy in the code if I programmed NPC's and other things that move all under the same update code?
I guess I am attempting to separate all functions that update in different categories like Character, NPC's Game Events etc the same what I separate all of that in different classes in the Java language as a way to keep the code cleaner
Is that the wrong way to think about it in Javascript even though it would technially be right if I were programming Java?
That's just OOP and makes perfect sense in any language, Java is just more oriented towards that while JS is meant to be more flexible in that regard. I would very much encourage you to use this approach for games though, at least until you reach a certain size which is where you might benefit from some optimization techniques like Object Pools or ECS design.
Not sure what the difference is, could you upload your code to codepen as well? Maybe there's something you are not showing here that is responsible for the slow down.
I showed all of my js code and my html and css are just bare basic.
I am so glad I posted my code here. I had a virus attack yesterday and after doing a windows repair and opting to keep personal files, my jscode was missing out of all my backup folders.
Here it is all loaded up.
https://codepen.io/bluestreak711/pen/QWYEVLo
You are creating the event listeners on every frame, inside character movement function.
You only need to ever declare those once, maybe at the start of the file.
The
e.repeat
trick probably prevents them from firing all at once but that must be the issue for sure.I commented out the characterMovement tags and commented out the character movement function and everything seems to be working much better!!!! I am going to do some testing on it for a while.
If it works, I am going to try to move all of the character related code to player.js for organization. I will wrap only the code, that is currently located in the update function, in the characterMovement function, so I can call that code inside of the update function from player.js. I plan to put the active listerners inside the player.js file also, but not in a loop.
I will do some testing and report back in a little bit. If this solves me problem, do I mark this problem as solved and create a new post if I have an entirely different problem with the code?
Now if I do wrap just the portion of the code I want to loop in a characterMovement function and just call characterMovement inside of the update function, do I still need to pass delta through the characterMovement function or should that be left out since I am already passing delta through the update function?
If it works, I am going to try to move all of the character related code to player.js for organization.That would be ideal, break things down into units of logic. This alone will make it much easier to spot this type of errors and help you add new features.
do I still need to pass delta through the characterMovement functionAre you actually using delta inside of character movement though? But yes, update should receive the delta and then use that inside Player wherever you need to. And yes, if there are no more issues with performance please tag this as solved and open a new thread π
It is marked solved and I updated my code in code pen if anybody is interested. I even overlayed a fps meter over the canvas.