Search the Community

// Flash player red let tintTween = this.tweens.add({ targets: this.player, duration: 200, tint: 0xff0000, callbackScope: this, onComplete: function(tween, sprites) { // Return to original color this.player.clearTint(); } }); This code is making my player sprite flash black and go back to normal, why is it not flashing red?

Hi, How can i use color code to change sprite color without using tint. Thanks,

Hello, I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen. The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes: https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010 Just click the button to apply/remove the tint and you'll see the issue. Why this happens?, is there a way around this or is just what we get in canvas? Best, Rodrigo.

Hi Guys, I was wondering if it's possible to render a texture with a solid color? I would need this in order to build a masking sprite. Im planning on using a solid black white mask and for this reason would like to be able to draw a sprite with just black or just white to a canvas. I looked at the tint class, but this doesnt force all pixels in a texture to be a color. Thanks in advance! Erik

is there any way to do a gradient tint in sprites/images in phaser? i'm using canvas mode , not auto or webGL Thanks. Sorry, for bad english :|

Hi Quick question - is it possible to tint a spritesheet, I know you can use eg sprite.tint = 0xff00ff; but tint doesn't seem to work on an animation, is it possible or am I just better just photoshopping a new spritesheet? Thanks in advance Eric

I'd like to tint a model to black with a certain amount of transparency, let's say 60%, in a way that you'll be able to see the model's texture beneath the black tint, at 40% clarity. I created a material with black diffuse color, and applied it to the model's meshes. It is pitch black though, is there a way to make it only 60% tinted? http://www.babylonjs-playground.com/#1SVN3I#57

Hi! I am new to phaser. I have a sprite called Ground in the group called Platforms var platforms = game.add.group();platforms.enableBody = true;var ground = platforms.create(0, game.world.height - 30, 'ledge');The ground sprite has to be white,I use this line of code for that ground.tint = 0xffffff;I don't know why but it does not work with the color white,it works with any other color but not with white. Thanks for help

Hello, I'm trying to apply a tint to the whole of a group, to designate a team. Instead of creating a spritesheet that includes every sprite corresponding to each team, I'm using a grayscale sprites, putting them in a group, and applying tint to that group. For some reason, this works perfectly with the "group.alpha" setting, but doesnt with the group.tint setting. The sprites just stay grayscale Here's my code: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'row', { preload: preload, create: create, update: update }); // Spritemap Key, spritemap url and JSON file URL var spriteMap = "main" var textureURL = 'assets/main.png' var atlasURL = 'assets/main.json' var terrainLayer; var terrain; var biffinRed; var army; var corps; function preload() { //Preloading... game.load.atlasJSONHash(spriteMap, textureURL, atlasURL) // Loads Sprite atlas and corresponding file} } ; function create() { // Start of create // creates Red Army supergroup biffinRed = game.add.group(); biffinRed.name = "Red SuperGroup"; biffinRed.inputEnableChildren = true, biffinRed.tint = 0xff0000; //inside biffinRed, creates "army group", and assigns properties: army = game.add.group(biffinRed); army.spriteMap = 'main'; army.textureURL= 'assets/main.png'; army.name = "Red army"; //inside army, create corps, that houses units array corps = game.add.group(army); corps.name = 'Army corps' corps = {units: [ {assetName: 'artillery0.png', pos_x: 3, pos_y: 3}, {assetName: 'artillery0.png', pos_x: 4, pos_y: 4}, {assetName: 'antiair0.png', pos_x: 2, pos_y: 4} ]}; //create sprite inside army group using corps properties. army.create(corps.units[0].pos_x*32,corps.units[0].pos_y*32, spriteMap, corps.units[0].assetName); Sorry for the noobie question, still new to phaser. Any help greatly appreciated, Bab

I am creating a Bejeweled game using Emanuele Feronato's awesome prototype; Match 3 Bejeweled HTML5 prototype made with Phaser – detecting combos. I created my own grayscale graphics in Photoshop, made them a little bigger, increased the grid size of the game, and used some code from his HTML5 Dungeon Raid tile engine made with Phaser – Part 4 tutorial to make the game scalable. I used Phaser's sprite tint property to color my jewels. They look awesome all randomly colored like that, but it is difficult to make matches on just shape alone. How would you tint specific frames a certain color? I will have made a great leap forward in my game when it can do the following: Select seven out of 13 color options Select seven out of 49 sprites in the Jewels spritesheet. I used the same layer style in this original. It doesn't look bad, but I think different styles of jewel as well as having the shapes all tinted the same color will make matches easier to see. The sprites should all be from different columns. For example, if the first sprite selected was the star in the top left corner of the image, the next frame should be a hexagon or other shape from a different row. Once the different frames have been chosen, the game should apply the chosen colors to to the chosen frames of my spritesheet. I have attached my code. I appreciate any help you can give. Thank you all very much! CatsTreasures.zip

