All geek questions in one place

Pixel-by-pixel animation with javascript

I am animating a sprite on a pixel grid. I have several options, with pros and cons for each. I have pretty much experience with javascript (six years), but I don't have this type of thing. The problem is that I don’t know how expensive each option will be.

The sprite should be rendering fairly quickly and be inexpensive enough to have at least five starts at the same time when the collision detection starts.

Ideally, I would like to use a grid of elements inside the shell, displaying color and alpha channels for each element from a multidimensional array. The main professional here is that I can run pixel-pixel collision detection and go through the transparent parts of the sprite. With any image-based sprite, the onClick event will fire even if I click on a transparent pixel (I will have to work hard to pass clicks through transparent pixels, and this can be quite expensive).

The next option is to use css sprites. css-tricks.com/css-sprites/ That would be easy peasy, but as mentioned earlier, onClicks would not go through the transparent pixels. I can probably force it, but then again, it can be expensive, and it will take a long time to implement.

Another option is animated gifs, but they are huge, limited in color and difficult to control animations. I would rather not go there.

And then there is the html5 canvas element that I don’t really know about, and would like to avoid, if at all possible. I don’t know how any of my code will work even with the canvas element, and I doubt that it will do what I want in the long run.

So what is better for performance? Will the first (and most preferred) viable option? Or am I missing something?

+4
source share
2 answers

With today's browsers, you'll be fine on desktop computers to create a sprite from positioned sub-elements of pixels (if they are not too complex or large), and to be safe, I would limit myself to 10 active sprites. With mobile things, it can turn out to be a little slow and awkward, but given that you seem to be developing a game that requires onclicks accuracy, I doubt it will be a problem.

Your most flexible bet is to use HTML5 Canvas, as you have already developed, but this will require a bit more JavaScript coding. But this system will allow you to apply a number of effects to your sprites and allow you to use perfect pixel detection using getImageData (which allows you to read the exact color of the pixel at any pixel offset).

If you want to avoid technical problems and problems with having a full-screen canvas system (which can be difficult), you can create as many smaller Canvas elements and move them as sprites (with the ease of HTML Elements) .. Then you just need to create the code that draws your animation frames, and also tells you if the mouse clicked or didn't hit the sprite using the above method (along with a click handler and some code to calculate where the user clicked in relation to the position of your canvas). Obviously, it would be better to do this in a generalized way so that your code can be applied to all your sprites :)

To draw your images on a canvas, you can use a sprite, as you said in your question, and use the rather flexible drawImage() method, which supports slicing mode. It just needs to be bound to the setInterval or requestAnimationFrame style game loop.


UPDATE - for those who want to be very optimal

If you want to choose a more optimal route that is a bit more involved, you can do the following. This method gives an advantage if you have many sprites that are the same with several (20 or 30) frames of animation:

  • Direct your sprites using regular DIVs with a sprite sheet with a background image in which you move the background position. This is the best option that you can save, except that static images are sprites, because the browser does all the work.
  • for each type of sprite, draw your sprite on a hidden canvas element that is large enough to include your entire sprite.
  • When the user clicks on one of your DIV sprites, take the background position in the form of coordinates, invert them, and then you should know where on your canvas element (search by type of sprites) the pixel data is stored.
  • Use the getPixelData method on your hidden canvas to work if the user clicked on the sprite or not.
  • The above means that you use only one canvas element - for each type of sprite, the browser processes all the graphics for you, and you get perfect pixel collisions with onclick.

Hope this makes sense?

+2
source

How about dividing your imagery into 30x30 cells and only have elements where the cell is opaque and leave a space where the cell is transparent so that clicks fail. You lose a little accuracy in where you can click cells.

0
source

Source: https://habr.com/ru/post/1442692/

More articles:


All Articles