1 decade ago by lTyl
I'm sure a lot of you played a game where if you equipped a certain item on your character, you will then see a visual change in the appearance of said character. Such as equipping chainmail armor and then have your characters appearance change to show the new piece of equipment. I wanted to take a shot at doing the same thing for Impact.
Live Demos:
Visual Equipment
Visual Equipment Test
Animation (W/A/S/D to move)
NOTICE
I just want to say that this is a proof of concept, and it is not game ready. The Animation in particular was really hacked together, and the entire thing is sloppy. There are also quite a few bugs, mainly to do with scaling and drawing the image flipped. I am going to re-write it in the future using the same method, but have the whole thing be much more intuitive to use.
Method
How it works is we create a bunch of layers which represent the different kind of visual changes we want our character to have. Then we render each layer onto an off screen canvas element. The reason why we do this is to significantly cut down on our draw calls to the visible screen, and allows us to have virtually an unlimited amount of layers for a single visible draw call. Then when our image is rendered in memory, we simply draw the final image onto the visible canvas.
For animation, it is quite sloppy and unintuitive, but the idea is you add animations the exact same way as if you were using AnimationSheet, but the only real change is you define the layers you want your animation to affect and then the renderer draws your image using the index supplied in your animation, and replaces the spriteIndex for that layer. The initial idea was good, but my implementation sort of fell on its face...
Usage
1.) Make sure you require 'plugins.visual-equipment' in your entity.
2.) Create instance of VisualEquipment
3.) Set the VisualEquipment render mode (
4.) Add your draw layers:
5.) Add your animations, if applicable:
6.) Add this.visualEquipment.update() to your update() method.
7.) Add this.visualEquipment.draw(this.pos.x, this.pos.y) to your draw() method.
8.) For setting the current animation, use:
Code
Github
Live Demos:
Visual Equipment
Visual Equipment Test
Animation (W/A/S/D to move)
NOTICE
I just want to say that this is a proof of concept, and it is not game ready. The Animation in particular was really hacked together, and the entire thing is sloppy. There are also quite a few bugs, mainly to do with scaling and drawing the image flipped. I am going to re-write it in the future using the same method, but have the whole thing be much more intuitive to use.
Method
How it works is we create a bunch of layers which represent the different kind of visual changes we want our character to have. Then we render each layer onto an off screen canvas element. The reason why we do this is to significantly cut down on our draw calls to the visible screen, and allows us to have virtually an unlimited amount of layers for a single visible draw call. Then when our image is rendered in memory, we simply draw the final image onto the visible canvas.
For animation, it is quite sloppy and unintuitive, but the idea is you add animations the exact same way as if you were using AnimationSheet, but the only real change is you define the layers you want your animation to affect and then the renderer draws your image using the index supplied in your animation, and replaces the spriteIndex for that layer. The initial idea was good, but my implementation sort of fell on its face...
Usage
1.) Make sure you require 'plugins.visual-equipment' in your entity.
2.) Create instance of VisualEquipment
3.) Set the VisualEquipment render mode (
this.visualEquipment.renderMode = "PRE-RENDER" or "REAL_TIME" )4.) Add your draw layers:
this.visualEquipment.addLayer(<path/to/spritesheet>, <index of sprite in_ heet>, <width of sprite frame>, <height of sprite>)
5.) Add your animations, if applicable:
this.visualEquipment.addAnim(<name>, <animation Delay>, <array Holding index Values>, <amount OfTimes To Cycle Animation>);
6.) Add this.visualEquipment.update() to your update() method.
7.) Add this.visualEquipment.draw(this.pos.x, this.pos.y) to your draw() method.
8.) For setting the current animation, use:
this.visualEquipment.currentAnimation = this.visualEquipment.animations.<animationName>Code
Github