Hi, My prototype below works but i want to have an option to choose if yes or no i put a tint color. So if tint = "none" my sprite have no tint if i put an another color like 0xFFFFFF then my sprite have this tint color. How do you that ? Thanks e = function (game,nameA,posx,posy,width,height,anchor,tint,alpha) { Phaser.Sprite.call(this,game,posx,posy,nameA) this.x=posx; this.y=posy; this.width=width; this.height=height; this.anchor.set(anchor); this.tint=function(tint) { if ( tint == "none" ) { tint=null; } else { tint=tint; } return tint; } this.alpha=alpha;; game.add.existing(this); } e.prototype = Object.create(Phaser.Sprite.prototype); e.prototype.constructor = e; var example = new e(this.game,'rect',100,100,90,90,.5,"none",1)

Hi! This issue is closed.: https://github.com/photonstorm/phaser/issues/1096 Now when a sprite is tinted animation plays constantly and does not change until it stops be tinted. For example if my sprite has an animation when it is ducking and is tinted sprite when is standing, the animation does not change. Greeting.

Hey, maybe someone solved this problem before. Lets say I have a variable from 0 to 100. How can I map it to the tint color for the sprite? I.e.: when variable is at 0 -> sprite.tint = white; [everything in between] when variable is at maximum (100) -> sprite.tint = red; Thanks!

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

Hello, All is in the title, if you want a running exemple, as I'm unable to doing a jsfiddle, you can go here and: http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation replace the first line by this: var renderer =new PIXI.CanvasRenderer(800, 600);and tint the movie. movie.tint=0xcd12d0Then push the green button: the plane becomes crazy. It's in V3

Hello developers! I use version 2.1.2 and I have a Phaser problem pixi incidence of for some time. When a sprite plays an animation and tinting is applied, the frame of the sprite is locked. Is there any way to fix the problem?

Hi! In my game when the player is hit the sprite is tinted red. The problem is that the animations stop working. In version 2.0.5 there is no problem. In version 2.0.6 and 2.0.7 is where this problem occurs. A greeting.

When I apply this.player.tint = 0xcd0937; to tint my sprite red, the sprite behaves as expected on desktop. The sprite changes color and when the sprite moves left or right all of the sprite state changes are recognized and the tint is active. On mobile, the sprite changes to the desired tint color but stays stuck in the sprite state that was active when the tint was applied. Anyone know how to achieve the expected behavior on mobile?

Edit: Nevermind, was being stupid... because it already multiplies the color I should just use more transparent color codes.

Hello ! I know it is possible for a sprite (with sprite.tint) but how can it be done with a particle ? I saw this: http://examples.phaser.io/_site/view_full.html?d=particles&f=particle+class.js&t=particle%20class But I don't understand :-( Thank you in advance.

there will be 2 sprites (they're just squares) and some text that constantly need to change colours. so would it be better to change the tint or use a spritesheet with the different coloured sprites?

Hello html5game dev forum people! Big news over in the pixi camp! We have just released the latest and greatest version of pixi.js for you to play with and make more cool stuff! Lots more detail can be found on our goodboy blog. But heres the list of new stuff / tweaks included in the latest version: New features: WebGL FiltersAdded Sprite Tinting (canvas and webGL)Added Sprite blend modes (canvas and webGL)Added webGL context loss handlingNew webGL rendererRestructured the canvas rendererAdded ability to have multiple renderers on one web pageAdded support for trimmed sprite sheetsAdd a Contributing GuideAdd an Atlas Spritesheet loader (#444, @MKelm)Implement swapChildren (#431, @namuol)Add base64 support to asset loader (#414, @mattdesl)Add totalFrames to PIXI.MovieClip (#315, @MikkoH)Add uniform sprite sheet loader (#311, @alaa-eddine)Make Interactive dom element configurable (#321, @MikkoH)Add AMD export (#267)Implement travis-ci and jshint integration (thanks @drkibitz)webGL renderer is now fully compatible with IE11Fully compatible with Cocoon.js (@ekelokorpi)Fixed issue where PIXI.TilingSprite required a power of two texture. It now accepts any texture.Added new tint exampleAdded new blendMode exampleAdded cacheAsBitmap to PIXI.Graphics object. Useful for complex graphics objects. Also a great way to guarantee antialiasing on graphics objects in webGL as it renders using canvasAdded generateTexture to PIXI.Graphics object. This function returns a PIXI.Texture of the graphics object. Useful if the graphics objects as is used multiple timesAdded AlphaMaskFilter Bug Fixes Fix issue where urls have http in the resource (#443, @sirflo)Fix IE11 check (#442, @photonstorm)Fix issues where nested Masking was not working correctly in webGLFix cursor style for interactive sprites (#347, @lain-dono)Fix issues with texture destroy (#415, @mattdesl)Fix incorrect BitmapText width (#425, @jcd-as)Fix issue with query params on asset loader (#400, @hugeen)Fix transparent background on objects (#286, @mdoch)Fix problems with event emitter (#187, @johnste)Fix handling of black colors (#288)Fix an issue with empty masks (#313)Fix detector code (#358, @mattdesl)Fix issues with IE ajaxFix misc bugs with PIXI.GraphicsFix issue with removing children with filtersFix a bunch of documentation errorsFix setText to be on proper prototype (#330)Redundant code removed from SpineLoader and SpriteSheetLoader (@Nibbler999)Big thanks to everyone who contributed to this pixi release! We all hope you enjoy using pixi.js 1.4 https://github.com/GoodBoyDigital/pixi.js