Search the Community

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 modified the tween loop examples in v3. I'd like to change the texture when every tween loop finished. But the texture flickers after setTexture(). Am I doing anything wrong? var config = { type: Phaser.WEBGL, width: 800, height: 600, backgroundColor: '#2d2d2d', parent: 'phaser-example', scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload () { this.load.image('block', 'assets/sprites/block.png'); this.load.image('arrow', 'assets/sprites/arrow.png'); } var name = ['block', 'arrow']; var i=0; function create () { var marker = this.add.image(100, 300, 'block').setAlpha(0.3); var image = this.add.image(100, 300, 'block'); this.tweens.add({ targets: image, x: 300, duration: 1000, repeat: -1, onRepeat: function(tween, target){ target.setTexture(name[++i%2]); } }); }

var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function.

Hi there, for some low performance devices, phaser's webgl renderer doesn't work, but when I try pixi V3, it goes well, so I am wondering is there any chance to use PIXI V3 renderer in Phaser?

Hi anybody noticed issues with masking on the latest chrome v50.0.2661 Masking seems to be completely broken even on vanilla pixijs example. http://pixijs.github.io/examples/index.html?s=demos&f=masking.js&title=Masking Firefox and canary work fine. Thank you for the help. Additional information about problem. It only ocures on windows 10 with AMD graphic cards. Solution would appear to be disabling webgl rendering and fallbacking to canvas.

Hello, i got a some questions, about a Phaser, i was just looking at example code, and it look like Phaser is very nice to learn,also it let you make a interesing games. To learn Phaser i need any special requiments? Ik some html,css, javascript with jquery libary. I won't call myself a medium or expert, but i got a basic of procedural and objective programing. Is that enought to learn Phaser? Also can i make a native android games using Phaser (i mean, add it to google shop and pepole can install it), can i also make a native Windows/linux Desktop app? Also i worry about learning Phaser now, because V3 gonna come soon probally, v3 don't use Pixi, so if i start learning V2 and do my project in it, over a time my project won't work on V3 + i gonna have alot of new thigns, is it worth to learn Phaser now? Also can i use Phaser for comerical ussage for free? Also do Phaser support database ?

