xerver

Members
  • Content Count

    1,593
  • Joined

  • Last visited

  • Days Won

    13

Reputation Activity

  1. Thanks
    xerver got a reaction from leeda in I want to ask some usage about pixiplayground?   
    Then you should make those changes and PR them to the main repo, not deploy a separate parallel instance. I'd love to integrate the ability to handle l10n!
    Setting up and running your own instance is not something you need to do, especially if your not familiar with managing deployments like this.
     
    If you insist:
    Everything you would need to know about setting up a server to run the app on is here: https://github.com/englercj/playground/blob/9267471c869d1610339e8c7a175d322453b69dbd/server/droplet-setup.sh
    Environment configuration and how that gets setup is here: https://github.com/englercj/playground/blob/9267471c869d1610339e8c7a175d322453b69dbd/server/src/config.ts
  2. Like
    xerver got a reaction from Shahdee in Best way to track performance?   
    The Chrome timeline and CPU profiler are the best tools. They are much more granular than "animate takes most of the time" I recommend reading some tutorials on how to interpret their output.
     
    WebGL Inspector is also good for tracking down exactly what gl commands run and therefore performance issues.
  3. Like
    xerver got a reaction from labrat.mobi in Is there any way use jpeg with transparency or replace some color with transparency   
    Don't do that, you can use a canvas as the source for a texture directly:
    var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d');// draw, draw, drawvar texture = new PIXI.Texture(new PIXI.BaseTexture(canvas)), sprite = new PIXI.Sprite(texture);// add sprite somewhere in scene.
  4. Like
    xerver got a reaction from kuuuurija in Pixi.js Showcase   
    Hey all, just wanted to mention I've released a new app called Pixi Playground that allows you to create and share pixi demos!
    App: https://www.pixiplayground.com/
    Repo: https://github.com/englercj/playground
    Announce: https://twitter.com/rolnaaba/status/1037788610915782661


  5. Like
    xerver reacted to themoonrat in When to use Bitmap Text & Text?   
    It really depends on your needs. Bitmap text is faster to render, yes, because normal text requires generating and uploading a new texture to the GPU each time it changes. And every piece of text also requires it's own texture, which can mount up.
    But, as you say, normal Text gives you much more flexibility at runtime to create different styled text. And if you're supporting other languages, much easier to use normal Text than trying to create bitmap fonts for every character set.....
    So they both have strengths and weaknesses, so there is never a 'this is always the best one to use in all scenarios'.
    You can mitigate a Text weaknesses, for example, by generating all of the Text textures up front, avoiding the slowness of generating them as they're being rendered for the first time. It uses more memory, but maybe that's an acceptable trade off? Or have some fancy code so that if you have the same word and style in 2 places, you don't have 2 Text objects with their own textures, but they share the 1 texture? Or use textures from Text to create a dynamic atlas, which pixi-ui uses I believe.
    a rapidly updating high score object might rule out normal Text because the rapidly regeneration of the texture may cause performance issues. Or maybe not. Profile your own use case
  6. Like
    xerver got a reaction from Shahdee in Preload all textures?   
    No! Please don't encourage people to mix the loader and convenience methods. I spend half my time on this forum explaining why they don't mix well and why code is often broken when you try to mix them.
     
    Just use the loader values if you are using the loader. If you don't want to preload and want to just create a sprite from arbitrary string urls, then use the convenience methods. DON'T MIX THEM PLEASE!! It only works under very specific circumstances and most of the time will be broken or duplicate objects in memory. The two APIs are not related, using the loader to warm the internal texture cache for use with those methods is a hack and should not be used in production code. The texture cache for convenience methods is private and could change at anytime DO NOT RELY ON THIS BEHAVIOR.
  7. Like
    xerver reacted to shlajin in SVG to Texture off the main thread: how deep can I possibly go?   
    Got it, thanks once again!
  8. Like
    xerver got a reaction from jonforum in When loaded images begin to use GPU?   
    No. We don't upload the texture until the texture has been completely downloaded and we need to render a sprite that uses it (so it is in the stage). The first time we encounter a new texture on a render pass is when it will get uploaded, there is no preallocation that happens.
    You can upload it manually if you need to like Ivan mentioned.
  9. Like
    xerver got a reaction from alextewpin in Can't figure out how to use filters   
    I threw a simple palette example together that hopefully can help you track down your issue: https://www.pixiplayground.com/#/edit/cJY98QTkz7yv7QQVp9jRN
    I create the map texture with a utility I wrote a long time ago, that I'm not even sure if it works anymore: https://github.com/englercj/paletter
    The original image, map image, and palette image that I use for the demo are in that repository as well.
  10. Like
    xerver reacted to alextewpin in Can't figure out how to use filters   
    @xerver thank you, I've already figured it out. However, your example is still really useful, and I will defiantly use parts of it in my code.
  11. Like
    xerver got a reaction from alextewpin in Can't figure out how to use filters   
    I threw a simple palette example together that hopefully can help you track down your issue: https://www.pixiplayground.com/#/edit/cJY98QTkz7yv7QQVp9jRN
    I create the map texture with a utility I wrote a long time ago, that I'm not even sure if it works anymore: https://github.com/englercj/paletter
    The original image, map image, and palette image that I use for the demo are in that repository as well.
  12. Like
    xerver got a reaction from garry in an efficient way to have large grid background   
    You can draw 1 tileable graphics object to a RenderTexture and use that in a TileSprite.
  13. Thanks
    xerver got a reaction from jonforum in Best performance way to extends a PIXI class ?   
    Fair enough, I would still remove the mix of es5 functions (.prototype.func = function () {}) and just use es6 functions. But it makes sense why you are using an IIFE.
    Just so you know, if you use a module system like CommonJS (require('...')) or ES6 Modules (import from '...') then the bundler (Webpack, Rollup, etc) will usually wrap each of the modules in an IIFE for you. If you are just concatinating js files together then you should keep the IIFE.
  14. Like
    xerver reacted to cmagoun in Separating Draw and Game State   
    Yes, I see that, and based on Ivan's example, I am no longer clearing the scene and then re-adding the sprites. 
    Instead, I am checking for entities that have been changed since the last frame, refreshing their sprite's properties (that is the "getSprite" call).
    I am still using add/removeChild at the moment, and the performance is fine right now because my scenes are small. I am unlikely to have 100s of moving sprites. My case is a turn-based board-gameish game, so maybe 20 things moving at the most? That means almost no entities are "dirty" in a loop, and I am thus only iterating over the 6 or so things that are moving at any given time. If my situation changes, I will roll up the children array as Ivan showed.
    Thanks again for the assistance,
    Chris
  15. Thanks
    xerver got a reaction from jonforum in Best performance way to extends a PIXI class ?   
    They are identical. The "class X extends Y" syntax was added into ES6 as just a syntax sugar for the second snippet you posted (which was ES5).
    However, you should simplify by removing the IIFE and not assigning to prototype:
    class ContainerData extends PIXI.Container { constructor() { super(); this.Sprites = {}; // others custom proprety for game obj } get d() { return this.Sprites.d } // return diffuse sprites get n() { return this.Sprites.n } // return normals sprites //TODO: spine normal are arrays createJson(dataValues) { } asignJson(dataValues) { } } No need for any of that wrapper code, if you are using ES6 then just use ES6.
  16. Thanks
    xerver got a reaction from drewbit in reusing texture with different frames   
    Because you are passing the same texture to every sprite you make. It doesn't make a copy, it just holds a reference. So you are changing the frame on the one texture instance in memory. Instead, make a new texture for each of your sprites:
    cells.forEach((row)=>{ row.forEach((col)=>{ // create sprite let frame = selectTerrain(col); console.log(frame); // The baseTexture is the image, we want to share that between every sprite. const baseTx = PIXI.loader.resources[terrainSource].texture.baseTexture; // The texture combines a baseTexture and a frame to create a view into our image. // Don't want to share this, so create a new one for each frame. const texture = new PIXI.Texture(baseTx, frame); let cell = new Sprite(texture); cell.x = col.x; cell.y = col.y; addText(cell, col.row, col.col); baseCont.addChild(cell); }); });  
  17. Thanks
    xerver got a reaction from jSwtch in Creating sprite from texture   
    generateTexture doesn't take a string. It takes a DisplayObject and creates a texture from rendering the object.
    Also, PIXI.Texture.fromImage is a function not a constructor. Don't call it with new. You should either do `new PIXI.Texture()` or `PIXI.Texture.fromImage()`, don't combine them.
    Textures don't render, sprites do. Textures are just images, sprites combine images (textures) with a transform to make it renderable.
    I bet all of them do, because you can't render a texture because it isn't a DisplayObject.
    They are not. Sprites are DisplayObjects, and they contain a reference to a Texture. Textures are a standalone object that cannot be rendered.
  18. Like
    xerver got a reaction from Siddi in Dispatch Events   
    Depends on what you want to test. If you want to test your code and assume the interaction manager works, then dispatch events from the interaction manager. If you want to test that the interaction manager works, and that your code works using it, then dispatch mouse events onto the canvas. The second is also more similar to what "a user would do".
  19. Like
    xerver got a reaction from ecsancho in Smaller textures help with performance?   
    Smaller textures take less time to upload to the GPU, and use less memory while there. The performance of *how fast* something renders is not related directly to the texture size, but instead to *what you are rendering*. For example, rendering a screen with 1024x1024 pixels is faster than a screen with 2048x2048 pixels because the fragment shader runs on less pixels. Its all about the shaders, and the viewport size, not necessarily the texture you use.
  20. Like
    xerver got a reaction from Pham Quoc Du Thien in Video Texture and controlling playback.   
    Source is a property of the base texture, not the texture:
    texture.baseTexture.source.pause();
  21. Thanks
    xerver got a reaction from b10b in Ray, Beam and Lightning Effects   
    Use a Rope: https://pixijs.github.io/examples/#/demos/strip-demo.js
    That example is basically mapping this texture across a length of points.
  22. Like
    xerver got a reaction from charlie_says in PIXI Loader handling failed loads   
    Depends on the asset. For example, if you need to load a map; and it fails, you can't play the game.
    Generally what I've done in the past is catch all asset errors and if the errors were ones that a retry might fix (like a timeout, or 503, or some such) then retry those at the end. If I get a fatal error like a 404, I just show an error to the user and exit.
  23. Thanks
    xerver got a reaction from caymanbruce in Is it possible to make a sprite based on a canvas texture which is changed by the system time?   
    We upload the texture to the GPU, we never draw to your canvas or even open a context on it.
  24. Thanks
    xerver got a reaction from caymanbruce in Is it possible to make a sprite based on a canvas texture which is changed by the system time?   
    It works fine when you call sprite.update(). You just forgot to clear your canvas when you drew to the canvas in your lightenGradient function.
    Working pen: https://codepen.io/anon/pen/mxyezY
     
  25. Like
    xerver got a reaction from xwz86 in Text.cacheAsBitmap=true cuts off the text   
    PIXI.Text is just a canvas that we drew the text to using the normal canvas 2d text drawing APIs, then we use the canvas as a texture for drawing to the WebGL context. Cache as bitmap is useful for deep trees of objects that you want to condense to a single (unchanging) texture. For example, setting cacheAsBitmap on a single sprite (or Text object) will have no benefit.