Popular Content

Showing content with the highest reputation since 06/30/20 in Posts

  1. 2 points
    If anyone is interested, I solved this by importing the json file and then using the Spritesheet class, as per this thread https://github.com/pixijs/pixi.js/issues/4029 import mySheetData from '../mySheet.json'; ... startLoad(){ this.loader.add('main',mySheetData.meta.image); this.loader.on('complete',this.loaded.bind(this)); this.loader.load(); } loaded(){ let mySheet=new PIXI.Spritesheet(this.loader.resources.main.texture.baseTexture,mySheetData); mySheet.parse(() => { myResources=mySheet.textures; }); } ... this.background=new PIXI.Sprite(myResources["background.png"]);
  2. 1 point

    WebTransport & WebCodecs

    A status update on WebTransport and WebCodecs: - The creation of a WebTransport Working Group is under review at W3C until end of July 2020. The group would be tasked to standardize the WebTransport API. - The shape of the WebCodecs API is actively being discussed in the WICG/web-codecs GitHub repository, including discussions such as whether to follow WHATWG Streams (current approach is to rather decouple WebCodecs from Streams), or whether to have a synchronous option for encoding/decoding.
  3. 1 point
    Ah okay, that makes perfect sense, I do have filters included. I will look into using the Layers, I had hoped to not need them but it seems the time has come! Luckily I have spent enough time working with PIXI v5 to be able to easily add in the Layers plugin. Thanks for your help and quick responses! Rarely had any issues with PIXI and generally can find the solution fairly easily. Perhaps worth noting this issue somewhere, perhaps in a v5/v4 "Gotchas" section, I have spent probably 20 hours researching this issue, pulling code apart and trying various "solutions" but failed to ever find the cause. Also massive sidenote - I attempted to update to 5.3 from 5.2.4 and all my avatar rendering disappeared, didn't look into the problem at all (unfortunately) as I was too stressed with this issue! Once I've moved onto using layers and got my code back to working order I will retry and see if I can replicate the problem. Thanks once again!
  4. 1 point
    > add all sprites directly into the primary container Oh right, you have something with a mask or filter on top, right? That's when ADD cant work because its actually rendered into separate texture that has no background Remove mask/filter and it should work fine. Because you stumbled across the problem of layering, I'm obligated to advice to look at demos https://pixijs.io/examples/#/plugin-layers/lighting.js and https://pixijs.io/examples/#/plugin-layers/bringToTop.js . Two things you haev to consider: 1. masks and filters render all the contents of container in separate texture, then this texture is rendered on screen with special shader. blending with background wont work there 2. zIndex works only inside containers, and in case you want it to work through the tree, you have to learn how pixi-layers plugin works, otherwise you'll have to manually put them in containers according to render order , and that will make your architecture difficult.
  5. 1 point

    WebGPU, will it replace WebGL?

    This will depend on advancement on the technical specifications and on their adoption by brower vendors and device manufacturers, but that is indeed the goal. WebGL is derived from OpenGL and is thus restricted to features that OpenGL supports. WebGPU builds on newer GPU system APIs and is also designed to be agnostic of the underlying platform technology (meaning it can be directly implemented on top of platforms such as Microsoft's Direct3D 12, Apple's Metal, and Khronos's Vulkan). Standardization-wise, the WebGPU API and WebGPU Shading Language specifications are actively being developed in the GPU for the Web Community Group. The documents should soon enter the usual web standardization process in a GPU for the Web Working Group, whose creation is currently under review within W3C.
  6. 1 point
    Sprite is lightweight, just change its texture.
  7. 1 point
    > Do you think ~3gb would be too much for some users Definitely. 700MB is big amount on its own. Yes, if you make 2x less area, it will take 2x less space. Think if you can actually use compressed textures too - but it depends on the type of your alpha. 1. try pack an atlas to DDS (dxt5) and see the difference 2. for DDS-ed atlas, make sure texture packer uses x4 coord divisor , because if an animation frames have different offset modulo 4 - artifacts will be animated . Its 16 bytes per 4x4 pixels, that's why.
  8. 1 point

    New Pixi Loader

    resources.add('tex', url, {crossorigin: '*'}); ... resources['tex'] This should help
  9. 1 point

    New Pixi Loader

    never mind
  10. 1 point
    I'm using Texture Packer to create spritesheets and then loading them from the .json file. Like this: this.loader.add('main','./ims/mySprite.json'); ... let myResources=this.loader.resources.main.textures; ... let myBackground=new PIXI.Sprite(myResources["background.png"]); let myButton=new PIXI.Sprite(myResources["button.png"]); However, I have a dozen or so different sprites that load at different times and I don't want to have to load a json file for each one. I think it makes more sense to just load the images and then keep the frame data in the javascript, as an object that is passed to the loader. Basically, copy paste the json file into my JS. Something like this: const myData={ "meta":{ ... }; this.loader.add('main',myData); Is it possible to do this? As an alternative, would it be advisable to load the image and then dynamically create a Texture for each sprite? Something like this: this.loader.add('main','./ims/mySprite.png'); ... let myResources=[]; let titleRect=new PIXI.Rectangle(1,1,800,550); let backRect=new PIXI.Rectangle(1,925,363,76); myResources['title']=new PIXI.Texture(this.loader.resources.main.texture.baseTexture,titleRect); myResources['background']=new PIXI.Texture(this.loader.resources.main.texture.baseTexture,backRect); ... let myBackground=new PIXI.Sprite(myResources["background"]); This seems to work, but I'm concerned that this isn't the correct way to do it, or perhaps that this will miss out on some optimizations that PIXI does.
  11. 1 point
    I wonder when are the textures uploaded to the gpu, this is my understanding so far: This happens in `TextureSystem`'s `bind` method, which is called in `Prepare` plugin's `uploadBaseTextures` method. This is registered via `registerUploadHook`, which is in turn called in `prepareItems`, that is called from tick method. `tick` method is registered to be called in `upload` method. Now I don't know when this `upload` method is called from. Is this even correct information?
  12. 1 point
    That's right. `bind()` makes texture actual. uploads, updates properties, e.t.c. You can even override resource `upload()` method to make your custom webgl texture uploading logic: https://pixijs.io/examples/#/textures/gradient-resource.js Usually bind() is called when sprite with this texture is being rendered, somewhere inside "renderer.render()", but with prepare plugin you can do it before your game starts. You can also manually call bind() on all texture if you have a list.
  13. 1 point
    Hi all, Please check out Space Battle game, basically I used sea battle mechanics for single player in space setting. Made with VueJS, no canvas used - animation and isometric grid is made with CSS. Link to the game 👇 https://chpockrock.itch.io/spaceranger
  14. 1 point

    The COVID-19 Game

    Approved with some smart renaming 👍🥳
  15. 1 point

    The COVID-19 Game

    Google Play appeal approved! The app may be found at the same URL, https://play.google.com/store/apps/details?id=com.customautosys.viralgame
  16. 1 point


    Please use this topic to discuss WebAssembly.For more context, please refer to this page: https://www.w3.org/2018/12/games-workshop/report.html#wasm