Has anyone else noticed a lack of performance in Firefox and Safari for v3? I've got a lot going on in the small game I'm creating, and I dont actually think Pixi is my performance bottleneck at all, but was wondering if anyone had any similar experiences, Chrome runs at a solid 60fps even with the inspector open Firefox at about 45-50fps Safari just 30 or so If I add about a 1000 objects to my physics simulation (I'll get to other factors in a mo) then Chrome still chugs along at 60fps FF goes down to 25-30 Safari is lucky if it hits 15 I'm using P2 for the physics stuff, but, to there is a lot else that is probably to blame over Pixi, including ImmutableJS (for data), React (for UI level) and it uses Stage 0 Babel transforms for feature compatibility and polyfills, so, yeah, I'll try to isolate just the Pixi/P2 bit, but its not straight forward. Thought I'd ask first and also investigate myself. Its webGL rendered. Platform is Mac, nearly new Retina 15-inch and slightly older non-retina 13-inch Air, similar perf pattern on both

I just noticed that changing the alpha value of a Container() does not affect any children within (actually, it does nothing). You have to set the alpha of each sprite within explicitly (which is really tedious). Why is that?

Hi guys, I am using loader this way PIXI.loader.ball('imageName1', '/sball/assets/images/sprites/car.png').load(onCreate); ... and later create sprites from loaded images this way, var s = PIXI.Sprite.fromImage("/sball/assets/images/sprites/car.png");... But i cant find first varviable 'imageName1' usage , texturesCache has url of image as key, what is the sence of first name variable and can I create sprite using it ?

Hello everybody, I transfered my project in PIXIv3 and when I lauch it in cocoonjs, I saw the fps very poor. I didn't understand the why of the how until I realize that cocoon was in canvas mode. So, if I do (in cocoonjs): var renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height); renderer returns canvas. Canvas works, but the FPS is not the best. else, if I do: var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height)renderer return webgl. OK, the FPS is max, BUT, cocoonjs don't display sprites. It display graphics, background color, but no sprite. It's annoying because v2 (v 2.7 i believe my last version) worked perfectly: autoDetect returned webgl, FPS max and sprites were displayed. It is normal, it isn't? I stress google since long hours and i don't have any key about this (stencil?, I don't know what is, and I don't understand why v2 worked and why v3 not). I stess me too, because I don't know how many tests I did in my device but the result is the same, with cocoonjs, PIXI the third (3.0.6) is not a webgl warmachine.

Hi all, First of all, I would like to congrat the Pixi team for its amazing framework! I am currently working on a bulge/pinch filter like the one presented here : https://github.com/GoodBoyDigital/glfx.js/blob/master/src/filters/warp/bulgepinch.js. I am trying to adapt the glfx filter to the v3 pixi engine but I am not so much experimented with javascript and as3 to well understand what I am doing. I based my conversion following your work on the dotscreen filter you already adapt for that library and here I am so far... https://jsfiddle.net/aqvtw5yw/ PIXI.filters.AbstractFilter.call(this, // vertex shader null, // fragment shader [ 'precision mediump float;', 'uniform vec2 center;', 'uniform float radius;', 'uniform float strength;', 'void main() {', 'vec2 coord = center;', 'float distance = length(coord);', 'if (distance < radius) {', 'float percent = distance / radius;', 'if (strength > 0.0) {', 'coord *= mix(1.0, smoothstep(0.0, radius / distance, percent), strength * 0.75);', '} else {', 'coord *= mix(1.0, pow(percent, 1.0 + strength * 0.75) * radius / distance, 1.0 - percent);', '}', '}', '}' ].join('\n'), // custom uniforms { radius: {type: '1f', value:10}, strength: {type: '1f', value:5}, center: {type: '2fv', value:[100,100]} }); Something is not working, no error shown in the console, I am a bit lost I would like to reproduce exactly the same so if someone here could help me a bit to accomplish my goal, it would be awsome! Thanks for your help

When I first came into contact with Pixi, I was like "Yes! An easy way to create games without learning too much". I was also able to write my own wrapper to run the game from a very basic web service in a local desktop application in Windows. I am concerned however that the power of HTML5 games my be a bit more restricted than what I first thought. My computer is quite fast, I can run most games released in the last 2 years on max graphics and still maintain 60 fps. I have still only experimented with the basics of this, but wanted to see if anyone can save me a lot of research time. So my questions are: Are HTML5 games (using Pixi) capable of running as full screen games for desktop at a reasonable speed compared to desktop specific games? What are the limitations? Even though an HTML5 game can not interact with the graphics card on a computer outside of what a web browser feeds it, is there any way to open up the computer's full resources through any existing wrappers or something similar? Thanks for your time reading this and I appreciate any feedback.

I am new to v3 and running into a couple of issues... Firstly. I am making a game with my Girlfriend to teach her some JavaScript. She is afraid of using commands or installing a webserver on her mac, so I am trying to make crossOrigin work to load textures. I am using an array of objects that store the name and url, I then add the crossOrigin msg "behind the scenes": var textures = [ { name: "burger", url: "images/Hamburger.png" }, { name: "moon", url: "images/Lunaone_1.png" }];var l = textures.length;for ( var i = 0; i < l; i += 1 ) { textures[i].crossOrigin = "Anonymous"; loader.add( textures[i] );}However when I try to use the textures: var burger = new PIXI.Sprite( textures["burger"].texture );I get the following error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Oliver/Documents/pirate-game/images/Hamburger.png may not be loaded.Is there something I can do here without having to install a webserver?

Hi there! Today I tried running the game I currently develop using Pixi on a Amazon Kindle Fire HD device (7" first generation). It didn't work at all (but it worked when I still used v2) and so I checked the v3 examples online and found that none of these work. All that is shown is the background color of the canvas (see attached screenshot). I tried running the examples in both the Silk browser that comes with Fire OS as well as with a sideloaded Firefox Aurora and both browsers show a similar behaviour. When I remote-debug the examples in Firefox, the only error I get is: Error: WebGL: Exceeded 2 live WebGL contexts for this principal, losing the least recently used one. pixi.js:11246:13 The examples here don't work at all for me on the device: http://pixijs.github.io/examples/ I also tried running examples for older versions of pixi and these seem to work just fine, both in Silk and Firefox: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ Has support for older Kindle Fire HD devices been dropped or is this a bug? I didn't find a list of supported devices or platforms/browsers for pixi. Is there such a thing? Has anyone tested Pixi v3 on a newer Kindle Fire HD device? Does it work there? Thanks! EDIT: When I use the CanvasRenderer in my game directly and not PIXI.autoDetectRenderer(), then it works in both browsers on Kindle Fire HD.

Having a problem with a flicker effect I am having when creating a moving starfield in the background of a game I am working on. It's a bit hard to describe the effect so I will do my best without a video and hopefully someone can help. If needed I can create a recording of what's happening. Sometimes this flicker seems more like a pulse with the stars fading in and out. The faster the shift of tilePosition the faster this pulse seems to be resulting in a "flickering" effect. My technique: 4 tiling sprites are created. The background one is a jpg with stars and a bit of nebular gas clouds here and there. It is 4000x4000px in size. The other 3 are transparent png files with random white pixels on an image 2000x2000px. Each of the 4 tiling sprites' tilePosition is incremented at a different rate to each other based on the spaceship (which remains fixed in the middle of the screen). My renderer is automatically set to the innerWidth and innerHeight of the window if that matters - but doesn't seem to with other projects I have been playing around with. function updateBackground(x,y){ //console.log(x + ":" + y); sprites.cloudstars.tilePosition.x += (x * 0.01); sprites.cloudstars.tilePosition.y += (y * 0.01); sprites.star1.tilePosition.x += (x * 0.2); sprites.star1.tilePosition.y += (y * 0.2); sprites.star2.tilePosition.x += (x * 1); sprites.star2.tilePosition.y += (y * 1); sprites.star3.tilePosition.x += (x * 10); sprites.star3.tilePosition.y += (y * 10);}The problem: The stars seem to flicker (which sounds like it would be a good idea but isn't) when the starfield is shifted. It depends on the values of X and Y which are calculated by the direction and speed of the ship as follows: function moveShip(){ var newX = 0; var newY = 0; if(player.speed > 0){ var newX = (Math.cos(sprites.ship.rotation) * (player.speed * -0.01)); var newY = (Math.sin(sprites.ship.rotation) * (player.speed * -0.01)); } return [newX, newY];}What I have tried: - Reducing the size of the png files - Making sure the white pixels in the png file are not transparent in any way, solid white pixels - Moving the starfield at different rates in the first part of code I have linked - Turning off antialiasing for the PIXI.autoDetectRenderer I have spent about 30 hours of time trying to get this to work and am about to give up completely, hence turning to this forum for maybe some advice. If there is a better way to do it I am more than happy to give this a try. Thanks in advance.

I have just attempted to switch to v3 and I am lost in the understanding of the loader. I cannot log the progress of each asset though these are loading.. Can someone share with me the new API to make the loader work? Thanks, Jon

I am trying to work out how to tint a sprite in v3 as the v2 method doesn't seem to work. Where can I find the documentation on this?

I am currently working on a space game (my first game ever with Pixi) and I am sure there is a good chance this has been clarified before. However I am unable to understand some of the replies to other posts without wording this to my specific situation. I have an array that is storing the locations of space "lasers" (Dr Evil reference intended). I want to draw these laser beams as they move across the screen. With rapid fire enabled there might be around 20 lots of beams shooting around the screen at once. What is the best way to go about this.. I have 3 unfinished guess: 1) Create a sprite for each and when they fade off, destroy the sprite somehow 2) Create 40 or so instances of these lasers and only reposition the 20 that are actually currently on the screen 3) Create another array that stores a new sprite for each laser. As the lasers fade off, delete that array entry specifically Any advice/help would be much appreciated.

