• Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by xerver

  1. xerver

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

    I want to ask some usage about pixiplayground?

    Hello, npm contains all the dependencies needed to build and run locally. To run on the server in "production" mode there is a lot more involved (MySQL and CloudFlare integration for example). I have automated scripts for setting up a server, but you still need to build them yourself and make all the configuration. Why are you trying to publish a separate version of the playground app? If you are trying to share a playground with someone, just make it and save it on the live site: https://www.pixiplayground.com/#/edit
  3. xerver

    Best way to draw rectangle with border

    Are you encountering a performance issue with the method you are using?
  4. If you are using ES6 then extend the class using ES6: export class CustomSpriteClass extends PIXI.Sprite { constructor(imageURL) { super(Texture.fromImage(imageURL)); } } If you have to use ES5 the proper way to extend a constructor is: function CustomSpriteClass(imageURL) { PIXI.Sprite.call(this, Texture.fromImage(imageURL)); } CustomSpriteClass.prototype = Object.create(PIXI.Sprite.prototype); CustomSpriteClass.prototype.constructor = CustomSpriteClass;
  5. xerver

    Question about containers relative positions

    I think you are looking for getBounds(): http://pixijs.download/release/docs/PIXI.Container.html#getBounds
  6. The correct way to implement this would be through a proposed "subresource options" feature (https://github.com/englercj/resource-loader/issues/98) and the addition of a Resource-specific option for appending a query string. If you have better ideas for how this should work, please add them to: https://github.com/englercj/resource-loader/issues As always PRs are welcome for additional features that make your life easier.
  7. xerver

    Drawing Images onto a PIXI.Graphics obj

    http://pixijs.io/examples/#/basics/render-texture.js For next time, prefer opening a new thread to reviving a 3 year old one
  8. xerver

    Pixi.js only on desktops?

    Conditionally load the pixi.js file and the code that draws your graphics based on some JS on your page that does your detection?
  9. xerver

    Loading font using pixi loader

    The loader only sends an XHR request for font files. Without a repro page, I am unable to comment on what is happening.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. Best place to start is the profiler, what is taking 15ms? Can you make a playground example?
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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
  25. xerver

    Can´t manage AnimatedSprite to work

    The error looks like PIXI.loader.resources doesn't contain an entry for the sheet you loaded. Can you inspect the PIXI.loader.resources object when you are in the setup function? I'd be happy to dig further if you can make a running example of the issue happening. Should be easy to make a https://pixiplayground.com/#/edit that reproduces your issue.