xerver

Members
  • Content Count

    1,584
  • Joined

  • Last visited

  • Days Won

    12

xerver last won the day on September 16 2016

xerver had the most liked content!

6 Followers

About xerver

  • Rank
    Pixi.js Moderator

Contact Methods

  • Website URL
    http://github.com/englercj
  • Twitter
    rolnaaba

Profile Information

  • Gender
    Male
  • Location
    USA

Recent Profile Visitors

3,283 profile views
  1. Yeah the other process would write the files and the main process will pick them up. Pixi doesn't natively support dds, you will need to use a plugin (like pixi-compressed-textures). I have no recommendations for DDS serializers in JS, or rasterizers.
  2. You can store them as an uncompressed bitmap, but PNG is completely fine. The decode time from PNG -> bitmap is usually OK. If you want to avoid that time you can store them as dds or something similar to get some compression, but skip the decoding step that the browser would have to perform. The performance benefit you get is just being able to skip your rasterization step. I bet that PNG -> bitmap by the browser is much faster than your SVG -> bitmap raster.
  3. I would build the images on a separate thread and write them to disk, then the main thread loads them from disk. That way next time you launch you don't need to convert them again, just load the already converted files from disk. If possible, you can even do this at build time and ship the images in the built format.
  4. xerver

    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.
  5. xerver

    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.
  6. xerver

    an efficient way to have large grid background

    You can draw 1 tileable graphics object to a RenderTexture and use that in a TileSprite.
  7. xerver

    How to make Text seletable in PIXI v4?

    There is no built-in way to do this, you would have to manually handle the input and draw a highlight. Or use DOM.
  8. Best place to start is the profiler, what is taking 15ms? Can you make a playground example?
  9. xerver

    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.
  10. xerver

    Separating Draw and Game State

    To answer your original question: Yes, adding/removing all your sprites every frame is expensive. Instead, track state and only change the minimum amount you have to. If a sprite exists between two frames, then it shouldn't be removed then added again. Ivan's example was to show you he isn't changing the scene tree at all unless he needs to. When something dies, it gets removed. When it is new, it gets added. Otherwise, no change.
  11. xerver

    FPS Drop on setting object properties

    Have you profiled it? Without profiling, you are just guessing as to what is taking your time. I seriously doubt that object property lookup is your bottleneck.
  12. xerver

    Best way to extract a very large container/sprite

    Sure, you can use SVG or DOM elements instead. Using SVG makes it really easy to export as well, you just save the SVG as a file. Or have a server rasterize it and send them a PNG.
  13. xerver

    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.
  14. xerver

    forceCanvas property of PIXI.Application having no affect.

    It does, but you need to use the pixi.js-legacy bundle which includes the canvas plugin.
  15. xerver

    CanĀ“t manage AnimatedSprite to work

    OK, so the reason this fails to parse the spritesheet data is because it doesn't detect that this URL is json. It fails because it uses the extension to see if it is json, and the url in your playground doesn't have a json extenion. After I update it to specify manually to treat it as json it works as expected in terms of loading. There is still an error because the SpritesheetParser is pixi doesn't find any animations in your json data, it is looking for an "animations" property which doesn't exist in your json data. Hopefully this helps! I updated your playground to specify JSON as the XHR load type: https://pixiplayground.com/#/edit/uX4ioEwjSYJS0bpMTATk7