New to HTML5 game development, advice appreciated

[mugg]

Hi,

 

a few days ago I made this topic, to ask questions about how to fix a lag problem in my game

www.html5gamedevs.com/topic/11857-wip-platforming-game-im-new-to-html5-games-advice-appreciated/?p=68432

 

I was asked to change the topic to present my game more, and for programming inquiries I should visit this section so here I am.

 

The questions I discussed already in the above topic:

- How do I add two mouse event listeners to a canvas: I thought this was not possible since mousemove overrides mousedown but AzraelTycka made a fiddle here: http://www.html5gamedevs.com/topic/11857-wip-platforming-game-im-new-to-html5-games-advice-appreciated/?p=68647 I have yet to study it.

- When the browser lags, my game used to break (character jumped twice as high since the update() function was fed a too big delta time. I now rewrote that part and made sure at least about 18 milliseconds pass before a new frame is rendered, and the update() function is fed 0.7 constantly. I want this to be a game as robust as possible. I was then told the lag issues may be on my end and my game actually runs completely smooth, so I'm not going to focus on fixing the lag problem right now.

 

I would be glad if people could look over my code - since I'm a beginner and all - and point out what I could do better.

 

Is there a good way to load audiofiles? Is it done the same way as loading images?

 

Please don't pay too much attention to the commented notes in my code - I didn't think others would ever get to read those.. Also, a link to the game: http://mugg1991.altervista.org/v7.html

[mugg]

Long [ code ] paste bug strikes again... So I can't edit first post anymore.

 

Wanted to add this question:

I said I didn't want to focus on the lag problem for now but, would halving the framerate and making character move twice the distance (to compensate) improve my game's performance? Would it be a reasonable thing to do? Or is the loss of FPS considered a bad thing? Would love to read some info about FPS and performance in HTML5 games.

[ericjbasti]

Hi @mugg

 

Perhaps you should post that code as jsfiddle or something? That would make it easier for people to read and give feedback.

 

About your question.

 

MouseMove and MouseDown: MouseMove doesn't override MouseDown. The act of clicking the mouse button fires an onmousedown event the act of moving the mouse fires an onmousemove event. You can very easily move the mouse and click and have both events fire, where you're most liking seeing an issue is with holding the mouse down and say dragging. The way around this is to set a variable that contains the mousedown status, and only change it to true when the mousedown event fires and set it to false when the mouseup event fires. This way the events of a drag or something similar will fire as such...

 

mousedown (down=true) -> move-> move-> move-> move-> mouseup (down=false).

[mugg]

Thanks ericjbasti.

 

Currenlty these are my remaining questions:

 

- How should I manage sound effects? How do I load them?

- Does halving the framerate (from 60 to 30) improve performance in general? Or does it not?

- How do I give an image (.png) that I draw on the canvas a color overlay? (e.g. a character who took damage and is blinking red)

[ericjbasti]

For audio you don't want to deal with all the browser support headaches. Use howler.js http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library

 

A lot of things can be done to improve performance. Halving the fps should be one of the last thing you try (unless you know 30fps is good enough). Just looking at the code you provided I see things like Date.now being called multiple times. That shouldn't be happening, its an expensive task. Do it once per frame, store the value use the stored valued when needed.

 

In standard Canvas you can't easily tint the character. You should probably provide an alternate image with the color effect applied. 

 

But really you should get the basics down first before you start worrying about special effects like color overlays. 

 

You also might be better suited with a framework like Phaser. There are a lot of little things you can either learn for yourself, or you can use the expertise of someone like Rich to your advantage.

[mugg]

I want to try to tint my character regardless of the trouble involved. I came across this page https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

 

Before, I drew everything on a main canvas.

 

Now, I still draw everything on main canvas but I draw the character on a separate canvas called "herobuffer.

I got it to work after some frustration

Here is part of my code:

        herobufferctx.clearRect(0,0,herobuffer.width,herobuffer.height);    // clear HEROBUFFER             herobufferctx.drawImage(charTemplate, 0, 280, 40, 40,     0, 0,   40,40); // draw charactersprite on HEROBUFFER         herobufferctx.globalCompositeOperation="source-in";    // set HEROBUFFER globalCompositeOperation to source-in         herobufferctx.fillStyle="red";        herobufferctx.fillRect(0,0,herobuffer.width,herobuffer.height);   // draw rectangle on HEROBUFFER         herobufferctx.globalCompositeOperation="source-over";   // set HEROBUFFER globalCompositeOperation to source-over         ctx.drawImage(herobuffer,hero.x-hero.hitboxSize-xscrolled, hero.y-hero.hitboxSize*2-yscrolled);    // draw HEROBUFFER on the main canvas (called ctx which is the main canvas' context)              

[mugg]

Hey, I have a new question.

I rewrote some code.

 

This

  //WaterFrame 1var Water1Ready = false;var Water1Img = new Image();Water1Img.onload = function () {    Water1Ready = true;};Water1Img.src = "img/liquid/water1.png";  //WaterFrame 2var Water2Ready = false;var Water2Img = new Image();Water2Img.onload = function () {    Water2Ready = true;};Water2Img.src = "img/liquid/water2.png";  //WaterFrame 3var Water3Ready = false;var Water3Img = new Image();Water3Img.onload = function () {    Water3Ready = true;};Water3Img.src = "img/liquid/water3.png";  //WaterFrame 4var Water4Ready = false;var Water4Img = new Image();Water4Img.onload = function () {    Water4Ready = true;};Water4Img.src = "img/liquid/water4.png";

became:

    var WaterImages = {    WaterReady : [false, false, false, false],    WaterImg : [new Image(), new Image(), new Image(), new Image()]    };    WaterImages.WaterImg[0].src = "img/liquid/water1.png";    WaterImages.WaterImg[1].src = "img/liquid/water2.png";    WaterImages.WaterImg[2].src = "img/liquid/water3.png";    WaterImages.WaterImg[3].src = "img/liquid/water4.png";    for (var i=0; i < WaterImages.WaterImg.length ; i++) {        WaterImages.WaterImg[i].onload = function () {        WaterImages.WaterReady[i] = true;        };    } 

I know the way the code is in the 2nd block is very improvable, but anyway...

the problem is still that the new Ready booleans never turn from false to true. Where is the error in my code?

[ericjbasti]

The variable 'i' keeps changing and doesn't stop changing until it gets to 4. At that point every onload function is setting WaterImages.WaterReady[4] = true;

 

You need a better way to handle this. I would typically create a wrapper class for an image. This would store all extra bits of information such as .ready and have a reference to the image object its wrapping. However thats really not required. You can do it like this:

var WaterImages = { // I removed your WaterReady array its not needed    WaterImg : [new Image(), new Image(), new Image(), new Image()]};WaterImages.WaterImg[0].src = "img/liquid/water1.png";WaterImages.WaterImg[1].src = "img/liquid/water2.png";WaterImages.WaterImg[2].src = "img/liquid/water3.png";WaterImages.WaterImg[3].src = "img/liquid/water4.png";    for (var i=0; i < WaterImages.WaterImg.length ; i++) {	WaterImages.WaterImg[i].ready = false;         // We can modify the image object to contain a property of .ready        // we set it to false.	WaterImages.WaterImg[i].onload = function () {	     this.ready = true;             // since I'm the onload function for my image             // I can set the property of .ready to true             // and any check to my .ready will return true;	};}// you can check if the .ready is set by checking it as such (change # to the index your checking)// WaterImages.WaterImg[#].ready; 

[mugg]

Thank you.

 

To be honest with you, I resorted to just putting all frames on one sheet again, just like I did with my character sheet. And I think I will do the same with all items and enemies too, later.

 

I faced some other problems that are related to how the game looks. I'm not satisfied because my game looks too simple and designing a 1400x900 png for each room is something that I would rather want to avoid and I want to use smaller images (like layers for walls). That got me thinking that I want to try to make my game into 2.5D. "2.5D" is something I've seen on this forum too and after little research I think I might be capable of coding it.

 

I would be glad for advice on that.

 

Please tell me if this concept is doable and correct the way I imagine it. The image shows how I imagine 2.5D can be achieved, please tell me if it's correct:

 

 

 

 

Right now, leftwalls/rightwalls/grounds/ceilings/leftslopes/rightslopes/ceilingleftslopes/ceilingrightslopes are all the wall tiles that I draw on the canvas individiually and I run checks for each of them individually. The problem is I have to draw these tiles inside of each other (to prevent player from entering ground tile from below for example). I fear that will mess up my 2.5D plans so I have to think of something new:

 

Either I define a new wall object where one such wall object is made up my a ground object on the top, leftwall and sidewall on the respective sides and a ceiling at the bottom - and then I draw 2.5D rectangles according to one such wall object.

 

Or I re-code ceiling/leftwall/rightwall/ground... But I don't want to make this text overly long. Just wanted to say I have this plan right now and I will look into it. Advice appreciated!

 

I made this little concept image

 

 

 

Later on I could add a shadow for the player. Heh, so much stuff on todo list but only little time. The good thing is I don't work against a deadline so I could work on this however and how often I want. When I'm done I will be truly happy and I can claim I did this project all by myself pretty much. That's something nice to aim for imo.

[ericjbasti]

You should probably start a new topic on 2.5d I know plenty of people here have done this before, but I think the length of the first post would cause people to just skip this post entirely. 

 

Honestly the 2.5d your describing is little more than a graphical treatment. Which I think you would be best served doing before hand (pre-rendered/skewed). Otherwise you're looking at performing matrix transforms just to draw a slanted ground tile. Canvas doesn't have an easy way of doing this, so you have to perform the matrix math yourself and then apply it through a transform (more work than its worth). To top that all off, doing the transform live will be very CPU intensive.

[mugg]

I might make a new topic later; for now I want to keep info in here.

 

http://mugg1991.altervista.org/v15/v15_25dtry.html

(there are invisible slope tiles but I think you will manage to wander around the level with little effort)

 

So, I ran into some headaches with my plan. I think 2.5d would be very well possible but not as easily done as I imagined.

The really hard part for me is to give the impression of a "vanishing point".

 

 

Red outline box is the same as the pink colored path in the image in my previous post.

The foreground wallbox is what was depicted brown in my previous image.

 

Another image for better understanding:

 

 

When you use firebug, in the script at line 1870, wallboxbuffer x and y position is declared there. You can change size where it says wallboxbuffer.width a few lines later.
 Maybe someone with more crazy brain cells than me will look into this haha.

 

 

I start to think this is too much trouble right now and I should look at other todo's first. Those lava and water tiles are drawn on an extra canvas every frame and then that extra canvas is drawn on the main canvas. I should put up some kind of init() thing that draws the extra canvas' once and then it's done for good (after all, liquid tiles never change size later).

 

 

-------

 

Question:

 

I have this code that I want to shorten by putting another for loop. But for some reason my game would bring up the error "TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.".

 

It seems drawImage can not take variables as parameters (e.g. I put a for loop with the variable p and place p as drawImage's 2nd parameters, does not seem to work). Is this a known thing?

 

 

                      for (var a=0; a < liquidbuffer.width/128 ; a++) {                                                         for (var b=0; b < liquidbuffer.height/128 ; b++) {                                                                 lbctx.drawImage(LiquidTemplate,  0,0,   128,128,   a*128,b*128,   128,128);                                                                lbctx.strokeRect(0,0,liquidbuffer.width,liquidbuffer.height);                                                                        liquidimages.push(cloneCanvas(liquidbuffer));                                    }                                          }                                        for (var a=0; a < liquidbuffer.width/128 ; a++) {                                                         for (var b=0; b < liquidbuffer.height/128 ; b++) {                                                                 lbctx.drawImage(LiquidTemplate,  128,0,   128,128,   a*128,b*128,   128,128);                                                                lbctx.strokeRect(0,0,liquidbuffer.width,liquidbuffer.height);                                                                                            liquidimages.push(cloneCanvas(liquidbuffer));                                                     }                                      }                                     for (var a=0; a < liquidbuffer.width/128 ; a++) {                                                         for (var b=0; b < liquidbuffer.height/128 ; b++) {                                                                 lbctx.drawImage(LiquidTemplate,  256,0,   128,128,   a*128,b*128,   128,128);                                                                lbctx.strokeRect(0,0,liquidbuffer.width,liquidbuffer.height);                                                                                liquidimages.push(cloneCanvas(liquidbuffer));                                                     }                                    }                                                 for (var a=0; a < liquidbuffer.width/128 ; a++) {                                                         for (var b=0; b < liquidbuffer.height/128 ; b++) {                                                                 lbctx.drawImage(LiquidTemplate,  384,0,   128,128,   a*128,b*128,   128,128);                                                                lbctx.strokeRect(0,0,liquidbuffer.width,liquidbuffer.height);                                                                liquidimages.push(cloneCanvas(liquidbuffer));                                                     }                                         }

[ericjbasti]

You can definitely use variables as parameters...

http://jsfiddle.net/06143ags/1/

 

make sure your not trying to clip outside of the image bounds. I've never gotten an error like yours but I have received errors for bound issues.

 

Your 2.5d actually looks more like 3d with a static front facing camera. Thats going to be very tricky using standard canvas. You will actually need to do something similar to my fiddle, and cut up the texture into multiple slices and scale those based on depth to get the effect you're looking for.

[ericjbasti]

An example of how you can slice to get the perspective. 

http://jsfiddle.net/06143ags/2/

[mugg]

I saw the problem with my approach. I was trying to directly resize the "closer" wallbox without any backed up math...

This time, I draw line from vanishing point onto the wallbox so I have the backed up math I was looking for. Here is what it looks like

 

 

I'm using polygons instead of images. Coding the stretching of images would be difficult and probably would turn out to be a waste of time (since performance suffers as you said).

 

Here is the code that renders this (although variable names may be misleading and it's unfinished. I will continue working on it)

http://pastebin.com/6Xat8f80

 

-------

 

Question unrelated to the above:

When I change my canvas' size with CSS, my function that checks whether I clicked on certain area (such as on the item slots in the bottom right) doesn't work anymore. The area is displaced. What can I do to ensure that the "click check areas" will be stretched along with CSS?

[AzraelTycka]

Not sure if it's related, but in function getClickPosition, you have a lot of hardcoded positions which is prone to changing overall size and also prone to opening in different browsers. Basically changing canvas size moves your item slots to different locations then you function has hardcoded in.

 

Well, not really sure if I got the question correctly on my side though :-).

 

Can you specify it a little bit more, 'The area is displaced' what exactly you mean, can you show and image of the problematic situation?

 

EDIT:

 

Almost forgot, after checking your code I realized then you are using for/in loop to go over an object. Not that it's not correct but you can get into quite a messy situations if you do it without any checks. I recommend going with at least something as:

for (var property in object) {  if (object.hasOwnProperty(property) {    // do your logic here  }}

or other variant, whatever suits you better, this is at least for the future reference, pure for/in loop on an object leads very often to unnecessary/almost evil results/errors.

 

Last advice, use tools as http://jshint.com/, really great tool which helps you to check you your code in some way and gives useful advice every here and there, since with js almost dosn't show any errors it's nice to have any tools which help you to conserve some of your energy ;-).

Edited February 4, 2015 by AzraelTycka

[mugg]

My canvas' size is 700 width, 450 height.

I tried fixing my hardcoded area from if (y > 400) to if (y > 400/canvas.height) (this is only an example).

 

But it didn't fix the problem at all, so I think an element's style width and style height is a completely different property from its actual width and height. How do I address an element's CSS properties? Is it canvas.style.width and canvas.style.height?

 

I did not understand how you want to change my for-loops. I'm basicly checking if I'm within bounds* of the coordinates of an object and if so, I apply my logic then.

 

----------

* more specifically, if a point of me is within bounds.

If my top center point is inside a wall, I'm put below the wall.

If my left center point is inside a wall, I'm put to the right of the wall. etc.

------

 

I'm done with leftslopes:

 

 

But I understand what you mean with conserving my energy. This project has been taking a lot of time so far. I'm thinking about ditching sloped ceiling tiles to save some time..

[AzraelTycka]

At first to width/height properties. canvas.width and canvas.height are different from canvas.style.width and canvas.style.height, but they are related to each other in a way. Basically style width tell your elements properties in accordance to the screen (that means it's a regular width and height as you can add to any other element of your website with css).

Then what is canvas width/height? Firstly, example situation:

canvas.width = 300;canvas.height = 150;canvas.style.width = '500px';canvas.style.height = '500px';

(One thing to notice, canvas.width/height doesn't have a unit.)

 

Explanation of the code above: if canvas.style.width/height were your monitor's (LCD, plasma or whatever monitor you use) actual width and height (physical width and height) then canvas.width/height would be resolution of your screen which you can set in windows (or whatever OS you use).

 

You can see how this behaves with this fiddle I set up for you (check the console too).

 

Secondly: I was talking only about object for/in loop not about for loops in general. Your function printObject(o) has for/in loop which doesn't do any checks, therefore prints out each of its object properties but it also prints out properties of the object's prototype if you set some for it. Example from MDN in fiddle for you to see the difference between two loops (one with hasOwnProperty check, the other one without it).

 

Lastly, Conserving energy was meant with jshint tool, where you just need to copy your whole javascript code in and jshint will point out errors in your code, syntax problems, and so on. Browsers does almost nothign to tell you where is the problem with your javascript code.

[mugg]

Thanks for your advice! I will be playing around with the width and height properties and hopefully work out a solution.

 

About printObjects(), it's a function I quickly googled so I can print out all keys I'm currently pressing: printObject(keysDown)

I don't use this function anywhere else and it does exactly what I want. I'll acknowledge your concerns in the future should I stumble upon a related problem.

 

I'm using NetBeans for coding which points out errors for me. I pasted my code in the jshint page and saw a pile of errors, I'll go over it sometime. Thanks

[mugg]

Here is a new link http://mugg1991.altervista.org/v19/21.html

I'm a little worried that I might use too many canvas' or too many drawImage commands in one frame.

 

I use a seperate 700x450 canvas for

* wall tiles

* ground tiles

* special ground tiles (such as icegrounds)

* sidewalls -- this, ground tiles and wall tiles is unavoidable because otherwise those tiles will overlap each other when they shouldn't.

* background

 

I will use more 700x450 canvas' for foregrounds and a "closer" background. I will also add one for fog and for darkness.

 

I'm a bit disappointed at the iceground graphical effect I made. I want to make it look more believable. I'm going to add animations such as

* sparkling stars for icegrounds

* lava bubbles for liquid:lava tiles

 

I also want to add "room animations" such as lightning bolts that cause whole stage to become white/black. Like here

 

Other than that, I will add animations that will be triggered when certain condition is met. Such as a splash effect when I enter water. Or smoke when I enter lava. Or dirt cloud when I walk. I have many such plans but I'm worried I will cross the line and my game becomes laggy.

 

How can I stack multiple canvas'? I'm thinking I could improve performance if I only redraw certain canvas' when screen scrolls (i.e. when variables xscrolled or yscrolled change. The fact that I stack multiple canvas' instead of drawing them on main canvas should also improve performance a little, right?

[AzraelTycka]

You certainly benefit from using multiple canvas elements in certain games. Though you might be surprised that there are cases when you lose performance too :-).

(I read then you are using separate canvas for preloading images and so on, that doesn't necessarily lead to performance gain too, if used incorrectly you'll actually experience performance drop - there is some nice post about canvas performance here adn you can find a lot by googling it ;-)).

 

You need to use it wisely. As you mentioned, performance gain can be obtained from not using canvas too much. Obviously moving elements (main character, enemies, ...) need to be redrawn every loop step but usually there is not such a need for backgrounds and so on. Multiple canvases benefit from such smart rendering. You can improve your performance quite a bit with even smarter rendering when you not only assign different canvases to render different parts of your scene based on time they need to be redrawn but also by only rendering what is changing in the scene.

Example: I said main character and enemies need to be redrawn every loop cycle but it's not true you only need to redra them if they moved and if they did you don't need to redraw the whole scene (designated canvas) but only the rectangle where the enemy used to be and the rectangle where it should be in the next loop step.

 

Hopefully others will add more information.

 

I will just repeat what I already told you a few times, performance is your last thing to worry about right now. First get everything else working and then you can start looking for bottle-necks and so on (do it the other way around and you will be losing so much energy for nothing).

[mugg]

I will just repeat what I already told you a few times, performance is your last thing to worry about right now. First get everything else working and then you can start looking for bottle-necks and so on (do it the other way around and you will be losing so much energy for nothing).

 

 

If I don't care about performance early, with a project this big (2700 lines and I expect to get to over 6000) I want a really organised and cleanly written code. So forgive me but I wish to improve performance when I can. I started by displaying the game on 4 canvas layers now instead of just 1 and I do get pure 61 FPS now rather than the 30~55 that I had before.

 

Layer 1's purpose is background.

2 is level tiles and player.

3 is not used yet but will be for foreground tiles so player will be hidden behind them.

4 is for the hud (lifebar, timer, fps, item display, weapon display)

 

My question this time:

Is there a limit to the amount of canvases I can use? In other words, does performance suffer if I add more layers? I'm thinking about giving the player/enemies/objects their own layer (3.1) and I wish to add a layer that's dedicated to fog and darkness (3.2).

 

(I want to get rid of the string comparisons such as if (hero.insideliquid==="lava") and instead use numbers. And I should round player's x and y because it was said graphics get drawn at subpixel positions.. I went through a few pages that detailed on tips how to improve performance and I'd like to make some adjustments to my code.

 

Then I want to make rightslopes and sloped ceilings into 2.5D and add some more "special ground tiles" such as muddy grounds and planked grounds... Since I started this project I noticed my todo list gets longer and longer and I find myself starting on one thing but never really finishing it before I start the next thing, hence why rightslopes haven't been made into 2.5D yet.. I hope to keep working on my project as time permits. It's been one month since I started and I hope to have gotten somewhere really good once another month has passed)

[AzraelTycka]

Hello,

 

some questions are easily to come up with an answer on your own. If you are interested in maximum limit of canvas elements, just set a loop an keep creating new canvas elements until browsers gives you an exception (you will find out they you'll might run out of memory earlier than reachign the maximum canvas elements amount).

If you are interested in what is faster (one canvas or multiple) then you can again set up a simple test to see for yourself (use jsperf, chrom tools, firebug or whatever utilities you are using to see the difference). Simple test of one vs five canvases (when all canvases fill the canvas with rectangle everytime) should give obvious result (one canvas is faster than five canvases - it's logical). Layered canvases are used to save time because you need to render on each canvas at different times thus it saves computational time. But increasing number of canvases increses memory use, thus multiple canvas elements are more heavy for memory. Nice article about that here.

 

Briefly: I wouldn't be afraid of adding two more canvases, you still don't have a better way of doing it so go for it, if you will encounter significant performance drop either try merging some layers or removing some of them if you won't find any other bottlenecks.

 

PS: I think we didn't quite understood each other about performance adjustments, I'm not saying go for anything and then do it better, just keep yourself in check so you don't dwell on it for too long - because it won't bring such a huge benefit either way ;-).

[ericjbasti]

The biggest bottleneck with the Canvas 2d-context is drawing. You will be better served using multiple canvas object as either a layer or a cache to group your draw calls. Typically you would sort items by how much they change, so things like the background go together and are rendered to a canvas/cache that only changes when it needs to. The player is in the group of always changing sprites and the overlay text and gui are in another that rarely changes. If you plan for this early on you'll run into fewer issues later.

[mugg]

Thanks for all your advice, once again. I have gone and made the game back into pure 2D (since 2.5D was too difficult to maintain and I'm not experienced enough to work with it).

 

Now I have this question:

 

Suppose I have an array with functions in them. How can I check what those functions are named?

Using if (array === test()) would cause the test() function to be executed rather than be compared against, I'm thinking.

And typeof comparison would only tell me it is a function but not tell me which one.

 

I ran into this problem because I decided to give my player an ailments array in which states like burned, poisoned, slowed etc. are stored. I stored the functions to be executed directly in that array. Any ailment would last until its timer runs out. But if the ailment is re-applied before the timer runs out, I would end up with two of the same ailment so I would need to check if that ailment is already in the array. I could not figure out a way to write that check, hence my question above. Such ailments would also be applied to enemies when I add them (which I hopefully will get to in my lifetime).

 

In the meantime, I did not make such huge progress, I've been busy with other things. But I did make some optimizations (there are 4 canvases stacked on each other now, for background, level, player/enemies/items, hud/timer/lives/healthbar. I made an effort to redraw stuff only when necessary or only every 2~4th frame. And I use number comparison instead of string comparison in many if not all places now. I still experience some occasional frame dropping here and there though.)

 

I tidied up the player spritesheet.

 

I'm also adding animated backgrounds now. I used to think I could just create 4 images of a room that contain the level tiles, scenery and liquid tiles but it causes massive lag when I draw these big images. The for loops that go through all the individual wall tiles, scenery tiles and liquid tiles are faster unexpectedly.

 

I don't know about the concept of caching and when I can use it, I would appreciate more insight in that.

 

I'm going to end up needing a graphic artist..

 

Next time I post I hope to provide a new link to the game-in-progress. Thanks!

 

EDIT:

 

 'nother question: Is there a "best" image format to use? Does compressing images to a low filesize help performance?

[AzraelTycka]

Can you please show an example of array with functions in it so it's clear what you are asking about?

(short code, no need for you game code which brings unrelated stuff in, just simple example with one array and two functions which can do something like just adding two numbers)