Search the Community

Guys, We recently have new requirement that we need to save the content we rendered with pixi.js to image file like PNG. The canvas's toDataURL method worked well at first, however we need more than that. The content (a diagram) could be zoomed and the canvas only shows part of that diagram at the time we save the image. Also, if we zoom out and try to capture the whole diagram, the output diagram seems not so crisp, or sharp. Hope I've made my self clear. So, my question is whether their is a way to export the whole content image with desired resolution? BR, Yeling

I'm starting to use recently pixijsv6.5.0 and I can't put an image in the graphics when click on, but I can change the color by .tint graphics.tint = swapS ? '0x00ff00' : '0xff0000'; Repository: https://github.com/DevAndreAkira/jogo_velha/blob/master/js/script.js How can I use image in place of colors?

I created an app using PixiJS. I set height and width for the PIXI.Application. I added containers which are having the graphics relevant to my application. When I draw those graphics some of them are go beyond the boundary limit of the application. When I render the application it's totally fine. Only the application area get rendered without the graphics which drew beyond the boundary limit of the app. Though when I get an image from the application using the following code, the graphics which drew beyond the boundary limit of the application are also available in that image. this.pixiApp.renderer.plugins.extract.image(this.pixiApp.stage, 'image/jpge', 1) How can I download an image only containing the graphics which are available within the app boundary limit.

