Couple basic questions

[Fovi]

Hi, I made socket-server in C# and now i working on client. But I'm new to whole HTML5 graphic idea and i do not quite understand couple standards.

1. Sprites animation: Is there an function to animate sprite (if so, how could i use it) ? Or do i need to make that function myself. ( If so, what is the best way ? Is that just function that will change sprite texture every couple frames ? )
2. Tile-map view: I found out that pixi still renders tiles that are not in point of view. Meaning that i have to check it myself. I found couple people saying that best way is to change visibility of tile, but is that enough ? What if there is gonna be 90k of tiles that are hidden, will it affect speed ? Isn't it better to remove them totally ?
3. Tile-map construction: Is tile-map just and X sprites next to each other ? Em i understand it correctly ? (meaning everything in game is just sprites with texture on it)
4. Collisions: Is pixi have some build-in function for collisions ?

I would be thankful for easy to understand explanation, like i mentioned i new in graphic world.

[Exca]

1. You can use animatedSprite. https://pixijs.github.io/examples/#/basics/spritesheet.js

2. If you want to do culling then you can use object.renderable = false; and keep the visibility on. That way the transforms are updated still and you can calculate if the object should be visible. There's a library specially for tilemaps. It can be found here https://github.com/pixijs/pixi-tilemap

3. You can do tilemaps in many ways. I have done few just by laying sprites next to each other and rendering them. You could also do it so that tilegroups are created into one single texture and then you have only few sprites to render at any given time. Or you could create a custom shader that does the tiling.

4. There's a containsPoiint -function that checks basic square hit if no hitArea is given. If hitarea is given then it uses that. So just only the basics required for mouse interactions.

[Fovi]

Thanks for fast replay.

One last question: What's the proper way of making complex animated sprites ? I thinking about user character for example. Where he can wear different hair depend of stat of the game. His head moves, meaning that i have to animate hair with whole base.

The way i was thinking to solve this is to make two textures one that will contains player base and second one with hair. Just overlap each other and animate them synchronously. This way hair will be where they should be. What do you think about that ?

 

Btw. i want make that sprite on the fly, not pre-made textures with different hair. That's because if we will add possibility to change shirt and let's say boots suddenly we will end up with insane amount of combinations.

[Exca]

Usually I just create a class that extends pixi container and add two animated sprites to that and then control the animations from that class.