Search the Community

noticing lately that certain .png assets for my game are appearing somewhat blurry in google chrome. i think it began in chrome version 93. what i'm doing now is downgrading to version 92 in order to test play, but every time chrome opens it wants to automatically upgrade to a newer version (ver 93 or 94 as of this posting). my index.html uses some image sharpening css, which i suspect may have something to do with it. they look something like this: <style> * { cursor: none; cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: optimize-contrast; image-rendering: -webkit-optimize-contrast; image-rendering: optimizeSpeed; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; margin: 0; transform: translateZ(0); } </style> any advice on how to unblur things would be appreciated. i'm sure it has nothing to do with any new lines i've added, because i haven't added any, and am also test playing a version of my game which looked sharp in ver 92 and older.

Hello PIXI community! let image = PIXI.Sprite.from("imagePath"); I don't use loader for creating images and I pass this to a module where I need to get the real width of the image, but I get the width equal to 1 as I don't use loader (Hope I get this part right). So I used loader to get the real width but I got problems with passing the image to module as the image is used in setup function that is passed to loader. English is not my native language. Hope this makes sense)) So how do I create an image outside of the module and pass it to use it's width?

Hi, I am new to coding and phaser 3. Here is what I am trying to do- I am have a world map that is draggable, and I want to add markers on the map of the cities I want to add. The cities are all stored in an array, myCities2. I have a plan to add a lot of cities and adding them through a function or loop will make it a lot easier than applying each city individually. Each city will link to a "demo scene" where the city name, city image and other relevant information will be passed and the city can be explored. I have build a lot of this in another file but each city and click event hast to be copy pasted and so on creating hundreds and hundres of lines of code and repetition, I am sure there is a better way and I know coding has a solution, as my coding friends tell me. Efficient code is my goal here. I have tried forEach(), and for loops but can't get them to add the images to the container with the map - as the map is dragged the cities need to be dragged along with it... Any suggestions? Thanks, Your help is greatly appreciated. myCities.js

