Saltallica

Members
  • Content Count

    18
  • Joined

  • Last visited

  1. Ivan, here's the approach that ended up working. I discovered the frame shifting technique as you were writing your post about it 🙂 The nice thing is, this doesn't require any deep deep diving in to PIXI internal or webgl, and works with PIXI v4. step 1 - adjust the base texture to wrap this.pathTexture = new PIXI.Texture.fromImage('path-texture.png'); this.pathTexture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; step 2 - in my game loop update method update(delta) { this.throwPath.texture.frame.x -= 200 * delta; this.throwPath.texture._updateUvs(); } And here it is in action: https://ibb.co/FDtS3w8 Thanks again for your help!
  2. I do see something about adjusting the "frame". But I want to use the whole texture and just offset it in the X..err.. U position.
  3. Looking over the v5 documentation for PIXI.SimpleRope, Texture, and BaseTexture - nothing really stands out to me that says 'HEY! Set this to offset a texture'. Any hints?
  4. Thanks - we're are still on PIXI version 4 for this project - I fear we have so many dependencies on how it works that upgrading may be impossible, I'll take a look!
  5. Hey guys, I'm wondering if there is a way to animate the offset position of a texture when applied to a PIXI.Mesh.rope. My goal is to have the texture "flow" in one direction. The texture in question is designed to repeat in one direction. I'm hoping if I can set the base texture to wrap along the U coordinate (using PIXI.WRAP_MODES.REPEAT), that if I can adjust the offset of the U over time, that I can effectively get the texture to wrap along the rope mesh. Where I'm running in to trouble is, based off of research so far, I don't see a way to adjust the offset "out of the box" in PIXI. Is this even possible, or should I be taking a different approach? Here's an screenshot of what I'm aiming for: Note the arcing path leading from the gorilla, going over the skyscraper, and ending at a building. This is built using a mesh rope. I think it would be cool if I could get the texture to move in one direction, similar to a tiling sprite, but along the rope. Any insight is much appreciated! Thanks, Sean
  6. Ivan, Thanks for the quick reply! I'm using v4 (4.6.2). Wrapping the sprite into a container, and applying the filter to either the sprite or the container, with the container.cacheAsBitmap = true causes it to disappear completely. Also tried playing with render.generateTexture and also getting the same results - as in nothing displays. Only other thing I can think to do at this point is extract the image, and re add it as a new texture, but not sure if that'll work either.
  7. Hey Guys, Running in to a scenario where I'm using an expensive shader applied to a large background sprite. The background doesn't get updated once the shader is applied, and it would be great if I could just get a copy of the sprite as it looks with the shader applied, without it having to re apply the shader every frame. My failed attempts so far: The most straight forward approach was to attempt using cacheAsBitmap, but it simply makes the entire contents of the container disappear. I also tried rendering the sprite (with filter) to a renderTexture, then outputting that to a sprite. The sprite shows up, but the affects of the filter do not show up. Does anyone have any tricks up their sleeves? Thanks!
  8. Is it possible? For example - I have a sprite I want to add holes to. In this case, it's a blimp. A player can hit the blimp multiple times. Each time the blimp is hit, a hole should be placed in the spot where the hit occurred. The base mask sprite: The hole sprite: Some psuedo code: //full blimp mask this.mask = new PIXI.Sprite(blimpMask); this.sprite.addChild(this.mask); this.sprite.mask = this.mask; //inside my hit testing methods //add a child sprite to the mask sprite var localPos = this.sprite.toLocal({x: pos.x, y: pos.y}) var hole = new PIXI.Sprite.fromImage('/img/blimp-hit.png'); this.mask.addChild(hole); hole.position.x = localPos.x; hole.position.y = localPos.y; hole.scale.x = 0.5; hole.scale.y = 0.5; hole.anchor.x = 0.5; hole.anchor.y = 0.5; So, if there were two holes added to the mask sprite, they would be added as children of the main mask: I would expect the composite sprite, when set as a mask, to have holes as outlined above, but the children sprites are never accounted for when the parent sprite is set as a mask. Is there a definitive way to make a dynamic mask that is comprised of multiple sprites?
  9. Flipping the LUT image did the trick! Here's a working example: https://jsfiddle.net/ycdvehcf/4/ Also, changing the scaleMode to PIXI.SCALE_MODES.LINEAR keeps color banding from occurring For anyone else who stumbles on to this post - use this as your base LUT image: Ivan, thanks for pointing me in the right direction!
  10. :: giant thumbs up emoji :: Didn't consider mipmapping causing issues I do notice the that the LUT sprite itself, when the filter is applied, looks like it's flipping upside down. So that leads me to think it could be one of two things (maybe?) The math for the shader needs be adjusted to flip the Y axis Flipping the LUT image PNG upside down might work? Thanks for looking in to this!
  11. Here you go: https://jsfiddle.net/ycdvehcf/3/ Not the full game obviously, but you can see the shader being toggled on and off. Thanks so much for your help!
  12. Thanks for reviewing, what more can I provide? Using Pixi 4.6.2... Running under latest Chrome... here's the vertex and fragments shaders as passed to gl: precision lowp float; uniform vec4 filterArea; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D lut; #define MAXCOLOR 15.0 #define COLORS 16.0 #define WIDTH 256.0 #define HEIGHT 16.0 void main() { vec4 px = texture2D(uSampler, vTextureCoord.xy); float cell = px.b * MAXCOLOR; float cell_l = floor(cell); float cell_h = ceil(cell); float half_px_x = 0.5 / WIDTH; float half_px_y = 0.5 / HEIGHT; float r_offset = half_px_x + px.r / COLORS * (MAXCOLOR / COLORS); float g_offset = half_px_y + px.g * (MAXCOLOR / COLORS); vec2 lut_pos_l = vec2(cell_l / COLORS + r_offset, g_offset); vec2 lut_pos_h = vec2(cell_h / COLORS + r_offset, g_offset); vec4 graded_color_l = texture2D(lut, lut_pos_l); vec4 graded_color_h = texture2D(lut, lut_pos_h); vec4 graded_color = mix(graded_color_l, graded_color_h, fract(cell)); gl_FragColor = graded_color; } precision highp float; attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; uniform mat3 filterMatrix; varying vec2 vTextureCoord; varying vec2 vFilterCoord; void main(void){ gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0) ).xy; vTextureCoord = aTextureCoord ; } Anything else you are looking for?
  13. Hi there - I'm going down a rabbit hole trying to implement a color grading / LUT shader for PIXI. Color grading is where you can you use a sprite as a lookup table to quickly transform one set of colors to another - this is handy for applying realtime contrast and color adjustments. I'm using this as a reference: https://www.defold.com/tutorials/grading/ I've created a filter/shader using the code in the link above: var ColorGradingShader = function(LUTSprite) { var my = this; var code = ` precision lowp float; uniform vec4 filterArea; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D lut; #define MAXCOLOR 15.0 #define COLORS 16.0 #define WIDTH 256.0 #define HEIGHT 16.0 void main() { vec4 px = texture2D(uSampler, vTextureCoord.xy); float cell = px.b * MAXCOLOR; float cell_l = floor(cell); float cell_h = ceil(cell); float half_px_x = 0.5 / WIDTH; float half_px_y = 0.5 / HEIGHT; float r_offset = half_px_x + px.r / COLORS * (MAXCOLOR / COLORS); float g_offset = half_px_y + px.g * (MAXCOLOR / COLORS); vec2 lut_pos_l = vec2(cell_l / COLORS + r_offset, g_offset); vec2 lut_pos_h = vec2(cell_h / COLORS + r_offset, g_offset); vec4 graded_color_l = texture2D(lut, lut_pos_l); vec4 graded_color_h = texture2D(lut, lut_pos_h); vec4 graded_color = mix(graded_color_l, graded_color_h, fract(cell)); gl_FragColor = graded_color; } `; PIXI.Filter.call(my, null, code); my.uniforms.lut = LUTSprite.texture; } ColorGradingShader.prototype = Object.create(PIXI.Filter.prototype); ColorGradingShader.prototype.constructor = ColorGradingShader; export default ColorGradingShader; I then add this to my top level container: //relevant code from a wrapping class this.colorGradingSprite = new PIXI.Sprite.fromImage('/img/lut16.png'); this.pixiContainer.filters = [ this.colorGradingFilter ]; When using any LUT image, including the default without any color adjustments: I go from this: to this: I'm assuming there are some adjustments necessary to either the shader code, or how the lut sprite itself is being loaded - I have no clue.. Any help would be greatly appreciated! And for those curious, here's my end goal: Thanks, Sean
  14. Awesome - thanks again for the help - here's what I came up with: This is using the displacement shader trick on the root container, along with two other animated displacement shaders on the actual water sprite itself - it give a great rough seas effect. Just a few days ago I didn't think any of this would be possible - thanks for pointing me in the right direction!