Hello there I’ve built a map with Tiled with a tileset built from an images collection. So, I would to know how to load this tileset in my scene? Here where I am in my code work: export default class PreloadLevel1 extends Phaser.Scene { //... preload() { for (let i = 1; i < 101; i++) { const num = i.toString().padStart(3, '0'); this.load.image('objects' + num, 'assets/img/tiles/objects' + num + '.png'); this.load.image('tiles' + num, 'assets/img/tiles/tiles' + num + '.png'); } this.load.tilemapTiledJSON('tileset', 'assets/json/levels/level1.json'); } //... } export default class Level1 extends Phaser.Scene { //... create() { this.tilemap = this.make.tilemap({ key:'tileset' }); for (let i = 1; i < 101; i++) { const num = i.toString().padStart(3, '0'); this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'objects' + num)); this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'tiles' + num)); } //... } //... } But I finish with the warning in my console: No data found for Tileset: tileset Here an extract of my level1.json file: "tilesets":[ { "columns":0, "firstgid":1, "grid": { "height":1, "orientation":"orthogonal", "width":1 }, "margin":0, "name":"tileset", // <----- there "spacing":0, "tilecount":173, "tileheight":64, As you can see, the name of my tileset is right. And another extract of this same file to see you how my tiles array is built: "tiles":[ { "id":404, "image":"..\/..\/img\/tiles\/objects001.png", "imageheight":17, "imagewidth":13 }, { "id":405, "image":"..\/..\/img\/tiles\/objects002.png", "imageheight":19, "imagewidth":20 }, { "id":406, "image":"..\/..\/img\/tiles\/objects003.png", "imageheight":35, "imagewidth":22 }, { "id":407, "image":"..\/..\/img\/tiles\/objects004.png", "imageheight":40, "imagewidth":43 Is somebody to help me?

i want to make it in a new way rather than the defualt way of load spriteSheet. I want to load an image using ( uri,url ). Is this possible? this.load.spritesheet('item', 'essets/items/item.png', { frameWidth: 32, frameHeight: 64, }) => this.load.spritesheet('item','https:///image.shutterstock.com/image-illustra23tion/img-file-document-icon-trendy-260nw-1407027353.jpg',{ frameWidth: 32, frameHeight: 64, })

For some reason the following code isn't working. I've created all the tilesets, keys and images are correct and nothing is erroring in the console log preload this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); create const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') The assets are loading in fine too, but I haven't added a map before using tilesets so not sure where I could of gone wrong. The image also loads in fine when adding that in so I figured it might be something to do with the following JSON file. { "compressionlevel":-1, "height":20, "infinite":false, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":20, "id":1, "name":"ground", "opacity":1, "type":"tilelayer", "visible":true, "width":25, "x":0, "y":0 }], "nextlayerid":2, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.7.2", "tileheight":32, "tilesets":[ { "columns":3, "firstgid":1, "image":"..\/..\/Documents\/sprites\/tileset2.png", "imageheight":96, "imagewidth":96, "margin":0, "name":"newest", "spacing":0, "tilecount":9, "tileheight":32, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":"1.6", "width":25 } I'll add the full code here for anyone to look over class Level1 extends Phaser.Scene { constructor() { super({key: "Level1" }); } preload () { this.load.aseprite('alco', 'assets/animations/StrongAlc.png', '../assets/animations/StrongAlc.json'); this.load.aseprite('chef', 'assets/animations/alcochef.png', '../assets/animations/alcochef.json'); this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); } create () { this.width = 800; this.height = 640; const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') let playerPoints = 0; this.keyF = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F); this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D); this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); this.anims.createFromAseprite('chef', [ 'idleburp', 'standingattack', 'jump', 'run' ]); this.anims.createFromAseprite('alco'); this.alco = this.physics.add.sprite(this.width/2, (this.height /2) -50, 'alco'); this.chef = this.physics.add.sprite(this.width/50, this.height/2.5, 'chef'); this.chef.body.setCollideWorldBounds(true) this.physics.add.collider(this.chef, this.ground) this.chef.sideFacing = 'right' this.chef.moving = false; function colliderAlco(sprite) { playerPoints ++ console.log(playerPoints) // destroySprite(sprite) } this.physics.add.collider(this.chef, this.alco, colliderAlco(this.alco)) this.alco.play({key: 'rotatinglabel', repeat: -1}) // var frameNames = this.textures.get('chef').getFrameNames(); this.chef.play({key: 'idleburp', repeat: -1, ignoreIfPlaying: false}) } update() { if(this.keyF.isDown) { this.chef.play({key: 'standingattack', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyD.isDown) { this.chef.play({key: 'run', repeat: -1, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(100); this.chef.flipX = false if(this.chef.facing === 'left') { return this.chef.facing === 'right' } } if(this.keyW.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyA.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(-100); this.chef.flipX = true if(this.chef.facing === 'right') { return this.chef.facing === 'left' } } } } function destroySprite(sprite) { sprite.destroy(); } export default Level1; This is the index.js import Phaser from 'phaser' import Level1 from './scenes/level1' var config = { type: Phaser.AUTO, width: 800, height: 640, physics: { default: 'arcade', arcade: { debug: true, gravity: {}, } }, scene: [Level1], scale: { zoom: 1, } }; var game = new Phaser.Game(config);

Hello everyone! Maybe someone has experience and can share with it. The question is how you guys croping media content inside PIXI Application. I have a lot of different stock video and images with different sizes. User can choose aspect ratio of final result: landscape (1920x1080), square (1080x1080), vertical (607,5x1080). The size of main container always is 1920x1080. Also there should be good resolution, let`s say: PIXI.settings.RESOLUTION = 2; I made some images to demonstrate how I want to make it. For example, user can choose vertical ratio and with horizontal hd video (or hd image) - so video (image) should be cropped, and around this video (image) should be for example black (or can be else) color. My code is: const video = some_json_data; const videoContainer = document.getElementById('videoContainer'); switch (video.aspectRatio){ case "square": vw = 1080; vh = 1080; break; case "landscape": vw = 1920; vh = 1080; break; case "vertical": vw = 607.5; vh = 1080; break; default: break; } const bgColor = '0x000000'; PIXI.settings.RESOLUTION = 2; app = new PIXI.Application({ width: vw, height: vh, backgroundColor: bgColor, }); videoContainer.appendChild(app.view); const renderer = PIXI.autoDetectRenderer({ width: vw, height: vh, resolution: 2 }); renderer.view.style.width = `${vw}px`; renderer.view.style.height = `${vh}px`; // create the root of the scene graph const stage = new PIXI.Container(); app.stage.addChild(stage); videoBg = PIXI.Texture.from(videoUrl); videoSprite = new PIXI.Sprite(videoBg); const videoController = videoSprite._texture.baseTexture.resource.source; app.stage.addChild(videoSprite); videoBg.baseTexture.resource.source.loop = false; videoBg.baseTexture.resource.autoPlay = false; // Width videoSprite.width = vw; videoSprite.height = vh; // move the sprite to the center of the screen videoSprite.alpha = 1; videoSprite.anchor.set(.5); videoSprite.x = app.screen.width / 2; videoSprite.y = app.screen.height / 2; app.ticker.add(function () { // render the stage renderer.render(stage); });

The most prominent method for loading textures seems to be the .fromImage functions, which use URLs. What if I have a raw image source, but no URL (like an image generated inside the app). How would I go about making a texture out of that?

I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. HTML: <body> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section" section> <img src="book5.png"> </article> </main> <section class="one"> </section> JS: const sectionTag = document.querySelector('section') const articleTags = document.querySelectorAll('article') const bodyTag = document.querySelector('body') const pixels = window.pageYOffset const pageHeight = bodyTag.getBoundingClientRect().height let originalImage = null let originalImageSource = null sectionTag.innerHTML = '' // Set up a pixi application const app = new PIXI.Application({ width: 2000, height: 2000, transparent: true }) // Add the pixi application to the section tags sectionTag.appendChild(app.view) // Make image equall nothing let image = null let displacementImage = null let displacementImage2 = null // Make a new loader const loader = new PIXI.loaders.Loader() // Load in our image loader.add('image', originalImageSource) loader.add('displacement', 'displacement3.jpg') loader.add('displacement2', 'displacement1.jpg') loader.load((loader, resources) => { // Once the image has loaded, now do this image = new PIXI.Sprite(resources.image.texture) displacementImage = new PIXI.Sprite(resources.displacement.texture) displacementImage2 = new PIXI.Sprite(resources.displacement2.texture) image.width = 2000 image.height = 2000 image.interactive = true image.anchor.y = -0.1 displacementImage.width = 1000 displacementImage.height = 1000 displacementImage2.width = 1000 displacementImage2.height = 1000 displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT image.filters = [ new PIXI.filters.DisplacementFilter(displacementImage, 200), new PIXI.filters.DisplacementFilter(displacementImage2, 50) ] // Add the image to the app app.stage.addChild(image) app.stage.addChild(displacementImage) app.stage.addChild(displacementImage2) // add rotation app.ticker.add(() => { displacementImage.x = displacementImage.x + 0.5 displacementImage2.x = displacementImage2.x - 0.5 }) }) articleTags.forEach(article => { document.addEventListener("scroll", function () { if(article.offsetTop - 200 <= pixels){ originalImage = article.querySelector("img") originalImageSource = originalImage.getAttribute("src") } }) })

Hi I want to know the Application for sprite creation for 2d games.Which one is good in quality wise and size also.Any idea about this please share with me.

There is an IMAGE game at https://www.html5pcode.com/a1yimageoptions.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in JavaScript and/or a JS framework. This p-code lends itself to teaching coding because the source and object code are the same. The engine that created the code (source-code) is the same engine that executes the code (object-code). This makes it possible to do the following options. A DATA OPTION allows you to view the game's data, while the game is running. A TRAIL OPTION allows you to execute a few instructions at a time, so you can see what each routine is doing. A REAL TIME (RT) OPTION allows you to change instruction values, while the game is running. The YouTube videos show how these options are used in the designing of the game. There are many other games written in this p-code at https://www.html5pcode.com

Hi everyone, I have a question, I think there maybe a question like mine posted somewhere, I tried to find but can't have a good answer. In my scene, I have a lot of picture, I use Sprite.fromImage to load those picture instead of PIXI.loader because my pictures don't load at the first time. Because of many pictures, so my scene has very low FPS, I think it probably because I load directly raw picture from path. Does anyone know can advise me anyway to fix this. Thank you!

What property do I need to use to crop an image? I feel I must be missing something utterly obvious, but without any docs I'm a bit lost. I adding an image from a loaded texture thus: - this.add.image(x, y, image); The image is (say) 64 x 64 pixels, but I want to only display 32 x 32. Whatever property I set, it either has no effect at all, or it scales the image instead of cropping it. Could someone point me to the right property please?

Hi, I wanted to try the latest preview release, but my IDE says that "Image" does not exist on type "typeof GUI". By looking at the available types from the GUI, the IDE suggests GUIImage, so I replaced everything with GUIImage. Now I get a console error in my browser, saying "TypeError: BABYLON.GUI.GUIImage is not a constructor". I get the same error on the playground, which btw also suggests GUIImage. By looking at the source code, I think this was intentional, but it isn't mentioned in the what's new file for the preview release. You can see the error on the playground https://www.babylonjs-playground.com/#K60448#22 Is this a bug, or do I need to change something else to get it working? Thanks.

Hi everybody, I have a plane with material and diffuseTexture. The image used for the texture is a png with transparent background. In order to keep the transparent background in babylon, I set useAlphaFromDiffuseTexture = true; on the material. But now I want to see the shadow of the image. But I cant because of the useAlphaFromDiffuseTexture parameter. So my question is : Is there a way to have the shadow of my png image following the transparent and not transparent part? Thanks for your help! Pichou

Hello, I have to control depth of meshes with alphaIndex in my situation. but when meshes are over 10, rendering gets strange. https://www.babylonjs-playground.com/#BTU1J7#1 need your help. thanks.

Hi all, I need to display a large image and dynamically hide sections of it. I already use masking to specify which parts should be displayed. The code I use to achieve this is in the form: this._topMask = game.add.graphics(0, 0); this._topMask.drawRect(0, 170, game.width, vm.ActiveGameHeight - 320); this.defaultGroup.mask = this._topMask; This is useful in that it gives me a rectangle within which the image renders. Now I need to dynamically block sections of that rectange and create areas that are not rendered. Ideally, I would like to be able to create masks similar to the image below. I cannot use presaved images because the position of the rectangles change dynamically. What is the most performance optimised way to achieve this in Phaser? (I am on version 2.4.4)

I'm getting a struggle here with images and dropzones. I want to check if an image fits exactly into a dropzone. If not then the image returns automatically back to its original place (gameObject.x = gameObject.input.dragStartX; gameObject.y = gameObject.input.dragStartY; ) How can i check if x and y of the image is the same with the dropzone? The above code is not working if ((gameObject.x != dropZone.x) && (gameObject.y != dropZone.y)){ gameObject.x = gameObject.input.dragStartX; gameObject.y = gameObject.input.dragStartY; }

I'm having a hard time trying to do something that should be quite straightforward, so I'm not sure what I'm missing. How do we scale an image (to use as a game background) to fit the window? This is my approach, which doesn't work: preload() { this.load.image('bg', 'space3.png'); } create() { const bg = this.add.image(0, 0, 'bg'); bg.width = window.innerWidth; bg.height = window.innerHeight - this.parent.canvasOffset; // I would like to use this.game.width and this.game.height but those values don't exist } If I use bg.scaleX and bg.scaleY and set the values to 2.0, it does work, but what I want is to scale it to fit the window/viewport.

Does anyone know where to find the fileformats PixiJS supports? Or is the support simply the same as the browser support for file formats? To be more specific: does PixiJS support the WebP fileformat? It would be great if it did, since WebP offers better and higher compression than PNG and JPG.

Hi, I have image in cache on which multiple sprites are based like this: a = game.add.sprite(0, 0, "image"); b = game.add.sprite(0, 0, "image"); Now: I want to change the underlying image's data like e.g. this (notice the "image" as argument to generateTexture): game.cache.getBitmapData("somedata").generateTexture("image") This fails at runtime. According to what I've found out so far, I have to do it like this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); b.loadTexture("image"); }) The question is: is this achievable via more elegant way? The main problem I have with this is I have to keep track of every sprite that's based on "image", because this: game.cache.getBitmapData("somedata").generateTexture("image", function(texture) { a.loadTexture("image"); // b.loadTexture("image"); }); also fails at runtime. Isn't this somehow covered by what Phaser already offers? Thx in advance.

I'm looking at switching away from CreateJS, but I've got one snag I need to resolve before I can feel comfortable making the switch. I build my JS applications using Webpack, and one of the features I take advantage of is asset bundling. Webpack will bundle things like images or text files into JS files that can optionally be asynchronously fetched. Depending on my target platform, I can either release an all-in-one JS file, or I can release a main file with bundles that can be loaded asynchronously when needed (such as when loading the level they're used in). What this means is that my app already has data urls for images and raw text or parsed DOM data for things like XML files. I don't need PIXI to make requests for these, but I do need PIXI to use that data. This leaves me with two questions: CreateJS will let me create Image objects from data urls. Is PIXI able to accept data urls when creating Textures or when making fromImage calls? CreateJS exposes a BitmapFont object. I can pass a png and fnt pair and get back an assembled bitmap font. I don't see an equivalent in PIXI. It looks like the only way to load a font is using PIXIs loader, but that doesn't work for me because my font assets are already in the browser. I don't need PIXI to make an XHR request to fetch the files. I just need it to accept the data I've already loaded and create the font. Is there a way to do this? Thanks.

I have this simple game for small children that consists on several images that when tapped should produce a sound. I got it working on the computer (mouse click) but not on mobiles (finger tap) and I suspect that's because I am listening to the wrong event. Could someone tell me how to listen to a image "tap"? My current working code for computers is: // I am adding the functions and listeners dynamically with a // loop so aAssets is an array containing the image elements // enable input window[aAssets[i]].inputEnabled = true; // create the function to be triggered by the listener window['lst'+aAssets[i]] = function (me) { alert (me.key); } // add the respective listener window[aAssets[i]].events.onInputDown.add(window['lst'+aAssets[i]], this); PS: I found the events "onDown" and "onTap" and tried them but both causes an error when added. Thanks!

I was not able to reproduce this in the playground. Does anyone have any idea what could be causing this darkening effect on the GUI text? The GUI text is drawn on planes and the GUI image below it is about 5 units away. Also, the image is a svg, but I also tried with png and the same thing happens. The scene also has fog... and a clear color of that blue on the background. If I rotate the camera, the text will randomly lightup/darken on certain parts of the GUI image below it even though they are far apart on the Y plane. Could this be a bug?

I am trying to test out persistence of objects--at the moment an image, but eventually a group that will be a UI component. Right now, my image that I want to persist ("persist") goes from State1 to State2 just fine, but when I go back to State1, it disappears and I get an error ("uncaught typeError: cannot read property 'compressionAlgorithm of null in Phaser.js" and then points to a bunch of pixi.webgl render locations) Why is the item disappearing if it's been added to the stage, and how do I overcome this problem? Here is the code for State1: var state1 = { preload: function () { this.load.image('persist', 'persist.png'); this.load.image('btn', 'btn.png'); }, create: function () { this.persist = game.add.image(this.world.centerX, this.world.centerY, 'persist'); this.game.stage.addChild(this.persist); this.btn = this.add.image(200, 200, 'btn'); this.btn.inputEnabled = true; this.btn.events.onInputDown.add(this.changeState, this); }, changeState: function() { this.state.start("state2"); } And then State 2 is just taking us back to state1 on clicking the button var state2 ={ preload: function(){ this.load.image('btn', 'inventory/btn.png'); }, create: function(){ this.btn = this.add.image(200, 200, 'btn'); this.btn.inputEnabled = true; this.btn.events.onInputDown.add(this.changeState, this); }, changeState: function(){ this.state.start("state1"); } }; Thanks in advance