xerver

Members
  • Content Count

    1598
  • Joined

  • Last visited

  • Days Won

    15

Reputation Activity

  1. Like
    xerver got a reaction from Kraghen in PIXI.loader.resources or TextureCache   
    Dont do this:
    let e = PIXI.utils.TextureCache[player.img]; Instead use the resources the loader loaded for you:
    let e = PIXI.loader.resources[player.img].texture; The error you get is because `PIXI.utils.TextureCache[player.img]` doesn't exist, this is happening because you are calling setup manually:
    PIXI.loader.add(player.img).load(setup); setup(); You pass it in as a callback, then immediately invoke it manually. Don't do that, just pass it in as a callback and the loader will call it when loading has completed (asynchronously).
  2. Like
    xerver got a reaction from ivan.popelyshev in loading series of base64 images with PIXI.loader   
    A running playground that reproduces this problem would be really helpful for trying to track down what is going on here. You can choose the pixi version using the "settings" button to get your exact version.
  3. Like
    xerver reacted to JoakimCh in Need guidance on how to do some low level GL operations   
    Hello,
    My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out).
    Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method)
    I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code):
    renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() {   let tex = resources['test'].texture   let imgData = new Uint8Array(32*32*4)   renderer.TextureSystem.bind(tex)   renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData)   renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used.
    I also want to read the previous data and change it, I figured it can be done with:
    gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first...
    Hence I tried to also use the PIXI.systems.FramebufferSystem, lol:
    renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...?
    Maybe there should be some Pixi.js functions to do this?
    Maybe something similar to this:
    texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post  I don't have much Pixi.js experience yet, but I really like it.
  4. Like
    xerver got a reaction from themoonrat in Request to moderator to stop cyberbullying in the forum.   
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well.
    Let's all be adults about this, acknowledge we did something wrong, and move on.
    @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it.
    When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  5. Like
    xerver got a reaction from bigtimebuddy in Request to moderator to stop cyberbullying in the forum.   
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well.
    Let's all be adults about this, acknowledge we did something wrong, and move on.
    @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it.
    When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  6. Like
    xerver got a reaction from ivan.popelyshev in Request to moderator to stop cyberbullying in the forum.   
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well.
    Let's all be adults about this, acknowledge we did something wrong, and move on.
    @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it.
    When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  7. 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
  8. 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.
  9. 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.
  10. 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


  11. 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
  12. 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.
  13. Like
    xerver reacted to shlajin in SVG to Texture off the main thread: how deep can I possibly go?   
    Got it, thanks once again!
  14. 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.
  15. Like
    xerver got a reaction from ivan.popelyshev 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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
  21. 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.
  22. 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); }); });  
  23. 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.
  24. 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".
  25. 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.