Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


pongstylin last won the day on February 10 2020

pongstylin had the most liked content!

About pongstylin

  • Rank
    Advanced Member

Recent Profile Visitors

931 profile views
  1. Actually, you did have the time to help me with my issue. I was already trying to position the top-level container using bounds with poor results. But placing the top-level filtered and positioned container inside another vanilla container worked like a charm. (I wish I thought of that before posting). And the filters are indeed applying the correct coloring, so I must've missed something before. I didn't end up using your advice on generateTexture, though. I'm just using extract directly. Perhaps your advice is the equivalent of positioning my filtered container using bounds.
  2. I'm having a surprising amount of difficulty using the extract plugin to render a container object. Does it support filters? Anytime I apply a filter to the top-level container or any nested containers, it results in shifting the position of the contents down and right (resulting image getting truncated as well) and the desired color effect appears to be missing. I'm using PIXI v5.2.1
  3. Yes, earlier you said to cache it by piece type. But caching it by piece is more practical since 2 pieces of the same type can't share the same cached display object. I had considered it but didn't want to use the additional memory unless it is proven to be helpful. For proof, I just need to understand why it would be helpful. After all, when building these display objects, I'm using cached textures.
  4. Remember that they are pre-compiled. So building them has no impact on executing an animation. Are you suggesting that display objects previously seen in stage rendering, but had been removed from the stage, would render faster than fresh display objects when added back to the stage? If so, how does that work?
  5. First, a bit of context. Most of the animations in my app involve moving a piece on a game board from point A to point B or showing a piece attacking another piece. Each frame for a piece is composed of multiple sprites. With a few exceptions, the sprites for a given piece type are all contained within a single spritesheet - one spritesheet per piece type. I made sure the spritesheet itself uses POT dimensions although each frame has arbitrary dimensions. Before running a move or attack sequence that involves one or more pieces on the board, I pre-compile the frames for the entire ani
  6. And since my canvas renderer was silently failing to render anything, I intuitively figured out 3 more modules I needed. I looked at "canvas-display" and was like hmmmm, maybe I can swap out "display" with "sprite", "graphics", and "text" to make those things show up. Bingo, yay for pattern recognition. But running on intuition isn't very satisfying. There's got to be a guide on this right?
  7. Yes indeed. I've never seen a web framework that I've liked. But this library and web component libraries have pleased me very much. Moving to the consumable model is just the next level of awesome. I see the canvas-display module doesn't have exports and decorates the existing Container class, so added "import '@pixi/canvas-display'" to my code and it works just fine. But my documentation question went unanswered. Is there a list of such components someplace? Just seeing a list would allow me to intuitively find what I need such as in this case. Tired or not, I'm not sure how I co
  8. So I'm refactoring my game to use PIXI v5 consumable components so that, with webpack tree shaking, the JS bundle never sees modules that I don't use and omits exports from modules that I do. Unfortunately, despite being comfortable with the PIXI documentation and looking through PIXI source code, it is proving difficult to navigate the plugins that I need to make basic things work. I've included a work-in-progress code snippet below where I pull in the various PIXI bits that I need. My immediate problem is that the Canvas Renderer fails to render the stage. The stage is a "Container" obje
  9. Not complaining or pushing! If it gets done at all, it would make my day. I continue to be impressed by the evolution of the PIXI project. In the course of my own project, I have had to deal with a lot of maths of my own. The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again. (Those small phone screens really stretch the imagination on how to make a largish game board usable) Of course, that is all 2d transformation stuff at which you guys are probably pros
  10. So, I've been using PIXI.js since v3 and am fairly familiar with drawing gradients using 2d canvas and turning it into an image so that I can use it in a WebGL renderer. But now it's 2020 and we're on PIXI.js v5 with a mid-level API and consumable components. I'm just now making the migration to v5 and am hoping that there is a plugin or feature that I can use to do radial and linear gradients directly in WebGL. You see, I'm porting an old AS1 game over from Flash to HTML5 and the game makes extensive use of radial gradients and morph shapes to create interesting effects like a semi-transpa
  11. Seems off topic for this thread. I am not sure how tolerant this forum is about such things, so I'm not sure if I would respond here and permit this practice or make you create a new thread.
  12. Hah! Sure enough. I tested my app to see if my cursor would change to a pointer after an animation completed. It did when I had the InteractionManager plugged into the ticker. It didn't when it wasn't until I moved the mouse one pixel. So let's say I'm fine with the pointer not showing up until I move the mouse. Is that the only reason to run the manager through the ticker?
  13. As far as I can tell from the code, the ticker triggers callbacks every time requestAnimationFrame triggers its callback. So if you're hoping that the ticker can be configured to triggered callbacks 40FPS instead of 60FPS, you can't. But, just because the callback is triggered doesn't mean you have to render. For example, the Interaction Manager adds itself to the shared ticker so that it can figure out if your mouse is hovering over something that can be interacted with and change your cursor to a pointer. But the Interaction Manager only performs this check at 6FPS. See how it does it b
  14. The Ticker documentation is here: http://pixijs.github.io/docs/PIXI.ticker.Ticker.html And here: (It makes reference to using PIXI.ticker.shared) http://pixijs.github.io/docs/PIXI.ticker.html Although, I tend to prefer to use the code as my documentation: http://pixijs.github.io/docs/core_ticker_Ticker.js.html Essentially, PIXI.ticker.shared is an instance of the PIXI.ticker.Ticker class. This instance is used by the Interaction Manager, although I'm trying to figure out why since it seems unnecessary (nobody has responded to my post yet). Of course, you are free to use the same instan
  15. Flake, I'm pretty sure you can still get 'er done the way you like in WebGL. Reminder, I said that parent/child relationships are OPTIONAL. So if they make things awkward, you don't have to use them. For example, using your latest example: function render (){ var graphics,sprite; // Remove all objects we rendered last time so that we can add a new set. stage.removeChildren(); graphics = new PIXI.Graphics(); // draw poly stage.addChild(graphics); graphics = new PIXI.Graphics(); // draw rect stage.addChild(graphics); sprite = PIXI.Sprite.fromImage(source); stage.addChild(sprite);
  • Create New...