• Content Count

  • Joined

  • Last visited

About Saltallica

  • Rank

Recent Profile Visitors

751 profile views
  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: and, if you want to download and play the beta for windows (runs in electron), you can check it out here: 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 local multiplayer turn-based mode where you can play 1 on 1 or 2 on 2 - similar in fashion to the original Qbasic game. We have a fancy marketing site with more screenshots and features of the game that uses the same tone of voice and writing style we use in the game And of course a trailer and a Steam page! Background I was responsible for most of the graphics, animation, UI design. We have a custom animation library, particle system, and time scaling game loop - we ended up basically with a small engine with Paper.js and PIXI.js for graphics, with howler.js for audio. We originally started with just using Paper.js, which has an AWESOME api, but keeping the game as vector based over canvas was just too slow - so we switched over to using PIXI.js and little by little migrated many of the techniques and graphics that were procedurally generated in Paper.js to sprites. Later on we used PIXI's Spine runtime plugin to so we could create our game characters. We ran into to many challenges along the way since I was so unfamiliar with the necessities of game development, I build web apps for my day job in both JS, C#, and SQL server, and very little of the usual patterns used there make sense for attempting a real-time interactive application. Object pooling, optimizing collision detection, full keyboard based navigation, etc, etc. A series of problem after problem, that could have probably been solved by not practically starting from scratch. While I learned a lot about the necessary components and the inner works of what a game engine needs - I don't think I have the time or patience to try and tackle it again, and will probably use a full fledged game framework or engine like Godot or Unity, where I can focus on the act of creating a game, and not the performance challenges with trying to make something 60fps in JS. My friend went from no programming experience at the start to tackling complex bugs and implementing many first version features as well as gamepad support. He's also responsible for a lot of the great ideas for the game, that at one point seemed impossible for us to implement. Not to mention, the original soundtrack, sound effects, and voice overs are all his doing. I highly recommend, if you are attempting to go it alone on a game, to try and rope a friend in to the process - having someone to be accountable to and generate ideas with made the difference between quitting years ago, and pushing each other to build a polished game we think we could put up on Steam. So, the game is a smattering of different graphics and audio libraries with custom written glue to turn it in to a game. We started with require.js using the revealing module pattern and migrated to ES6 and transpiled with babel. Then, in the last few months, since chrome/electron support nearly all of ES6 features, use babel only for transpiling to AMD modules so we can use require.js. So, we started with a lot of JS tools that were popular 4-5 years go but have fallen to the wayside. The web dev world these days would be using TypeScript and webpack, but we didn't see the return on investment for overhauling everything we'd already built. We did most of our day to day development inside of Chrome, but the end-goal is to release as a packaged desktop application. We started with NW.js when that was the more popular and easy to start with option, but have since migrated to Electron and all the amazing build tools created by the open source community that make it a snap to create installers for different platforms. We are planning to release on Windows first, then MacOS, and then some flavors of linux down the road. The PIXI.js forum helped us tackle some problems we couldn't solve out of the box. A very special shout-out to Ivan P who lurks on the PIXI.js forum for constantly answering our question almost as soon as we post them 🙂 Request for Feedback So, we are in beta now, and trying our best to reach people who are willing to play our game and give us some honest feedback. We have an open beta program were we are requesting feedback, and in turn, we will give those who participate a free copy on Steam upon release this April. We've had a lot of downloads, but very, very little in way of that turning in to feedback. I'm hoping a few of your here can try the game out for at least of few minutes and give us your general impression. We wan' to make our little game the best we can. You can download it for windows from: And, for the curious, he's requirements: OPERATING SYSTEM Windows 10 64 bit PROCESSOR Intel Core i5 2.0Ghz MEMORY 2 GB RAM GPU Dedicated GPU with 1Gb VRAM or better: AMD Radeon R9 / Nvidia GeForce 650 *sorry, integrated Intel graphics chips just won't do* STORAGE 430MB available space Thanks for reading this lengthy post and we're eager to hear any feedback! - Sean
  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(); } And here it is in action: Thanks again for your help!
  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 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
  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 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!
  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 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?
  12. Flipping the LUT image did the trick! Here's a working example: 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: Not the full game obviously, but you can see the shader being toggled on and off. Thanks so much for your help!