Search the Community

Hi, I'm new with Phaser, I'm wondering how can I create a group of enemies that appears at the side of the screen in a random Y position between 550px and 745 px, after they appear they need to start to fire to my character Right now I have a function to create the bullets and how they will be fired: createBullets:function(laserToFire,track,offsetX, offsetY, bulletDirection,fireRate,bulletSpeed){ weapon = gameSP.add.weapon(10, laserToFire); weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; weapon.bulletSpeed = bulletSpeed; weapon.fireRate = fireRate; weapon.trackSprite(track, offsetX, offsetY); weapon.fireAngle = bulletDirection;right } So what I'm looking to do is to have each one of my enemies within the group to fire to my character. Thanks in advance.

I notice that there's a setTextureArray method, but I don't see any corresponding methods for vec2s, vec3s, etc. As an example, if I want something like: (Typescript) const offsets: Vector2[] = [ new Vector2(1, 1), new Vector2(2, 1), new Vector2(3, 1), new Vector2(4, 1), ] And I want to be able to use this in my shader, like this: (GLSL) uniform offsets vec2[4]; for (int i = 0; i < 4; i++) { vec3 tex = texture2D(sampler, uv * offsets[i]); // do something awesome here } I don't see any easy way to do it. Any clues?

Hey everyone, I've just started working with Babylon.js and I have a question. I've got a double array filled with 1 & 0 and I want it tranformed to 3d. 1 being blocks and 0 spaces. I did it this way: var sizeFactor = 0.2; for (var i = 0; i < array.length; i++) { for (var j = 0; j < array[0].length; j++) { if (array[i][j] === 1) { var box = BABYLON.MeshBuilder.CreateBox('box', {height: sizeFactor, width: sizeFactor, depth: sizeFactor}, scene); box.position.x = i * sizeFactor; box.position.y = 0; box.position.z = j * sizeFactor; } } } but its very taxing I believe to the system because of the many boxes. Is there any other less taxing way to achieve this?

Hello, I'm able to attach spatial audio to an object in my scene. But as I'm now creating many objects and pushing them to an array, I cannot assign the audio to the mesh in the array. Here's the basic code: for (let b = 0; b <= 20; b++) { boxRotArray = BABYLON.MeshBuilder.CreateBox("box_rot" + b, {size:0.1}, scene); } const bgm = new BABYLON.Sound('backgroundMusic', './Demos/sounds/WubbaWubbaSound.mp3', scene, null, { spatial: true, maxDistance: 20, loop: true, autoplay: true }); bgm.attachToMesh(boxRotArray[0]); I've tried using the name of the object in the array, and I've also tried to assign a new variable to equal boxRotArray[0]. when I console.log(boxRotArray[0]); it is a mesh and I'm using this in many different other assignments. Any thoughts? Thanks, DB

hi, I have a gameProgress (e) where each position in my array are stars (1,2) or blocked levels (-1) I want to count the position of the blocked level so i use this ; var e=[1,2,1,1,-1]; var n = 0; while (e[n] < 0) { n++; var position=n; } console.log(position); // expected output: 4 and result is 3 ??? but the result is not 4 => e=[1,2,1,1,-1] could you tell me why ?

I have an array of items (stored as strings) I am displaying on screen as sprites, in an inventory. I want to update my array when an item is removed from my inventory, so I want to write a function that resets the x position of the objects. I can log out the right object and the right index value, but I can't seem to set the position of the object using this function. Any ideas ? example: inventory('key', 'rock', 'sword', 'note'); resetSlots: function() { //for every item in inventory, slot position is index number. inventory.forEach(function(item, index){ item.x = index * 150; console.log(item.x); //this returns "undefined" }) },

(posted in phaser 3 instead of the phaser forum by mistake) Hi I'm hoping someone can hep me, I'm trying to create basic map using an array with 2 different images, one is a wall, the other is a floor. I've created twp groups but when i use this.game.physics.arcade.collide(this.player, this.blocks, null, this.hitBlock, this); I've used the collide function before on other games with no issues - this is my first time using a 2d array but I can't see where the issue is happening code below : cursor controls to move link example :http://html5gamer.mobi/projects/6/ var GameHipster = GameHipster || {}; GameHipster.GameState = { init : function() { //keyboard controls this.cursors = this.game.input.keyboard.createCursorKeys(); this.upKey = this.game.input.keyboard.addKey(Phaser.Keyboard.W); this.downKey = this.game.input.keyboard.addKey(Phaser.Keyboard.S); this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.A); this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.D); this.actionKey = this.game.input.keyboard.addKey(Phaser.Keyboard.P); this.PLAYER_SPEED = 400; this.BULLET_SPEED = 500; this.score = 0; }, // end init preload : function() { },//end preload //executed after everything is loaded create: function() { blockdata = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,1,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ]; this.blocks = this.add.group(); this.blocks.enableBody = true; this.floors = this.add.group(); this.floors.enableBody = true; var floor, block, i, j, col; var ROWS = blockdata.length; var COLS = blockdata[0].length; //console.log('R : ' + ROWS + ' C : ' + COLS); //console.log(blockdata[2][3]); for (i =0; i < COLS; i++) { for (j =0; j < ROWS; j++){ //col =1; col = (blockdata[j]); if (col ==0){ floor = this.floors.create( 1 + (i*64),1 +(j*64), 'block' + col); floor.anchor.setTo(0.5); } if (col ==1){ block = this.blocks.create( 1 + (i*64),1 +(j*64), 'block' + col); block.anchor.setTo(0.5); block.body.immovable =true; } } }; this.player = this.add.sprite(this.game.world.width / 2, this.game.world.height / 2, 'player'); this.player.anchor.setTo(0.5); this.player.scale.setTo(0.2); this.game.physics.arcade.enable(this.player); this.player.body.immovable = true; //ui this.uiBlocked = false; //text var style = {font : '20pt Arial', fill : '#fff'}; this.scoreLabel = this.add.text(10,10, 'SCORE : ', style); this.scoreText = this.add.text(130,10, '0', style); this.refreshStats(); }, //executed multiple times per second update: function() { this.player.body.velocity.x = 0; this.player.body.velocity.y = 0; this.game.physics.arcade.collide(this.player, this.blocks, null, this.hitBlock, this); this.keyboardControls(); }, // end update keyboardControls : function(){ //init keyboard controls if (this.cursors.left.isDown|| this.leftKey.isDown){ //this.player.angle += 5; this.player.body.velocity.x = -this.PLAYER_SPEED; } else if (this.cursors.right.isDown || this.rightKey.isDown){ //this.player.angle -= 5; this.player.body.velocity.x = this.PLAYER_SPEED; } if (this.cursors.up.isDown || this.upKey.isDown){ //thrust this.player.body.velocity.y = -this.PLAYER_SPEED; } if (this.cursors.down.isDown || this.downKey.isDown){ //thrust this.player.body.velocity.y = this.PLAYER_SPEED; } if (this.actionKey.isDown){ this.fireBullet(); } },// end function hitBlock : function(player, block){ console.log('hit'); }, endGame : function(player, enemy){ this.game.state.start('GameState'); }, refreshStats : function(){ this.scoreText.text = this.score; } }; Any help is appreciated Eric

Hi. I'm new at programming and Phaser and i need a bit of help. Im having array of sprites, and i need to set each one of the elements on different position on my game. Can you tell me how can i do that with some short example pls?

Hello everyone, I've been working on a game inspired by Heroes of Might and Magic and Final Fantasy-esque and I wanted to turn it into a browser game. Everything's been going well until I hit a bump in the road. I thought it would have been smart and easier to put all the sprites of the creatures in an array but doing so only let me use one sprite at a time so if the fight was between 4 Halberdiers and 4 Skeletons then they would on both sides only have 1 sprite. The stats for all the creatures are in a database and so far worked fine. var chosensprite =[]; chosensprite[1]=game.add.sprite(-100 ,-100 , 'skeleton'); chosensprite[2]=game.add.sprite(-100 ,-100 , 'halberdier'); This is what I used as an array. I tried to hardcode all the characters but doing so only created more of a clustermess which doesn't seem good to work with. // The playerunit1 and its settings playerunit1 = game.add.sprite(32+32, game.world.height/numcreaturesplayer*0+64, 'halberdier'); playerunit1.kill(); playerunit2 = game.add.sprite(32+32, game.world.height/numcreaturesplayer*1+64, 'halberdier'); playerunit2.kill(); playerunit3 = game.add.sprite(32+32, game.world.height/numcreaturesplayer*2+64, 'halberdier'); playerunit3.kill(); playerunit4 = game.add.sprite(32+32, game.world.height/numcreaturesplayer*3+64, 'halberdier'); playerunit4.kill(); enemyunit1 = game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*0+64, 'skeleton'); enemyunit1.kill(); enemyunit2 = game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*1+64, 'skeleton'); enemyunit2.kill(); enemyunit3 = game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*2+64, 'skeleton'); enemyunit3.kill(); enemyunit4 = game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*3+64, 'skeleton'); enemyunit4.kill(); selector = game.add.sprite(0,0, 'mselector'); /* playerunit1bolt = game.add.image(playerunit1.x+800, playerunit1.y+16, 'star'); enemyunit1bolt = game.add.image(enemyunit1.x+800, enemyunit1.y+86, 'star'); */ for (var i=0;creaturestats[i];) { playerunit1.unittype= 2; if (playerunit1.unittype == creaturestats[i]['unittype']) { if (playerunit1.unittype = 2){ playerunit1 = game.add.sprite(32+32, game.world.height/numcreaturesplayer*0+64, 'halberdier'); } //playerunit1 = chosensprite[playerunit1.unittype];playerunit1.x=64;playerunit1.y=64; playerunit1.damage=creaturestats[i]['damage']; playerunit1.healthblock=creaturestats[i]['healthblock']; playerunit1.units=creaturestats[i]['unitamount']; playerunit1.defense=creaturestats[i]['defense']; playerunit1.damagetype=creaturestats[i]['damagetype']; playerunit1.attacktype=creaturestats[i]['attacktype']; } playerunit2.unittype= 1; if (playerunit2.unittype == creaturestats[i]['unittype']) { if (playerunit2.unittype = 1){ game.add.sprite(32+32, game.world.height/numcreaturesplayer*1+64, 'skeleton'); } //playerunit2 = chosensprite[playerunit2.unittype];playerunit2.x=128;playerunit2.y=128; playerunit2.damage=creaturestats[i]['damage']; playerunit2.healthblock=creaturestats[i]['healthblock']; playerunit2.units=creaturestats[i]['unitamount']; playerunit2.defense=creaturestats[i]['defense']; playerunit2.damagetype=creaturestats[i]['damagetype']; playerunit2.attacktype=creaturestats[i]['attacktype']; } playerunit3.unittype= 1; if (playerunit3.unittype == creaturestats[i]['unittype']) { if (playerunit3.unittype = 1){ game.add.sprite(32+32, game.world.height/numcreaturesplayer*2+64, 'skeleton'); } //playerunit3 = chosensprite[playerunit3.unittype];playerunit3.x=500;playerunit3.y=200; playerunit3.damage=creaturestats[i]['damage']; playerunit3.healthblock=creaturestats[i]['healthblock']; playerunit3.units=creaturestats[i]['unitamount']; playerunit3.defense=creaturestats[i]['defense']; playerunit3.damagetype=creaturestats[i]['damagetype']; playerunit3.attacktype=creaturestats[i]['attacktype']; } playerunit4.unittype= 2; if (playerunit4.unittype == creaturestats[i]['unittype']) { if (playerunit4.unittype = 2){ game.add.sprite(32+32, game.world.height/numcreaturesplayer*3+64, 'halberdier'); } //playerunit4 = chosensprite[playerunit4.unittype];playerunit4.x=300;playerunit4.y=20; playerunit4.damage=creaturestats[i]['damage']; playerunit4.healthblock=creaturestats[i]['healthblock']; playerunit4.units=creaturestats[i]['unitamount']; playerunit4.defense=creaturestats[i]['defense']; playerunit4.damagetype=creaturestats[i]['damagetype']; playerunit4.attacktype=creaturestats[i]['attacktype']; } enemyunit1.unittype= 2; if (enemyunit1.unittype == creaturestats[i]['unittype']) { if (enemyunit1.unittype = 2){ game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*0+64, 'halberdier'); } enemyunit1.damage=creaturestats[i]['damage']; enemyunit1.healthblock=creaturestats[i]['healthblock']; enemyunit1.units=creaturestats[i]['unitamount']; enemyunit1.defense=creaturestats[i]['defense']; enemyunit1.damagetype=creaturestats[i]['damagetype']; enemyunit1.attacktype=creaturestats[i]['attacktype']; } enemyunit2.unittype= 2; if (enemyunit2.unittype == creaturestats[i]['unittype']) { if (enemyunit2.unittype = 2){ game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*1+64, 'halberdier'); } enemyunit2.damage=creaturestats[i]['damage']; enemyunit2.healthblock=creaturestats[i]['healthblock']; enemyunit2.units=creaturestats[i]['unitamount']; enemyunit2.defense=creaturestats[i]['defense']; enemyunit2.damagetype=creaturestats[i]['damagetype']; enemyunit2.attacktype=creaturestats[i]['attacktype']; } enemyunit3.unittype= 2; if (enemyunit3.unittype == creaturestats[i]['unittype']) { if (enemyunit3.unittype = 2){ game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*2+64, 'halberdier'); } enemyunit3.damage=creaturestats[i]['damage']; enemyunit3.healthblock=creaturestats[i]['healthblock']; enemyunit3.units=creaturestats[i]['unitamount']; enemyunit3.defense=creaturestats[i]['defense']; enemyunit3.damagetype=creaturestats[i]['damagetype']; enemyunit3.attacktype=creaturestats[i]['attacktype']; } enemyunit4.unittype= 1; if (enemyunit4.unittype == creaturestats[i]['unittype']) { if (enemyunit4.unittype = 2){ game.add.sprite(game.world.width - 128-32, game.world.height/numcreaturesenemy*3+64, 'skeleton'); } enemyunit4.damage=creaturestats[i]['damage']; enemyunit4.healthblock=creaturestats[i]['healthblock']; enemyunit4.units=creaturestats[i]['unitamount']; enemyunit4.defense=creaturestats[i]['defense']; enemyunit4.damagetype=creaturestats[i]['damagetype']; enemyunit4.attacktype=creaturestats[i]['attacktype']; } i++; } So my question is if there is anyone well known with Phaser and could help me work out the solution with an array, another solution or if they're is no other choice but to hardcode it or work with HTML5 instead of Phaser. Thank you in advance! index.php

Hi .i made a simple pixi app which tries to simulate spring forces but can't make it work properly . I've patched PIXI.ObservablePoint Object.assign(PIXI.ObservablePoint.prototype, { add: function(o) { this.set(this.x += o.x, this.y += o.y); }, radd: function(o) { return new PIXI.ObservablePoint(test, window, this.x + o.x, this.y + o.y);//test is a useless callback function that do nothing . }, sub: function(o) { this.set(this.x -= o.x, this.y -= o.y); }, rsub: function(o) { return new PIXI.ObservablePoint(test, window, this.x - o.x, this.y - o.y); }, mult: function(o) { this.x *= o; this.y *= o; }, rmult: function(o) { return new PIXI.ObservablePoint(test, window, this.x * o, this.y * o); }, getAngle() { //in radians return Math.atan2(this.y, this.x); }, getLenght() { return Math.hypot(this.x, this.y); }, setLength(l) { let angle = this.getAngle(); this.set(Math.cos(angle) * l, Math.sin(angle) * l); }, setAngle(a) { //in radians; this.set(Math.cos(a) * this.getLenght(), Math.sin(a) * this.getLenght()); } }); and this one is the sprite object class spring extends PIXI.Sprite { constructor(x, y) { super(); this.texture = new PIXI.Texture.fromImage("assets/image.png"); this.x = app.rw;//random width this.y = app.rh;//random height this.t = new PIXI.ObservablePoint(test,window,x,y); this.scale.set(.5 + Math.random() * .5); this.anchor.set(.5); this.friction=.9; } update() { this.d = this.t.rsub(this.position); this.d.mult(.1); this.vel.add(this.d); this.position.add(this.vel); this.vel.mult(this.friction); } } let arr = []; for (var a = 0; a < 100; a++) { let bu = new spring(app.rw, app.rh); container.addChild(bu); arr.push(bu); } app.ticker.add(() => { for (var i = 0; i < arr.length; i++) { let bu = arr[i]; bu.update(); } }); when i tried to create spring objects they behave weirdly . If there is only one spring object on array nothing happens unusual.But if there are more then one spring object they act like this and i can't change their positions independently beyond that if i disable friction they fastly disappear from screen .

I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(resources.cards.hearts.10.texture);

hi, i have two object hero and enemy. My hero is an array with 3 player. when my hero collide with the enemy i would invoke the function : "hero.explode". My snippet is below. the problem is with the function createBodyCallback, i have two problem. the function this.hero.explode works before the collision...and my hero don't touch the enemy....why ? i cant access the body2.otherfunction() because the callback is in fact this.hero.player.body.otherfunction so i have an error. could you help me for these 2 points ? thanks. character = function(){ game.physics.startSystem(Phaser.Physics.P2JS); game.world.setBounds(-1000,-1000,40000,40000) Phaser.Sprite.call(this,game,640,h+500,'rect') this.flag_mouse=false this.flag_show_button=true //cible this.cible=game.add.sprite(w2,300,'cible') this.cible.anchor.setTo(.5,.5) game.physics.p2.enable(this.cible) this.cible.body.static=true this.cible.scale.setTo(1.5,1.5) this.player={} for (var i = 0; i < 3; i++){ this.player[i]=game.add.sprite(640,1980+i*500,'rect') game.physics.p2.enable(this.player[i]) this.player[i].body.setCircle(20) } } character.prototype = Object.create(Phaser.Sprite.prototype) character.prototype.constructor = character character.prototype.explode=function(body1,body2){ body2.sprite.alpha=0 body2.otherfunction() } character.prototype.otherfunction=function(){ console.log("explode") } this.hero=new character() //far for (var i = 0; i < 3; i++){ this.enemy.body.createBodyCallback(this.hero.player[i],this.hero.explode,this) }

Hello Pixi Developers and Users I would like first to present myself as a newcomer on the forum Im the developer of Sprite Basic Compiler Game Engine (https://spritebasic.com) It is cloud-based game framework with Basic Scripts tha uses PixiJS as web gl renderer as long as PhysicsJS as physic engine and other librairies needed to create games like the great Kittykatattack libraries For a demo and future game i wish to write, i would like to create a tilingsprite, for an endless scrolling background, made of an array of textures What would be the best strategy to concatenate an array of textures, that might be of different dimensions, into a large tiling sprite, either in portrait or landscape. Would create a large tiling sprite make performances suffer or the part of the tiling sprite that is not currently displayed would be correctly cropped from screen display/calculations? Many thanks if you can light me on this specific Benoit

Hi, I'm new on Phaser and my english isn't perfect, so i'll try to be careful. I made a 2D mini game like that : (see screenshot). What I need is to move my character on right click. - I handeled my right click (so it's ok). - I have in an array the path I need the character to use (ex : [[0.0],[0.1],[0.2],[0.3],[0.4],[0.5]]). My character have got a speed (equals to 1) and I need my character to move from the first point to the last of my array by passing by the others ... like a unit in Warcraft 3, League of legend, etc. Do you know how i can do that please ? Thanks for your time. Antoine Duval.

Hi I have come to a dead in, I have attempted various research on platforms such as google, YouTube and Lynda however to no avail. I have used TexturePacker to create a spritesheet assiociated with JsonArray so that I can incorporate animations within my project however I am met with this Index error which is assiociated with the first line of code: this.sprite.animations.add('walk', Phaser.Animation.generateFrameNames('Slide', 1, 10), 10, true, false); this.sprite.animations.play('walk'); I have preloaded the required JsonArray and Image path within the preloader by doing the following: this.load.atlasJSONArray('robot', 'src/images/robots.png', 'src/images/robots.json'); And an example of this .json file is like this: { "filename": "Slide1.png", "frame": {"x":3574,"y":361,"w":409,"h":356}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":31,"y":170,"w":409,"h":356}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide2.png", "frame": {"x":3572,"y":2665,"w":406,"h":358}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":34,"y":168,"w":406,"h":358}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide3.png", "frame": {"x":3561,"y":1412,"w":403,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":37,"y":166,"w":403,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide4.png", "frame": {"x":3084,"y":1781,"w":400,"h":361}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":165,"w":400,"h":361}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide5.png", "frame": {"x":3159,"y":1412,"w":400,"h":361}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":165,"w":400,"h":361}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide6.png", "frame": {"x":2763,"y":2660,"w":400,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":166,"w":400,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide7.png", "frame": {"x":2763,"y":3022,"w":400,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":166,"w":400,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide8.png", "frame": {"x":3165,"y":2982,"w":402,"h":359}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":38,"y":167,"w":402,"h":359}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide9.png", "frame": {"x":3165,"y":2622,"w":405,"h":358}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":35,"y":168,"w":405,"h":358}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide10.png", "frame": {"x":3572,"y":2306,"w":407,"h":357}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":33,"y":169,"w":407,"h":357}, "sourceSize": {"w":567,"h":556} }], (Manually Rename Filename from Slide (1) to Slide1 in order to work however still met with an error) I have tried to find videos which will help me with creating an animation spritesheet with Json but every resource I follow I still get this error. If my mistake is not obvious feel free to point me to a good resource. Regards, Connor Solved: No where mentioned extension had to be removed. Eventually got it working.

Hi, I have 4 sprite2D buttons in an array. They are the only visible sprites on a canvas, but not the only one (several with opacity 0). If I dispose of 3 among the 4 everything is fine. elements2D.levelButtons[0].dispose(); elements2D.levelButtons[1].dispose(); // elements2D.levelButtons[2].dispose(); elements2D.levelButtons[3].dispose(); But if I dispose of all of them webGL throws a warning on a couple of render() - i'd say around 100 engine.render(). During those render any call to add primitives is not taken into account, resulting in a slight delay. Then, without any reason the warnings stop and calls to render and modify sprite are taking into account and rendered. babylon.2.5.max.js:7685 WebGL: INVALID_OPERATION: drawElements: no buffer is bound to enabled attribute Engine.draw @ babylon.2.5.max.js:7685 Rectangle2DRenderCache.render @ babylon.2.5.canvas2d.max.js:8864 Group2D._renderTransparentData @ babylon.2.5.canvas2d.max.js:8415 Group2D._groupRender @ babylon.2.5.canvas2d.max.js:8287 Canvas2D._render @ babylon.2.5.canvas2d.max.js:13009 (anonymous) @ babylon.2.5.canvas2d.max.js:11954 Observable.notifyObservers @ babylon.2.5.max.js:3605 Scene.render @ babylon.2.5.max.js:18697 (anonymous) @ catch-the-wolf-mri.js:653 Engine._renderLoop @ babylon.2.5.max.js:7166 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 I have no idea where it is coming from. It is not due to the fact that they are in an array, if I add another unrelated button to the scene I can dispose of the four rect without warning. This is my function creating the button, but I am not sure it is coming from that, I sometime had the same behavior when using dispose() in other contexts. var addButton = function (stateManager = mandatory(), options = null) { return new Promise(function (resolve, reject) { if (typeof stateManager._parent.parentTaskObject === "undefined") { throw new Error("stateManager.addButton: stateManager._parent.parentTaskObject is undefined"); } var baseOptions = { id: "button" + stateManager.timeInMs, text: "text", x: 50, y: 50, width: 100, height: 50, fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(0.8, 0.8, 0.8, 1)), clickEventData: null, fontName: "30pt Arial", baseOpacity: 0.8, hoverOpacity: 1 }; options = _.extend(baseOptions, options); var elements2D = stateManager.getGlobal("elements2D"); var canvas = elements2D.canvas; // create button and add to canvas var buttonRect = new BABYLON.Rectangle2D({ parent: canvas, id: options.id, x: options.x, y: options.y, width: options.width, height: options.height, fill: options.fill, roundRadius: 0, children: [ new BABYLON.Text2D(options.text, { fontName: options.fontName, marginVAlignment: "v: center", marginHAlignment: 3 }) ] }); buttonRect.opacity = options.baseOpacity; // Add an observable for hovering buttonRect.pointerEventObservable.add(function (d, s) { buttonRect.opacity = options.hoverOpacity; }, BABYLON.PrimitivePointerInfo.PointerOver); buttonRect.pointerEventObservable.add(function (d, s) { buttonRect.opacity = options.baseOpacity; }, BABYLON.PrimitivePointerInfo.PointerOut); // Add an observable for clicking if ((options.clickEventData !== null) && (options.clickEventData.constructor === EventData)) { buttonRect.pointerEventObservable.add(function (d, s) { options.clickEventData.happenedAt = stateManager.timeInMs; options.clickEventData.data.button = buttonRect; stateManager.addEvent(options.clickEventData); }, BABYLON.PrimitivePointerInfo.PointerUp); } resolve(buttonRect); }); }; Did that happen to someone else ? Any clue ? To circumvent the problem I create a 1*1 pixel button with opacity 0 at position 0,0 and that allows me to dispose() all the real buttons without error. Thanks !

I am trying to create a fragment shader via a PIXI.AbstractFilter to create a wave rippling effect to be applied to a background texture. I have already worked out the algorithm for the wave effect in JavaScript. What I am having difficulty doing is getting the data I need into the shader through PIXI. For my effect to work, I need to have a large Float32Array to keep track of wave heights and a texture containing the original, unaltered contents of the background image to read from in order to apply the effect of pixel displacement (light refraction). I've been doing a lot of searching and have come up with some partial solutions. I attempt to load my large Float32Array into the shader as a texture with type GL.FLOAT (with the OES_texture_float extension) and an internal format of GL.LUMINANCE and read from it. From what I can tell, my shader isn't receiving my data the way I need it to. Just as a test, I set gl_FragColor to read from my data texture, and instead of the solid black that should have appeared, it rendered a color from either the source texture or the texture of the sprite that the filter is applied to.If I weren't using PIXI, what I would try next is to use gl.getUniformLocation, but it takes the current program as its first parameter, and I don't know of a way to access that. The basic flow of my shader needs to go: Read From Array -> Calculate displacement based on value -> Render the current fragment as the color at x+displacement, y+displacement -> Get updated version of array This is my code in the constructor for my shader: ws.Shader = function(tex) { // GLSL Fragment Shader for Wave Rendering ws.gl = game.renderer.gl; ws.flExt = ws.gl.getExtension("OES_texture_float"); var unis = { dataTex: { type: "sampler2D", value: ws.gl.TEXTURE1 }, canvasTex: { type: "sampler2D", value: ws.gl.TEXTURE2 }, mapSize: { type: "2f", value: [ws.width+2,ws.height+2] }, dispFactor: { type: "1f", value: 20.0 }, lumFactor: { type: "1f", value: 0.35 } }; var fragSrc = [ "precision mediump float;", "varying vec2 vTextureCoord;", "varying vec4 vColor;", "uniform sampler2D uSampler;", "uniform sampler2D dataTex;", "uniform sampler2D canvasTex;", "uniform vec2 mapSize;", "uniform float dispFactor;", "uniform float lumFactor;", "void main(void) {", "vec2 imgSize = vec2(mapSize.x-2.0,mapSize.y-2.0);", "vec2 mapCoord = vec2((vTextureCoord.x*imgSize.x)+1.5,(vTextureCoord.y*imgSize.y)+1.5);", "float wave = texture2D(dataTex, mapCoord).r;", "float displace = wave*dispFactor;", "if (displace < 0.0) {", "displace = displace+1.0;", "}", "vec2 srcCoord = vec2((vTextureCoord.x*imgSize.x)+displace,(vTextureCoord.y*imgSize.y)+displace);", "if (srcCoord.x < 0.0) {", "srcCoord.x = 0.0;", "}", "else if (srcCoord.x > mapSize.x-2.0) {", "srcCoord.x = mapSize.x-2.0;", "}", "if (srcCoord.y < 0.0) {", "srcCoord.y = 0.0;", "}", "else if (srcCoord.y > mapSize.y-2.0) {", "srcCoord.y = mapSize.y-2.0;", "}", /*"srcCoord.x = srcCoord.x/imgSize.x;", "srcCoord.y = srcCoord.y/imgSize.y;",*/ "float lum = wave*lumFactor;", "if (lum > 40.0) { lum = 40.0; }", "else if (lum < -40.0) { lum = -40.0; }", "gl_FragColor = texture2D(canvasTex, vec2(0.0,0.0));", "gl_FragColor.r = gl_FragColor.r + lum;", "gl_FragColor.g = gl_FragColor.g + lum;", "gl_FragColor.b = gl_FragColor.b + lum;", "}"]; ws.shader = new PIXI.AbstractFilter(fragSrc, unis); // Send empty wave map to WebGL ws.activeWaveMap = new Float32Array((ws.width+2)*(ws.height+2)); ws.dataPointerGL = ws.gl.createTexture(); ws.gl.activeTexture(ws.gl.TEXTURE1); ws.gl.bindTexture(ws.gl.TEXTURE_2D, ws.dataPointerGL); // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE); ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.LUMINANCE, ws.width+2,ws.height+2,0, ws.gl.LUMINANCE, ws.gl.FLOAT, ws.activeWaveMap); // Send texture data from canvas to WebGL var canvasTex = ws.gl.createTexture(); ws.gl.activeTexture(ws.gl.TEXTURE2); ws.gl.bindTexture(ws.gl.TEXTURE_2D, canvasTex); // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE); ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.RGBA, ws.gl.RGBA, ws.gl.UNSIGNED_BYTE, tex.imageData); } I then attempt to update dataTex in the ws object's update loop: ws.activeWaveMap.set(ws.outgoingWaveMap); // WebGL Update ws.gl.activeTexture(ws.gl.TEXTURE1); ws.gl.bindTexture(ws.gl.TEXTURE_2D, ws.dataPointerGL); /* // Non-Power-of-Two Texture Dimensions ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_MIN_FILTER, ws.gl.NEAREST); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_S, ws.gl.CLAMP_TO_EDGE); ws.gl.texParameteri(ws.gl.TEXTURE_2D, ws.gl.TEXTURE_WRAP_T, ws.gl.CLAMP_TO_EDGE);*/ ws.gl.texImage2D(ws.gl.TEXTURE_2D, 0, ws.gl.LUMINANCE, ws.width+2,ws.height+2,0, ws.gl.LUMINANCE, ws.gl.FLOAT, ws.activeWaveMap); I'm sure that plenty of this isn't right, but I believe that I can sort things out once I can get to the point where I can actually access my data. Can anyone point me in the right direction? This is central enough to my project that I am willing to discard PIXI altogether if there isn't a way to implement what I am trying to do. Also, I am using PIXI via Phaser, if that makes a difference. Thanks!

Is it possible to use Phaser's QuadTree without enabling the physics system? I don't really need Physics I just want to check if mouse is over a specific tile of a large matrix. I have a matrix of sprites and it can grow or shrink. Roughly it can have from 70 up to 1500 tiles. I can use nested "for" cycle to visit each sprite tile and check if mouse cursor is over it but this check happens mostly each update cycle which means 60 frames per second times 1500 checks, that is 90000 checks in the worst case every single second. Quad Tree uses adjacency tiles to find if mouse is over a specific one. It is more optimized.

I am creating a Bejeweled game using Emanuele Feronato's awesome prototype; Match 3 Bejeweled HTML5 prototype made with Phaser – detecting combos. I created my own grayscale graphics in Photoshop, made them a little bigger, increased the grid size of the game, and used some code from his HTML5 Dungeon Raid tile engine made with Phaser – Part 4 tutorial to make the game scalable. I used Phaser's sprite tint property to color my jewels. They look awesome all randomly colored like that, but it is difficult to make matches on just shape alone. How would you tint specific frames a certain color? I will have made a great leap forward in my game when it can do the following: Select seven out of 13 color options Select seven out of 49 sprites in the Jewels spritesheet. I used the same layer style in this original. It doesn't look bad, but I think different styles of jewel as well as having the shapes all tinted the same color will make matches easier to see. The sprites should all be from different columns. For example, if the first sprite selected was the star in the top left corner of the image, the next frame should be a hexagon or other shape from a different row. Once the different frames have been chosen, the game should apply the chosen colors to to the chosen frames of my spritesheet. I have attached my code. I appreciate any help you can give. Thank you all very much! CatsTreasures.zip

I would like to create an array of colors in my shader code. What is the correct way to do this. Apparently you can't code this directly into the shader, but doing it via uniforms is supposed to work. The following code I have returns this error message in the console: Pixi.js Shader Warning: Unknown uniform type: undefined This is my shader code: precision mediump float; uniform vec3 cols[127]; uniform float screenHeight; uniform float screenWidth; void main(){ //Not implemented yet gl_FragColor =vec4(1.0,1.0,1.0,1.0); } And my JS code which is supposed to set up the uniforms: uniforms.screenHeight = {type:"f",value:dims.width}; uniforms.screenWidth = {type:"f",value:dims.height}; var cols =["0B5624", /* 125 more colors*/ "5B5A57"]; var mycols = [cols.length] ; for(var i=0; i<cols.length; i++){ mycols[i] = {type: "v3v", value:[(hexToR(cols[i])/256).toFixed(2), (hexToG(cols[i])/256).toFixed(2), (hexToB(cols[i])/256).toFixed(2)]}; } uniforms.cols = mycols; shady = new PIXI.AbstractFilter('',myShaderCode,uniforms);

hi, I want to have an external file with some parameters and after use it to draw my elements. The problem is that my value number.radius don't work in my circle...what i'm going wrong ? My index.html is good and inform the correct order ...parameters.js ...main.js //PARAMETERS.js var number=[] number.radius=100 alert(number.radius) // i got effectively the result 100 //MAIN.js var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create }); function create() { var graphics = game.add.graphics(0, 0); graphics.beginFill(0xFF0000, 1); graphics.drawCircle(300, 300, number.radius); // but here my circle don't appear why ? }

Hello I kind of stuck to read any data of pixels from the engine My goal is to read and set pixels from textures, just a little hint is probably enough. Thank you all for your time The playground: http://babylonjs-playground.com/#1I5MDT#2 i think i looking for this, but i cant get it to work: Best

Hi, I have the file background.js (below) and in use it to draw some elements of my background. The problem is with my grid. My grid is correctly drawing in my stage but i can't move his position. By default the origin is (0,0). i put grid.x=400 but it's still to x=0. How do you move it ? I try also to build my grid with the prototype function but i don't know do it... //background.js //e for background function draw(e,game,nameA,posx,posy,wi,he,color,valueAlpha) { var e=game.add.sprite(0,0,nameA); e.x=posx; e.y=posy; e.width=wi; e.height=he; e.tint=color; e.alpha=valueAlpha return e } //g for game, w for width, h for height //color like white and red is on a separate file function Grid(e,g,row,line,w,h) { //var group=g.add.group() var grid=[]; for (var j = 0; j < line; j++) { grid[j] = []; for (var i = 0; i < row; i++) { grid[j][i] = draw(e,g,"rect",0,0,w,h,white,1) ; grid[j][i].x = i*(w+1) grid[j][i].y =j*(h+1) }; }; grid.x=400 return grid } function drawE(g,e) { var e=[] e.player=draw(e,g,"rect",0,0,320,480,red,1) e.papers=Grid(e,g,1,9,10,10,80,240) return e } //game.js var theGame = function(game){ background = null } theGame.prototype = { create: function(){ background=drawE(this.game,this.background) } }

Hi there. So currently I have a single player open world game which I am in the process of developing multiplayer for. The current system of map gen is local, and done through a bunch of arrays lol. I chose this route LONG ago, and I know it wasn't the best option, but it was easier for me to throw this together than to learn how to used tiled and object layers etc. Using arrays seemed easier to me because I understood how I can respawn/kill dead objects from the array instead of having to learn tiled's object layer stuff. Anyway, my current system is as follows: At the top of my game basically I have something like this run PS: (The map is 2k x 2k TILES long, each tile is 32x32 so map is 64k x 64k pixels) var mapSize = 2000; var grid = new Array(mapSize).fill(0); for(var i = 0; i<mapSize+1; i++){ grid[i] = new Array(mapSize).fill(0); }; for(var i = 0; i<18000; i++){ var tempX = Math.round(Math.random()*(mapSize-1)); var tempY = Math.round(Math.random()*(mapSize-1)); if(grid[tempX][tempY] == 0){ grid[tempX][tempY] = 2; } } for(var i = 0; i<12000; i++){ var tempX = Math.round(Math.random()*(mapSize-1)); var tempY = Math.round(Math.random()*(mapSize-1)); if(grid[tempX][tempY] == 0){ grid[tempX][tempY] = 3; } } This is an example of how i am generating the map. Basically it creates a 2 dimensional array with values 0, 2, or 3 in this example. My rendering system is shown bellow, basically spawn any non 0 entry within 3k pixels of the person (or 91 tiles) by reading the map array from points based on the players current position: function mapGen(x1, y1, x2, y2){ if(x1<0){ x1 = 0; } else if(x2>(mapSize-1)){ x2 = mapSize-1; } if(y1<0){ y1 = 0; } else if(y2>(mapSize-1)){ y2 = mapSize-1; } for(var row = x1; row<x2; row++){ for(var col = y1; col<y2; col++){ if(grid[row][col]!=0){ temp = position(row, col); if(grid[row][col]==2){ createSprite = itemGroup.create(temp[0], temp[1], 'tree'); createSprite.scale.set(1.1, 1.1); } else if(grid[row][col]==3){ createSprite = itemGroup.create(temp[0], temp[1], 'boulder'); } createSprite.body.immovable = true; } }; }; } This is the render system that is called whenever a player ventures 3k pixels away from a position (The function variables are the corners of the 3k x 3k box around the player in tiles), when called, the position it's using as reference is changed to the current position of the player, so basically it just renders 3k pixels around the player until a player moves to far from that squares center and renders a new one, I do this bc the game cant handle more than a couple thousand sprites on the screen, and doing this lets me have like 200 rendered and have flawless performance. This system works fine for what I need, if there is a 0, leave it blank and the tilesprite background will show, if there is something there then spawn a tree or a rock or whatever said item is (This is just dummy code). For destroying sprites once a player destroys a sprite I get the pixel location of the now dead sprite and change it into tile position and set that tile position to 0. Which is why i chose this system over tiled, it seemed easier to me. Now finally, here is my problem: I have created a lot of the multiplayer aspect, and all the connections and player positions etc. However, the map is still different on every players screen due to the random gen that happens every time game loads. I can create the giant array on the server, however there is no way I can transfer it to the players. Creating the giant array only takes 300ms which is kinda a lot in terms of performance for my game, but if i render it once on the server and send it to every client my server crashes, i assume its because its wayyy too much data or takes too long. I tried writing it out to a file to read then from my clients but that's 11mb lol and I dont know where to smoothly read something like that. So basically, what are my options here. I would be open to switching to tiled, however i dont know how to randomly generate terrain there, and cant do it manually, as well as i like the system I have now bc how easily i can manipulate it. Another solution I have yet to try but I might, is instead of sending the entire map file, just write a file or a variable i could send through sockets with where all the non 0 items are around the array to cut down on space and increase performance. This was kinda poorly written, however I appreciate anyone who took the time to read this, I always chose bad times to write forum posts and right now Im in a rush so I didnt get a chance to re-read this and make myself not sound like I have the English skills of an 8 year old. So if anything needs clarifying let me know! Thanks again for the help.

Hello, I need to set a bunch of textures array in my shaders, is there a simple way to achieve that in babylon js or should I use something like here => http://stackoverflow.com/questions/19592850/how-to-bind-an-array-of-textures-to-a-webgl-shader-uniform Cheers