There are a few things you need to understand about canvas. Think of it in realistic terms. You have canvas that you paint on. Lets go all
Bob Ross with this.
You paint a nice backdrop (your static background) on your canvas and then you paint a bird (an entity). Then you think... I want that bird to fly. Well you've already painted the bird covering the part of the backdrop so moving it you have to repaint what use to be there. You achieve this with canvas by redrawing the background every frame and then draw your entities.. thus creating the animation you are looking for. The only way you could "draw once" is if you never draw on top of something moving on top of it.
By default Impact clears the canvas by drawing black every frame. This wipes out everything that use to be there. You can change this by altering
.clearColor. Setting it to
null would let you draw a background image and actually be able to see if after the clear.
init() will only be called once... when the game is initiated. It&
039;s a good place to set settings, load the first level, spawn entities, bind keys, etc. etc. Anything that is drawn here will get covered by the #update() and
draw() which run every single frame.
Calling
this.parent() calls the method of the super class. In other words if you are specifying a
draw() method to do your own draws you are replacing Impact&
039;s own #draw() method . Calling
this.parent() within your
draw() method returns back to impact&
039;s method and runs it like normal allowing the engine to do what it needs to do. Generally speaking you will always call #this.parent() unless you really want to suppress the default actions of impact for that method.
When talking about entities and when they do their thing it&
039;s once again all about the #update() and
draw() methods. Update is when an entity does all its collision checks, movement, etc. etc. Draw is when an entity actually draws it&
039;s animation sheet. So when you call #this.parent() in the draw and update methods this is when Impact will do those things for the entities.
Remember that drawing on canvas is all about the order in which you do it. So to put it all together to get it to look correct every frame you need to:
For
draw():
1) Draw your background image. If this is a static image make sure you set
this.clearColor = null in your game&
039;s #init().
2) Let your entities draw. Call
this.parent() to let Impact draw the entities.
3) Draw your menu image or whatever else you want on top of the entities.
You pretty much had it correct. You are missing the tweak to
.clearColor to get your background to show and maybe a bit of a draw order issue but easily to fix that also.
I hope the helps clear up some confusion you had about how things work. It's not an easy thing to explain.