Hi, I'm struggling with removing an event in my drag & drop code.. that.pants.once('mousedown', function(mouseData) { that.pants.on('mousemove', function(mouseData) { that.pants.position.x += mouseData.data.originalEvent.movementX; that.pants.position.y += mouseData.data.originalEvent.movementY; that.pants.once('mouseup', function(mouseData) { console.log("how do I remove mouse move event?!") }); }); });I have tried using callbacks but to no success.. If someone knows what would the syntax look like for the prototypal pseudo-classical pattern I am using. Thank you!

I guess I have bad timing but have just started with Pixi in the last couple of weeks. With the release of V3 a lot of the things I have just learned seem to not work any more.. even some of the V3 posts on this forum cause me even more problems. Is there any chance of creating another forum specific to V3?

Hey folks! I'm running through an issue with pixi v3. It seems that the blur filter isn't working correctly, or I might have used it in a wrong way, I can't tell. Here's what I'm doing: this.spriteBG = new PIXI.Sprite(PIXI.utils.TextureCache[this.options.id]);this.spriteBG.cacheAsBitmap = true;this.addChild(this.spriteBG);this.blurFilter = new PIXI.filters.BlurFilter();this.blurFilter.blur = 50;this.spriteBG.filters = [this.blurFilter];The result is weird, the texture seems just duplicated and positioned with a different alpha, not blurred at all. Then, when I try to tween the value, nothing happens. TweenMax.to({ blur: this.blurFilter.blur}, .3, { blur: blur, ease: Cubic.easeOut, onUpdateParams:["{self}"], onUpdate:$.proxy(function(tween){ this.blurFilter.blur = tween.target.blur; this.spriteBG.filters = [this.blurFilter]; },this) });Did I do something wrong? Thanks!

Taking advantage of the great new v3 architecture, I've created a plugin for importing Tiled maps. You can get it through npm: npm install pixi-tiledThe github repo is here. It's fairly basic for now, but it handles layers, tilesets (including multiple tilesets per layer), and uses the new loader middleware system to make it super easy to use. I've tried it with a couple of my own maps, and it works great, but i'm really keen to get people to try it with their own maps to I can start ironing out all the inevitable edge cases. If you have any feature requests please raise a github issue and I will do my best to implement them. Thanks for looking!