Search the Community

Hi guys, I'd like to present you my project, which I've been working on during the last year. The development is still in progress, so it doesn't have fancy interface and not very optimized, but it's a nice POC of Babylon.js framework. The game supports desktop (mouse + keyboard) and mobile (gyroscope and accelerometer) controls. Share your thoughts, any inputs and comments are highly appreciated.

Hello! the tldr; How do I do color replacement of sprites in pixi? (not tinting, e.g. change #ff0000 to #cccccc) How do I best render 50+ characters made out of 6-10 sprites (~100 frames total), each of which has been recolored by whatever the answer is to #1 (with performance in mind)The long version, with images and examples: I am porting a canvas-centric project of mine to pixi, and am unsure how to re-implement my former character generator. I have these small pixel art characters that, in my former game, would all be recolored at runtime. Their skin, hair, gear, etc could be any color. They also had a set of animations, somewhere in the 60-100 frame range. To accomplish this, I had a base template character cut up into many pieces (head, hair, torso, feet, arms, misc gear, etc) which I would use to perform an expensive per-pixel color replacements. All in all, these were slow to generate (~250ms per character) but then I would save these recolored canvases and use them as spritesheets resulting in lagless animations and no limit on the colorization options. So rather than loading a spritesheet as most games do, I was loading several spritesheets or individual images, and then at load/runtime I was *generating* a geared+colored spritesheet per character. If someone redyed their gear I had to generate a new spritesheet for whatever they changed. Here's an example of a randomly generated set of characters. Keep in mind that this is just a sample of 3 frames from each sprite sheet -- every character has another 60-100 frames saved in memory representing run and attack animations in four directions. Here's one geared character in a run animation (not sure if it'll animate in the forum, so a link follows): http://timetocode.tumblr.com/post/64857650654/sample-armor-animations There appear to be many options of how to accomplish something similar in pixi v3, but I keep running into performance issues so I wanted to solicit some feedback before I sink in too many more hours. So far with pixi I am able to draw a basic uncolored character composed of 6 sprites with no performance problems. I can even add 15000+ of them to the screen and have them run around at 60 fps. I suppose this makes sense, I'm just drawing straight from a spritesheet in this scenario just like bunnymark. Where I run into issues, is in colorization of the characters. I assume that in webgl the solution is a custom shader that replaces my template colors with whatever I want (is it?). I'm not sure how to make such a shader yet, but to test performance I tried using the InvertFilter and the SepiaFilter, as I figured these fundamentally performed the same task (recoloring pixels based on their existing value). In the scenario of randomly assigning a Sepia or Invert filter to each body part of my characters, I experienced a drop in renderable characters from 15000+ to a couple hundred. Removing shaders from some, and adding tinting to others (which I do not plan to use, because it washes out colors) further degraded the frame rate. If I were to add as much gear and variations as I have planned, the game wouldn't actually run with my current naive rendering approach. Now I know pixi has many tricks to use at this point, but I don't know which ones to use, or even if I've heard all my options yet. Could someone give me some options? Or let me know if any of the following options have merit: revert to using canvas to generate a per-pixel colorized + geared in-memory spritesheet of each character, and then render the character in pixi.js via webgl (I can do that right? use an offscreen canvas and still use webgl..?) write the color-replace-shader, use some pixi feature (cache as bitmap? render texture...?) to create the spritesheets (would this even work? can i capture the color changes from rendering with the shader and then save that as an image?) generate a finite number of skin/hair/gear colors in a drawing program and save them as spritesheets, don't make full character spritesheets, just draw the bodyparts where they need to go, don't do any fancy character generationIs it true that if I do somehow procedurally generate ~50-150 different colorized spritesheets (to represent ~50 unique characters on the same screen) that I may still have a performance problem because pixi would be rendering *from* too many different images? Or should i expect awesome FPS in this scenario? Sorry for the complicated question, but I would really love to leave my old canvas game behind and move to pixi! Thanks for reading