opd

Members
  • Content Count

    5
  • Joined

  • Last visited

  • Days Won

    1

opd last won the day on July 1

opd had the most liked content!

About opd

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. opd

    help with this?

    If you just mean the picture of the woman's face with the mouseover effects, then you don't need PIXI or even Canvas. Just use CSS or simple Javascript with different images.
  2. opd

    New Pixi Loader

    Hi Huanzyz, I'm also currently in Vietnam, so happy to help. There are a few problems with your code: The file type here is .pnj when it should be .png const url = "http://deelay.me/2000/https://66.media.tumblr.com/avatar_d319f37438d5_128.pnj"; In your Application declaration, you don't need a comma after the last item. It should be like this - note, no comma after transparent. const app = new Application({ width: 1000, height: 600, transparent: true }); Finally, as Ivan showed, url shouldn't be inside the { }. Only crossorigin should be and you don't need a comma at the end either . Like this: loader.add(url,{crossorigin: 'true'}) .load(); Also, as Ivan said, it's good to use an ID in your loader.add, which you then reference in the Sprite: loader.add('tex',url,{crossOrigin: 'true'}) .load(); ... const image = new Sprite(resources['tex'].texture); See attached for the full file. canvas (1).html
  3. 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"]);
  4. 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.
  5. Hi, I recently switched from using CreateJS to PIXI and am quite unsure about best practices and typical ways of doing things. I'm have a web app with a bunch of different JS files: pixi.js, greensock, howler and about 20 of my own. Is it recommended to bundle everything into one big index.js file? Webpack recommends against this as it comes out at more than 500kb. So, what do you usually do? Load each of the libraries separately and then have one index.js for everything else?