Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by Saltallica

  1. Thanks bruno! Many decisions with the game have been driven by us imagining a very critical and picky gamer that is only interested in AAA games, that writes an incredibly negative review that crushes our souls and any ability to sell the game. So with that, I've redone the graphics like ten times until that voice leaves my head 🙂
  2. I have a lengthy post in the showcase forum for those interested - we are in beta for our game GORILLA TOWN which uses PIXI, and pixi-spine. Props to Ivan P from PIXI.js for helping us on this forum multiple times! If you want to learn more about the game, we have a fancy marketing site: http://gorilla.town and, if you want to download and play the beta for windows (runs in electron), you can check it out here: http://gorilla.town/beta.html We love to hear any feedback you have. Thanks! Sean
  3. Hey yall - my friend and I have been working on GORILLA TOWN for about 4 years off and on as time permits. It started as a way to teach my friend how to code but also make it fun - so we aimed at making a clone of the old Qbasic Gorillas game for MS-DOS. Little by little it warped over time into an action oriented artillery game where you have to battle robots and escape said town. You blow up blimps and use power ups through 22 levels. The art, story, music, and voice overs, and UI was inspired by the jazz age and 1920s-30s Art Deco movement, but with a dash of weird humor. There is also a l
  4. 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(); }
  5. 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.
  6. 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?
  7. 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!
  8. 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 P
  9. 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.
  10. 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 outpu
  11. 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
  12. 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!
  13. :: 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!
  14. 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!
  15. 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_p
  16. 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 vTextu
  17. 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!
  18. Ivan, Thanks so much - that's pretty clever! The clamp on the top border works exactly as specified, the trouble I'm running in to at this point is animating the displacement by moving the displacement sprite over time. Because of using CLAMP instead of REPEAT, you can't easily offset X and have it warp over time repeatedly. Ideally, I could CLAMP in one direction (Y) and REPEAT in another (X), giving the best of both worlds. It appears in WebGL you can do this via TEXTURE_WRAP_S and TEXTURE_WRAP_T: https://webglfundamentals.org/webgl/webgl-3d-textures-repeat-clam
  19. I'm struggling with an approach to add a water effect to an area of container. I'd like to have the area in green distort the area below it via a shader, but also have the ability for this water area to "rise/fall". The rise/fall is of no problem when it's just a sprite I can move up and down as necessary - but being able to apply a shader to just that specific area is throwing me for a loop. Adding a filter directly to the sprite won't distort anything since it's not accounting for the pixels behind it.. Is there are way to capture this particular area, save it to a buffer, and
  • Create New...