Exca

Members
  • Content count

    182
  • Joined

  • Last visited

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

1,937 profile views
  1. Exca

    Space warp speed effect

    Yep, for example using tweenjs it would be something like this: Tween.get(starwarp).to({speed:1}, 1000); and then just remove that speed += -line. [Edit] Assuming starwarp is an object/classlike structure containing the logic.
  2. With 2d canvas yes, with webgl I don't think so.
  3. Whole stage gets rerendered. There are few hacks how you could make partial rererenders (multiple canvases, drawing everything to single texture and then just using that etc.), but those would be worse performancewise in your application.
  4. Exca

    Space warp speed effect

    https://pixijs.io/examples/#/demos/star-warp-sprites.js Here's an example made with sprites.
  5. Interactions should not be dependant on the render-loop. Atleast my projects work properly with click & touch interactions even if I disable render loop. Do you have the broken version online somewhere?
  6. Exca

    Space warp speed effect

    Here's one shader I found that does it. To get that to work in pixi it would need to be translated into webgl1 shader and changed from shadertoy specific functions to more generic glsl. https://www.shadertoy.com/view/Xdl3D2 I might be able to make a pixi example during the evening today.
  7. Exca

    Space warp speed effect

    The link doesn't open for me, but if you mean something like this then yeah, such an effect can be made with multiple options. One option would be to make a shader that generates the starfield. Another one would be to draw multiple sprites and then scale & rotate them to generate the effect. Shader option would require (in v4) either doing it as a filter or a custom renderer plugin. Sprite option is easier to do, but it might require some additional filtering depending on what style you're looking for.
  8. Exca

    Optimizing a Pixi stage

    Oh and the scaling change will make a difference for slower computers. Before scaling you had over 4k resolutions to render when zoomed. Now the rendering is done to whatever the canvas is originally and then the result is scaled up similarly as how images would be scaled.
  9. Exca

    Optimizing a Pixi stage

    Chrome has a pretty good profiler. Hit F12 to get debug console, then go to performance, hit record and gather some info. Here's an example screenshot from the page: I have a single frame selected in that which had a lot more stuff happening than what the ones nearby. You can see that most of that frames time has gone to event handling. And I most likely clicked either zoom or text at that frame. Rendering seems pretty ok in my mind. You can make pixi render only wanted frames as Ivan suggested, instead of using application, create your own ticker and rendererer and then have some boolean flag dirty and set it to true everytime user does something. If it's true, then render in requestAnimationFrame and set it to false. If it's false then just skip render on that RAF.
  10. Exca

    Unable to decode image in IE

    How large is the image? I've had similar problem when using images with any dimension over 2048.
  11. Exca

    Pixi.js Showcase

    Made a game during Assembly Game Jam 2018 in about 9 hour time. Play here: https://exca.itch.io/corona-lander Gameplay video:
  12. It could be global variable, but I would suggest avoiding globals. Only the module/class/scope/something that handles the sequencing of actions would need to know the pending actions. Globals generally are a bad idea and they will at some point cause problems. Though if you know for sure that there wont be anything outside of your own programs scope introduced to page, then they can allow for some shortcuts to be applied. Settimeout is ok for delays. Haven't used timer.js so cant say anything about that. I usually use haxe as my main language and it has a builtin timer (which compiles to either setInterval or setTimeout depending on use scenerio).
  13. I would do that with a sequence of animations + timer in between. For example lets take a situation where you have nextTurn, animateAction and onActionAnimated -functions. When the "battle" starst you call nextTurn. Then it calls animateAction for both of the action (either at the same time or with a timer or with a promise or similar chaining). Both of action animations could have callback-functions (onActionAnimated) -functions. Then in the onActionAnimated -function you check that no more actions are left for this turn. Then you call nextTurn again (possibly with a small timer delay) and check if there's turns left. If there is, repeat the process. If there isn't, then the sequence of actions is done and you can let player continue on. You could have the whole action animations easily done by having some baseclass ActionAnimation and then extend on that, class would have something like start, stop, tick, onComplete and running -methods/properties/events. That way you could develop animations without needing to know about the rest of the game.
  14. Exca

    Blurry Image after setting anchor to .5

    If you get the bounds of the blurry one does it have any of the values with decimals? (card.getBounds())
  15. Exca

    Blurry Image after setting anchor to .5

    Is the texture width or height an odd number? That would explain the situation. If that's the case then I know few ways to fix it. - Use pivot point with x:Math.round( width/2), y:Math.round(height/2) instead of anchor. - Calculate anchor point so that no half pixels are needed: x: Math.round(width/2)/width, y: Math.round(height/2)/height.