Sambrosia

Members
  • Content Count

    14
  • Joined

  • Last visited

  1. Thank you! It's wonderful to hear that you like it. The graphics I drew myself. I spent a few years aspiring to be an artist before I got in to programming, so I have a bit of practice there. Edit: I forgot to mention that the fonts were not made by me. They are Retro Sharp and 3x5 Minimal. (Public domain from OGA. Same for the audio.)
  2. Hey there! Catacomb Chaos is an endless action arcade game where you try to survive against unrelenting waves of skeletons. You can loot gold and purchase potions for your next life. Let me know what you think! Play here: https://sambrosia.gitlab.io/catacomb-chaos/ I learned some neat stuff making this. Engine design, ECS, and steering behaviors are some of the cooler things I experimented with for the making of this game.
  3. Cool to hear! I think clear documentation for how the coordinates/uvs actually work would help things a lot. Same for the FilterManager. I'm still not sure what exactly that does, even after reading through the sources. I'd be happy to help write docs, but I lack the knowledge to do so here.
  4. I'm unfamiliar with pixi-display, but here's how pixi works without it: Newly added objects are rendered on top by default. The display objects are rendered in the same order they are in their parent's "children" array. So the first child in the array is rendered, and then the second is rendered (over top of the previous) and so on. If a child has children of its own, then all of those grandchildren are rendered in the same fashion before moving on to the next child. There are methods for adding and removing children at specific positions in the parent's children array: http://pixijs.download/release/docs/PIXI.Container.html#addChildAt You can also use Array methods to do things like sort the children array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort @ivan.popelyshev Are there any plans to merge pixi-display into pixi at some point?
  5. I would suggest using PIXI.Application instead of manually creating the renderer and stage, unless you have a specific reason not to. http://pixijs.download/release/docs/PIXI.Application.html That will also create a PIXI.ticker.Ticker object which will be used automatically to render the stage every frame at a rate decided by the browser (usually 60 fps). You can then simply add your objects to the stage and they will be rendered every frame. Just change your objects' positions and they will appear where they should. If you want to move your objects smoothly, you will need to move them by a small amount each frame until they reach their destination. I recommend reading about game loops/update functions if you want a better understanding of how this works. Here's a very well-written resource for exactly that (and much more): http://gameprogrammingpatterns.com/game-loop.html http://gameprogrammingpatterns.com/update-method.html The update method chapter is what's particularly relevant here, but the game loop one is worth reading even though PIXI.Application (and the browser) mostly handles it. Edit: Oh, and to answer your question: No you shouldn't have to do that. Something more fundamental is wrong which is why I wrote what I did.
  6. Unless I've missed something, you seem to be over-complicating the matter. @ivan.popelyshev's most recent reply is the way to do it. No giant canvas is needed. // Create an application with the renderer at a reasonable size const app = new PIXI.Application(1366, 768); // Create an entity and add it to the stage const myThing = new PIXI.Sprite(someTexture); app.stage.addChild(myThing); // Set its position to whatever you want relative to app.stage's position myThing.position.set(8000, 500); // Move app.stage so that myThing is visible in the viewport app.stage.position.set(-8000, -500); (Edit: Sorry about the fucked up syntax highlighting. This forum doesn't seem to apply it properly half the time, even with repeated attempts.) Hope that helps
  7. I've not tried it with a tweening library. The method I gave should be plenty faster than you really need in practice.
  8. @ServerCharlie Yup. The idea is similar, but how much it zooms each frame is determined by your interpolation code. An elegant way would be to store your zoom info somewhere, then call your interpolation code every frame: const zoom = { current: 1, desired: 2 }; function update() { // ... // Somewhere inside your update function zoom.current += (zoom.desired - zoom.current) / 60; // ... } Then you can set zoom.desired from elsewhere in your code and it will interpolate towards it. You can replace (zoom.desired - zoom.current) / 60 with any interpolation function you want.
  9. I'd give it a go and see if there's actually a problem, and then worry about it if there is. Is it an option to simply separate your texture atlas into individual textures and load them only on the components where they are needed?
  10. Sambrosia

    Blurred sprites

    The method you're using for setting the default scale mode is deprecated. The current way to do it is like this: PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; I took a look at the values of the baseTexture on your vulcan sprite, and the scaleMode seems to be set to 1 (nearest), so I think it should be working as-is. Maybe your auto-resizing of the game view is at fault here. Or maybe setting PIXI.settings.SCALE_MODE has some side effects that will fix the problem. It might help you to take a look at the source in the github repo.
  11. You need to multiply instead of add: newZoom = oldZoom * zoomAmount;
  12. PIXI.Graphics is somewhat similar to the context2d canvas API. // Create a new Graphics object and add it to the scene let myGraph = new PIXI.Graphics(); someContainer.addChild(myGraph); // Move it to the beginning of the line myGraph.position.set(startPoint.x, startPoint.y); // Draw the line (endPoint should be relative to myGraph's position) myGraph.lineStyle(thickness, 0xffffff) .moveTo(0, 0) .lineTo(endPoint.x, endPoint.y); That will create a Graphics object and draw a line to it. If you want to re-draw the line, you'd need to call myGraph.clear() to erase the previous line, and then call the commands to draw your new line. You could continue to chain more draw methods to get a more complex result. Note that some of PIXI.Graphic's methods require that you use beginFill() and endFill().
  13. Yes. InteractionManager automatically calls preventDefault() on the original event if your InteractionManager object's autoPreventDefault property is true. Docs page: http://pixijs.download/release/docs/PIXI.interaction.InteractionManager.html#autoPreventDefault You can also search for where it's used in the source if you're curious: https://github.com/pixijs/pixi.js/blob/dev/src/interaction/InteractionManager.js