Search the Community

Showing results for tags 'group'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 202 results

  1. Hi guys, just a quick question. I'm trying to detect overlap between emitter particles and a group like so: create: function() { this.emitter = this.game.add.emitter(0, 0, 1000); this.emitter.enableBody = true; this.emitter.makeParticles('whiteParticle'); this.emitter.minParticleSpeed.setTo(100); this.emitter.maxParticleSpeed.setTo(800); this.emitter.gravity = 50; this.emitter.maxParticleScale = 3; this.emitter.minParticleScale = 0.1; this.emitter.setYSpeed(-150, 150); this.emitter.flow(1500, 100, 100, -1, false); //lifespan, frequency, quantity, total, immediate this.emitter.checkWorldBounds = true; this.emitter.outOfBoundsKill = true; this.fire = this.game.add.group(); this.fire.enableBody = true; this.fire3 = this.game.add.sprite(1423, 500, 'fireL3'); this.fire2 = this.game.add.sprite(1423, 500, 'fireL2'); this.fire1 = this.game.add.sprite(1423, 500, 'fireL1'); this.fire.add(this.fire3); this.fire.add(this.fire2); this.fire.add(this.fire1); }, update: function(){ this.game.physics.arcade.overlap(this.emitter, this.fire, this.damageFire, null, this); } damageFire: function(){ console.log('fire damaged!'); }, I can get this to work fine if I check for overlap between 2 sprites/groups, but I cannot get it to work for the emitter. Could anyone point me in the right direction? Thanks
  2. Hello, 1. I created a group groupA in the game. 2. I created a sprite spriteA and added it to groupA. 3. After that I kill() spriteA and keep its reference in a pool array for later use. 4. I destroy() groupA. 5. I get the spriteA from the pool array to be used in another group and try to change its texture with loadTexture(), I get error: phaser2.8.8.js:46794 Uncaught TypeError: Cannot read property 'cache' of null at Phaser.Sprite.loadTexture (phaser2.8.8.js:46794) That doesn't happen if I don't destroy the group in step 4. Could anyone please explain what is going on and what is the right way to reuse Sprites even when their container parents are destroyed?
  3. Failing miserably with alignTo()

    Currently making a menu, I have a bunch of buttons, that are essentially groups containing the button sprite itself and text. Trying to vertically align each subsequent group with their previously added button sprite inside the group (since we can't directly alignTo() groups). The code is essentially how it reads below: let rect, buttons; let InitState = { preload: function() { let square = this.game.add.graphics(0,0); square.beginFill(0xFFFFFF,1); square.drawRect(0,0,200,100); rect = square.generateTexture(); square.clear(); }, create: function() { buttons = this.game.add.group(); buttons.position = {x: 50, y: 50} let btnarray = ["ONE","TWO","THREE","FOUR","FIVE"]; btnarray.forEach(function(btnTxt) { let buttonGroup = this.game.add.group(buttons); let image = rect; let buttonImg = buttonGroup.add(this.game.make.button(0,0,rect)); let txt = buttonGroup.add(this.game.make.text(buttonImg.width/2,buttonImg.height/2,btnTxt)) txt.anchor = {x: 0.5, y: 0.5}; if(buttons.children.length>1) { // We won't be needing to align the first one buttonGroup.alignTo( buttons.getAt(buttons.children.length-2).children[0], // buttonImg Phaser.BOTTOM_LEFT, 0, 4 ); } }.bind(this)) }, } let Game = new Phaser.Game( 800, 600, "", Phaser.AUTO, InitState ); This is a simplified version of what I'm doing, but even in this simplified version, the same thing occurs. The first and second buttons are correctly placed, but the third one is positioned in top of the second, and the fourth in top of the third. As you can see on the picture below, we can only see the first and last buttons, because the rest is buried under "five". alignTo() always refers to the second-to-last button in the group (the last being the one I'm trying to move), so why it seems to always take position (0,0) (relative to buttons) as reference? Thanks in advance.
  4. Hello comrades, I'm new to phaser and I can't seem to create new objects to the group "capetinhas", even though I can load the sprite through game.add.sprite. Here's the code: var game = new Phaser.Game(448, 448, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { game.load.image('tabuleiro','assets/tabuleiro.png') game.load.spritesheet('devil','assets/devil.png',32,32); var capetinhas; } function create (){ capetinhas = game.add.group(); game.add.sprite(window.width,0,'tabuleiro');//loading the background game.add.sprite(128,128,'devil'); // this works capetinhas.create(32,32,'devil'); // this doesnt } function update (){ } Any helpe would be really apreciated. Thanks in advance.
  5. Hi i'm quite new with phaser but i'm making a game at the moment for a class project and i was wondering if their is a way to choose a specific sprite from a group of sprites.like maybe by order of how they were created or something . any help would be much appreciated
  6. Change pivot position of a group

    Hi I am new to phaser . I am working on a animation to rotate a glass with lid . when I rotate it ,it rotates anti cliockwise to the left . I want it turn clockwise to right . and when I try to change the pivot position the group position gets changed. Need help .
  7. Hello, I've got this code: create: function () { this.cursor = game.input.keyboard.createCursorKeys(); this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X); game.world.setBounds(0, 0, 1920, 0); //Fisicas game.physics.startSystem(Phaser.Physics.ARCADE); game.world.height = 1000; //fondo game.stage.backgroundColor = "#00FFFF"; //codigo de plataformas this.platforms = game.add.group(); this.platforms = game.add.sprite(0, 553, 'plataforma'); this.platforms = game.add.sprite(-400,300, 'plataforma'); game.physics.arcade.enable(this.platforms); this.platforms.body.immovable = true; // this.platforms = game.add.sprite(700,300, 'plataforma'); // this.platforms = game.add.physicsGroup(); //tipo this.player = game.add.sprite(125, 100, 'tipito'); this.player.anchor.setTo(0.5, 1); game.camera.follow('tipito'); game.physics.arcade.enable(this.player); this.player.body.gravity.y = 800; //this.player.body.collideWorldBounds = true; (PRODUCE BUG CON game.world.setbounds) //animaciones this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true); //this.player.animations.play('correr', 10, true); //game.physics.arcade.collide(this.player, this.platforms); }, update: function () { //this.walkVelocityR = this.player.body.velocity.x = 200 //this.walkVelocityL = this.player.body.velocity.x = -200 //this.jumpVelocity = this.player.body.velocity.y = -400 game.physics.arcade.collide(this.player, this.platforms); //this.platforms.body.checkCollision.down = false; game.camera.follow(this.player); if (!this.player.inWorld) { this.playerDie(); } if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.x = 200; this.player.body.velocity.x = -200; this.player.body.velocity.y = -700; } else if (this.cursor.right.isDown && this.cursor.left.isUp) { //this.cursor.left.enabled = false; this.player.body.velocity.x = 200; this.player.animations.play('correr', 5, true); this.player.scale.x = 1; this.a = 2; //console.log("este es a = " + a); } else if (this.cursor.left.isDown && this.cursor.right.isUp) { //this.cursor.right.enabled = false; this.player.body.velocity.x = -200; this.player.animations.play('correr', 5, true); this.player.scale.x = -1; } else if (this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.y = -700; } else { this.player.body.velocity.x = 0; this.player.animations.stop(); this.player.frame = 4; } /*/if(this.cursor.right.justUp){ this.cursor.left.reset(); } if(this.cursor.left.justUp){ this.cursor.right.reset(); }/*/ //var style = { font: "65px Arial", fill: "#ff0044", align: "center" }; //this.text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"}) //this.text.anchor.set(0.5); }, render: function (){ //game.debug.inputInfo(32,32); game.debug.key(this.cursor.right, 50,50) }, playerDie: function () { this.player.kill(); this.start() //game.time.events.add(1000, this.start, this) }, start: function (){ game.state.start('play'); } as you can see, I created a group which has two platforms sprites, the problem is when the collision between the player and the group occurs, just apply to the last one I created, the rest the player just avoid them. I don't know what is my mistake, please tell me if this is ridiculous or I'm an idiot.
  8. Just noticed an issue. Lets say we have a group named OurGroup with three buttons (represents settings window with buttons 'soundOn', 'pause', 'close'). Each button have its own inputDown listener (or any else like inputOver, inputOut etc.). Then we add this group to the game via this.game.add.group(ourGroup) It works perfect, all the buttons are clickable and so on. Some time later, we want to remove the group from the game (i.e. user clicked the close button on our window) by itself: /*somewhere in the OurGroup class*/ if(this.parent) { this.parent.removeChild(this); } OK, the OurGroup has succesfully removed from the game, it's invisible. But! The listeners attached to the group's buttons are still active and react the input events! Could someone explain me is it a bug or I'm doing something wrong? I migrated to Phaser from flash, and there after have removed a DisplayObject from a stage, all listeners attached to it were removed as well.
  9. Collision with group only collides onces

    I'm having an issue which I'm unsure what's happening and can't find anyone else having a similar issue. Basically, I create a group, create them, add a tween to animate them across the page. I create a player sprite and whenever the player collides with the other sprites in the group kill them and render another one. however, this only works on the first item I create. var group = game.add.group(); group.enableBody = true; group.physicsBodyType = Phaser.Physics.ARCADE; So create my group and then do a `for loop` to create all my enemies for (var i = 0; i < 2; i++) { c = group.create(game.width, 20, 'seacreatures', 'octopus0000'); c.name = "enemy" + i; c.body.immovable = true; c.alive = true; c.alignIn(laneArr[Math.floor(Math.random() * laneArr.length)], Phaser.RIGHT_CENTER); game.add.tween(c).to({ x: -200 }, speedArr[Math.floor(Math.random() * speedArr.length)], Phaser.Quadratic, true, 0, 0, false); } group.callAll('animations.add', 'animations', 'swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 32, '', 4), 30, true, false); group.callAll('play', null, 'swim'); game.physics.enable(c, Phaser.Physics.ARCADE); Below this I also render the player currPlayer = game.add.sprite(50, game.height / 4 * 2 + 45, "playerFish"); game.physics.enable(currPlayer, Phaser.Physics.ARCADE); currPlayer.body.immovable = true; currPlayer.physicsBodyType = Phaser.Physics.ARCADE; currPlayer.alignIn(laneRect_three, Phaser.LEFT_CENTER); currPlayer.scale.set(1.5); So in short, the enemy travels across the `x` axis and once it collides with the player it triggers a function which looks like this, my update function: game.physics.arcade.overlap(playerFish, enemyFish, collisionHandler, null, this); then the function it calls, `collisionHandler` looks like function collisionHandler () { killedEnemies += 1; c.destroy(); c.alive = false; text.setText("You have killed " + killedEnemies + " enemies !"); console.log("<<<<<<<<"); } But like I said, it only kills the first item it hits, am I missing anything?
  10. Cannot use spritesheet in group

    In the Phaser documentation for groups it says that you can do the following: group.create(x, y, "spritesheet", index) ...where index is the frame on the spritesheet you want be be included in the group. However, when I use this it just displays the entire spritesheet.
  11. Get Id of object in group

    Hello I'm using an overlap between player (joueur) and bottles (bouteilles). bottles is a group of 4 bottle and I want to know which bottle I'm interacting with in the function called by the overlap game.physics.arcade.overlap(joueur,bouteilles,interragitb,null,this); then the function function interragitb(joueur,bouteille){ cursors = game.input.keyboard.createCursorKeys(); if (cursors.up.isDown && points > 0) { bouteille.frame = bouteille.frame +1; point(0); } } and I want to increment a variable to know how many times I interracted with a spécific bottle how should I do ? Is there any way to get index in the group or var name ? Thank you
  12. Can't debug.body on a group!

    Hi, in my render function, I have the following: render: function() { this.game.debug.body(this.player); this.game.debug.body(this.redMonstarsGroup); }, Now, the player, has a little green box around him, however the monster (or the group of monsters) has nothing and I get a warning: " gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);" HOW TO I GET A LITTLE GREEN DEBUG BODY ON A GROUP OF OBJECTS?
  13. Can I do a recursive function?

    First of all, sorry for my english Hello! I'm trying to make a Arkanoid game on android Phaser. When the ball hits a brick, the brick disappears and the ball bounces well. Now I have two types of bricks, a normal brick, brick and TNT brick. I've implemented that when the ball touches a TNT brick, kill adjacent bricks too, but when one of those adjacent bricks is a TNT brick, it must call the same function recursively, but something does not work ... any idea? here is my function:
  14. Hello, I have searched a solution for a problem for long time and didn't found, if someone have some ideas I am taking all x) did someone know if it's possible to rotate a group of bodies around an anchor point, I set some bodies for invisble walls and my objective is to turn them around by 90° around an anchor point, I know It must be not very comprehensive so I set up an Image to explain myself. In the screen, I have 2 bodies and I want them to turn around the red dot what must be my anchor point, I know it's impossible in arcade so I tried in P2 physics and impossible to found any solution :/ Thanks for reading, feel free to leave a feedback
  15. how to add Phaser. Graphics to a group? doing some tweens to a group but the things i drawed using a graphic did not move allthogeder. i draw thing on create phase, is it any kind of problem? any guidance is welcome.
  16. Hi, I am getting some unwanted behaviour with groups and p2 physics. When the sprites is leaving the screen, I want to kill them and reset new ones. But when I kill the first one, and reset a new one, the physics goes haywire. Anyone got a suggestion on how to fix this? Check this pen for an example:
  17. Still working on the Phaser, making your first Phaser game tutorial. I am not familiar with js so the question might be easy. I added 5 baddies as a group after the tutorial and I was trying to make it move and change direction every 1 sec. I used a Direction function to determine the direction for 1 baddie. However, I tried to put the time.event.loop function in my loop of creating baddies, only 1 baddie will move around. Others had a velocity of 0. There's my code.
  18. Hello! I have an issue that I didn't understand too much. I'm trying to build a tiled-isometric-map loader for Phaser, where I have many issues about perfomance. So I will investigate different techniques to make them more lightweight for CPU/GPU trying to use some techniques like render the map layers in cropped RenderTextures (just draw the visible area of the map at once), using sprite-populated SpriteBatches/Groups as source (I tested with both). In simple words, the logical behind this is the following: Populate the SpriteBatch/Group with tile-based sprites from a cache-array (to prevent creating/destroying each time). Render that SpriteBatch/Group into the RenderTexture, clearing it before that. Cleaning the SpriteBatch/Group, putting the tile-based sprites back to the array and removing from the SpriteBatch/Group (without destroying them, off course). Create a Phaser.Image that show the RenderTexture in the screen. (Or create once, the texture are updated anyways). I tested that with one RenderTexture and works fine. The issue comes if I write more many of them (Assuming that 1 RenderTexture is equivalent at 1 Layer of the scenario), the screen starts showing y-inverted versions of the RenderTexture at random times. A important fact that this just occurs in WebGL mode (in Canvas the behaivour is the correct). I'm using Phaser CE 2.7.3. I coded a short example of the issue (each column is a different RenderTexture with correspondent Sprites), you're free to see and debug them : Canvas: http://elsemieni.net/inni/testCanvas/ WebGL: http://elsemieni.net/inni/testWebGL/ Some idea of what's going on there? Thanks in advance
  19. Filter on group not working

    Hey all, I'm trying to filter an entire group, but I can't seem to succeed, where applying that same filter to a sprite instantly works. I'm working on my first Typescript project and I like it a lot! I have a MainGame class (mainGame.ts) which extends Phaser.State and I have a Container class (container.ts) which extends Phaser.Group When I apply a filter to a sprite that I simply added like: this.body = this.add.sprite(0, 0, 'bgBase'); this.body.filters = [ new Phaser.Filter.BlurY(this.game, null,'') ]; the blur filter is applied. Now when I try to apply the filter to a container which contains Sprites, like: this.container = new Container(this.game); this.container.filters = [ new Phaser.Filter.BlurY(this.game, null,'') ]; does NOT work. But when I apply the filter directly to a Sprite inside the container, like: this.container.someSprite.filters = [ new Phaser.Filter.BlurY(this.game, null,'') ]; the filter is applied as expected. I must be overlooking something important for how I create or add the group, but I keep missing it. I hope somebody has an idea about where to look. Help will be much appreciated!
  20. Add images inside text? (Solved)

    Hello everyone, I'm currently creating my first Phaser game, so I'm relatively new to all of this. Basically what I'm trying to achieve is to create text with images inside. I'm thinking of building Strings like "This is a {{test}} String", which gets parsed in a way that the "{{test}}" part will be replaced by an image that has previously been loaded into the cache, using the identifier 'test'. I've been searching through the web in the past few days but didn't find anything that really helps me. For experimental purposes, the images I want to use in my Text are the Playstation input symbols (Cross, Square, Triangle and Circle). So, for example, if I add a text "Press {{cross}} to continue" to the game I want it to show the Cross-Symbol inside the text. Hopefully this explains enough. Does anyone have a good idea for a way of achieving this, or done this before? I will greatly appreciate any help! Kind regards and thanks for reading! Edit: Thanks for the answers! Just like mattstyles suggested, I figured I'd have to generate the text and image parts by parsing the string and then calculate each of the parts positions. For those who are interested in how I did it: First I parsed the string by splitting it at spaces (" "), iterating over the resulting array and depending on the "substring", either add a text or image to a previously defined group. Then I iterated over the groups children and set each of their x and y attributes after calculation the position, based on the all the previous children's widths, heights and a fixed anchor point. My result is a tooltip that follows the mouse pointer when hovering over certain objects. This is a very rough explanation. If anyone wants, I can provide some of my code with more precise information.
  21. I created these four groups: underlayer_group = game.add.group(); npc_group = game.add.group(); overlayer_group = game.add.group(); transtions_group = game.add.group(); I set these depth factor to help me sorting them: underlayer_group.depth = 1; npc_group.depth = 2; overlayer_group.depth = 3; transtions_group.depth = 4; The problem is: In some moments of the game, I use removeAll() method from the groups underlayer_group and overlayer_group to remove their children, so I can add new children. Here is how I add them: this.map_sprite = game.add.tilemap(this.key_name); this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); for(var i = 0; i < this.sprite.layers.length; i++){ var layer = this.sprite.createLayer(this.sprite.layers[i].name); layer.resizeWorld(); overlayer_group.addChild(layer); } I was hoping that only creating the groups in that initial order, I would not have problems with their z order. But I'm having. New layers come over transitions_group. So I created the depth property to help me sort after children insertion like this: game.world.sort('depth', Phaser.Group.SORT_ASCENDING); But this is also not working. What can I do to sort my groups properly? ---------- EDIT It seems that only the group with a graphic sprite (rectangle) is not working properly...
  22. group.onDestroy.add - cannot pass arguments

    Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar);
  23. Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar); and what I get on the other side instead of 'car1' and 'car2', is: [object, object] and true. I even tried using: this.currentTrack.createCars.bind(this), but it does not help Does anyone know why? Phaser version 2.6.2
  24. Absolute position of sprite

    Is there any way to get the absolute position of a sprite? I have a group holding several sprites and I want to move one of them. The group will be moved as a whole. The sprite's position is relative to the group, but I would like the position relative to the world, or more precisely, relative to the activePointer. I have tried using physics.arcade methods, such as angleToPointer, but those methods do not take inte account the object's offset, that is its parents' positions (the group's position). Is there any way built into Phaser to accomplish this? Or do I need to iterate over all parents and calculate the absolute position in my own function?
  25. Hello, I want to move group of sprites toward the player: var goBack = this.game.add.tween(this.pullGroup); goBack.to({x: this.player.world.x,y: this.player.world.y},2000); goBack.start(); But it seems that the group treats coordinates x, y as starting from group (like it has its own coordinate system) and not from Canvas' (0,0). How to make the tween movement work with world coordinate system and not in group (0,0)? Thanks for help, Edit #1 Ok I have overcome this problem by dividing player.x - child[0].x and the same for y.