Hello I'm building an app that will allow the user to draw different primitive shapes on the image ( circles, rectangle ... ) as well as scale and rotate them. The problem is in the size of the image. The images being used are around ( 25000 x 5000 px ) and its to high to load that into PIXI.TextureCache . The images won't have any interactivity to them except the zoom and pan functions. I'm looking for an efficient way how to do that . I was thinking maybe loading image on the separate off screen canvas and splitting it on smaller chunks that will be loaded into the Texture object, or maybe splitting images on the server and generating the spreed sheet of 512 x 512 px tiles. But i don't have a clue how to do that ( i do but it's a really small clue ) - How can i implement images this big ? - Should i choose different library for this ? ( I really like performance of pixi.js but if you have something in mind feel free to say ) I'm looking forward for your feedback, thanks for reading this and cheers .

One example I used in my JavaScript/HTML5 programming course ( https://www.grelf.net/jscourse/ ) was a rather crude drawing program, grDraw. An exercise at the end of the course suggests some improvements to make. My own improved version can be found at https://www.grelf.net/grDraw2/grDraw.html I mention it because it includes some things that may be useful to other developers such as - a colour palette object which may help beginners to understand CSS colours - browsing to display a user's images and get spot colours from them - saving images in local storage and retrieving them (not as difficult as I first imagined) An example display can be seen below - echoes of Kandinsky?

Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!

Hi I am new to Phaser and building my first game with Phaser CE. I am trying to build rows and column of images that will dragged and drop. I am having hard time understanding various ways to build tiles and can't find any resources of exactly what I am doing. So I build squares in row but don't know how can I lay it in multiple rows like tiling and then how to put the images inside the thumbnailBg.Can someone please advice. var thumbnails; var thumbnailBg; var thumbnailsHolder = this.game.add.group(); thumbnailsHolder.x = 400; thumbnailsHolder.y = 100 for(var i=0; i<imageName.length; i++){ this.createThumb(thumbnailBg, i); // thumbnailBg.x = 100*i; if(imageName[i].indexOf('_mask') < 0 && imageName[i] !== 'bw_1'){ thumbnails = this.add.sprite(100*i, 0, imageName[i], null, thumbnailsHolder); } } function createThumb (thumbnailBg, i){ console.log('thumbCreator'); thumbnailBg = this.game.add.graphics(100*i, 0); thumbnailBg.lineStyle(2, 0x276998, 0.6); thumbnailBg.beginFill(0xFFFFFF); thumbnailBg.drawRoundedRect(330, 50, 100, 100, 10); // draw a rounded rect mask thumbnailBg.endFill(); }

Hi all I've been trying to make a scroll image finder Where the user would scroll through a set of images and choose one. I was wonder how i could do this in phaser

Hi, Having had the most cursory look, it seems that you can export an image from Phaser (I've not tried it, but it seems you can.) I need to create an animation, that will be far easier to create via code, but I wondered about exporting multiple images from phaser? Anyone tried this? Or, something like this? Other thoughts?

Im attempting to make a game with Phaser and nodeJS. I was doing my character as a graphic (game.add.graphic) but couldn't figure out how to remove the graphic so I figured I'd make a sprite and load it. var Game = { preload: function(){ game.load.image("snakeBody", "../../assets/snakeBody.png"); game.load.image("apple", "../../assets/apple.png"); }, my folder structure is like so: -assets -static -scripts -game.js But it tells me that it can't find both files. I've also tried to add this line app.use(express.static('assets')); and then var Game = { preload: function(){ game.load.image("snakeBody", "localhost:3000/assets/snakeBody.png"); game.load.image("apple", "localhost:3000/assets/apple.png"); }, But same error occurs. EDIT: Solved it, tursn out I had to set the path as just "/snakeBody.png". I still dont understand why, but this worked.

Hello guys! I must mention that I am new, and that I am Latin, so sorry for my English. Okay.. my question is the following. How to collision normal image and polygonal image.? What a clash with each other. In short, that's what I need to know. I hope you can help me, thank you all!.

Hi, I'm writing a platform game in phaser, but the limits of the platforms don't seem to be the same as the limits of the image, so my player can keep walking "in the air" even when there's no platform under him. I`ve attached an image, as you can see there's no cloud under the player, but he`s standing on it anyway, he can walk this far untill fall to the platform below. Here is the "preload()" code part : this.load.image("cloud", "assets/cloud.png"); And here the "create()" code part: this.cloudsData =[ {"x":0 , "y":750}, {"x":200 , "y":600}, {"x":0 , "y":450}, {"x":200 , "y":300} ]; this.clouds = this.add.group(); this.clouds.enableBody = true; this.cloudsData.forEach(function(element){ this.clouds.create(element.x, element.y, "cloud"); }, this); this.clouds.setAll("body.immovable", true); this.clouds.setAll("body.allowGravity", false); I've tried changing the image with the same result, i think the code is wrong but i don't know where. Many thanks.

I asked a dumb question that i realized the answer to, and consequently, now i can't delete this thread. Sorry

Hi, I have a very strange problem with Phaser. When I save a new image from Photoshop CC 2015, then use this code in phaser to load an image: this.load.image('logo', 'images/rielaiz-logo.png'); I then use this code to load the image as a sprite: this.rielaizLogo = this.add.sprite(158, 157, 'logo');this.rielaizLogo.anchor.setTo(0.5, 0.5); All existing images work just fine. Please help.

Hi! I have this code and I need to save several images in Array, and then show them. How to do this? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });function preload () {game.load.script('webcam', '../plugins/WebCam.js');}var webcam;var bmd;var sprite;function create () {webcam = game.plugins.add(Phaser.Plugin.Webcam);bmd = game.make.bitmapData(800, 600);sprite = bmd.addToWorld();webcam.start(800, 600, bmd.context);game.input.onDown.addOnce(takePicture, this);}function takePicture () {webcam.stop();// bmd.context now contains your webcam imagesprite.tint = Math.random() * 0xff0000;}

I'm making a mode 7 game in java script but I ran into a problem, to turn the perspective I must rotate the image before I draw it. I have tried using the ctx.rotate() function but I don't know how to do this before I draw the image so I can save it as an image object rotated and re-draw it.

So I have this game that I made a while back that I am now trying to port with phaser. In this game I used individual PNG files for all my animations. From looking through the docs, it seems Phaser's animation support is just for spritesheets? Is there a way to do something like: player.sprite.animations.add('idle', ['images/s_snailIdle_0.png', 'images/s_snailIdle_1.png'], 60, true, false); player.sprite.animations.play('idle');If not, how can I change the frame for an individual sprite so I can maybe implement my own animation system?

Hey, I was wondering if it's possible to use either CSS, Canvas, HTML or JavaScript to draw elements for a game (like blocks, characters, etc..) or would I have to use a pre-made image. If this has already been answered, please direct me to the proper thread/website. I'm self-taught so a lot of examples and "dumbing down" is greatly appreciated! Thanks again in advance.

Hi, I'm new to this whole phaser thing, and I looked around for an answer to my question, but here I am. Here is the github project that I am working on. In my main.js file, which I have in the root directory of the project, I load the images as follows: // Load the imagesfunction preload(){ game.load.image('background', 'TagJam18/images/Background.png') game.load.image('platform', 'TagJam18/images/Platform.png') game.load.image('Wall', 'TagJam18/images/Wall.png') // Sprite sizes are inconsistent so there is no way to do these with constants // The only real way is to resize the window sprite. // I definiitely do not feel like doing that. game.load.spritesheet('dog', 'images/DogSprite.png', 16, 8) game.load.spritesheet('window', 'images/WindowSprite.png', 16, 16)}Then in my create function I try to load my image. // Create the scenefunction create(){ // Physics is a perfectly fine way to do things for this. // The ARCADE engine has all the physics we need for a simple platformer game.physics.StartSystem(Phaser.Physics.ARCADE) // Add in the background. game.add.sprite(ORIGIN, ORIGIN, 'background')However, when I try to run my game, what I get is a black screen. Am I doing something wrong with my folder directories? I have all of my images in an image folder inside of the TagJam18 folder. I'm not very confident that I am referencing them correctly.

Hello Everyone, I was in need of some temporary art for a project and it dawned on me hey Flickr's API has the ability to search on tags and licenses... lightbulb moment - hey wouldn't it be great if I could just ask Flickr for an image with a set of tags and get sprite back (or a list of related images you can find the gist here http://goo.gl/lYJ9FX oh yeah you need to have a flickr api key and there are limits to the number of images you can pull down an hour, so it probably makes sense to implement some sort of local caching system. (or you could just copy them from your browser cache like I did after getting them...) Cheers, -bpt

Hi guys, I have a particoular problem with Pixi.js. I am working on a large application in which there would be a lot of images displayed. Now the problem is that some of them should be "composed". So pratically the resulting Sprite should have for example, a Texture composed by four images: [1,1] [1,2] [2,1] [2,2] Each of them is an image file (so "1-1.jpg", "1-2.jpg", and so on...). I have tried to use a Sprite as a container of other Sprites and it works, but it seems quite slow and it takes a lot of memory. So I tried to use the RenderTexture class, but it needs that the objects to render should be preloaded (the application is large, so it can't wait images to be loaded). So finally I tried to use the fromCanvas() method. But it also seems to use a lot of memory, because it stores a Canvas for each Sprite (and I could have very large Canvases). So what do you suggest me? Is there any other way to compose a Texture for more image files? Thank you

What I aim to do with this blog post is set people on the right path from the get go with how image size in RAM works. I also want to provide others with the system I used to audit my image RAM and process I used to cut out inefficiencies. This should help you to get a good visual overview of which of your images are wasting the most RAM and where you can cut the fat. You can plug in the image asset list from your exported project and the sheet will give you some nice color coded information that isn't too hard on the eyes. Just click the banner above or, you can click this link too: http://pangolingames.com/how-to-audit-image-ram/ There is a RAM vs Storage overview before it gets to the utility itself, that should hopefully help explain how image download size and image size in RAM are not the same thing. In any case, I hope you find it an enjoyable and enlightening read! If you find anything that's incorrect, let me know!

I have fixed a bug. This is how to repro it: At startup: this.sprite.loadTexture("walk.png"); // Sprite sheet 3x4 frames Some time later: this.sprite.loadTexture("dead.png"); // Single frame My game sets this.sprite.frame each update. If the object is 'dead', the frame number is 0. The BUG is: the old frameData in this.sprite.animations resets the texure to walk.png's first frame. I SOLVED this by executing this.animations.loadFrameData(null); in the "cache.isSpritesheet == false" part of Phaser.Sprite.prototype.loadTexture

Hi guys, I've been playing around with Phaser for the last couple of weeks and I'm really loving it, very easy to work with and fun too! I have come across an issue however, I'm sure I'm probably doing something silly so I'm hoping someone can point me in the right direction. The issue: I come from a web dev background, so for my images, I've made them double the size and then using scale.setTo(0.5,0,5) to shrink them to the size I want them to display at. That's all fine, however when I use the game on my iPhone the images appear rather blurry instead of nice and crisp. Can anyone point me in the right direction here, am I doing something wrong? Thanks, Martin

Hi there, We've used Pixi.js a couple of times already in commercial projects because its so beautifully fast. Unfortunately one of the projects we're currently working on seems to be bucking the trend and we are struggling to get to the bottom of it. The app consists of a continuous strip of panels that scroll left to right - we're using DisplayObjectContainers for each panel and then loading in a bunch of images (in layers) and displaying them as sprites within that. Performance was excellent until we started to build more panels where it felt like some sort of memory threshold was crossed on the iPad Mini/2. The issue we have is that we are going to need 100+ panels within our strip - so memory management is of the upmost importance. So far we have 38 and the frame rate has already dropped to an unusable level. We are of course loading in each set of layers only as the user scrolls to that point in the strip and destroying panels they have already moved past but this doesn't seem to release the memory back to the browser fully. We are removing the sprites from the display list, destroying all the PIXI.Textures, removing them form the PIXI.Texture Cache and nulling everything but the frame rate just slows the further in you get. If you skip straight to the end (skipping the need to load all the images on the way) it stays fast. Here's part of the 'unbuild' function that exists within each panel: //console.log(PIXI.TextureCache) for (var pane in this._panes) { //console.log(this._panes[pane].art.children.length) for (var layer in this._paneData[pane].layers)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) //console.log('removing', Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) } for (var bubble in this._paneData[pane].bubbles)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) //console.log('removing', Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) } this._panes[pane].art.alpha = 0 while(this._panes[pane].art.children.length > 0) { this._panes[pane].art.getChildAt(0).texture.destroy() this._panes[pane].art.removeChild(this._panes[pane].art.getChildAt(0)) } for (var layer in this._paneData[pane].layers)//go through all the layers in this pane this._loadedLayers[this._paneData[pane].layers[layer].art] = null for (var bubble in this._paneData[pane].bubbles) this._loadedBubbles[this._paneData[pane].bubbles[bubble].art] = null //console.log(this._paneTimelines[pane].getChildren()) var timelines:any[] = this._paneTimelines[pane].getChildren() for (var timeline in timelines) { timelines[timeline].kill() timelines[timeline] = null } } timelines = null this._loadedLayers = {} this._loadedBubbles = {} if(this.timelineAcross) { this.timelineAcross.clear() this.timelineAcross.kill() this.timelineAcross = null } if(this.timelineAmbient) { this.timelineAmbient.clear() this.timelineAmbient.kill() this.timelineAmbient = null } It will also run beautifully smoothly (60fps) if we generate 100 panels and reuse the same image assets for each one. I realise this may be a larger issue with mobile safari and its memory limitations such as I have read about here: http://stackoverflow.com/questions/10582502/javascript-runs-slowly-in-safari-ipad2-after-loading-200mb-worth-of-new-images and here: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 But these articles refer to HMTL5 image objects in the DOM. I was wondering if there is anything else I can do in terms of getting mobile safari to forget image data that has been loaded and viewed via the PIXI ImageLoader or if we are going to have to completely change approach? Any suggestions would be really appreciated! Thanks