Search the Community

Showing results for tags 'groups'.



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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 90 results

  1. How would you move all the objects in a group to the bottom of the depth-sorting stack? Also, what is the easiest way to select a specific group object to manipulate it?
  2. So far I've encountered different options and was wondering if there is any of them that should be preferred or is better practice (I'm feeling inclined for 3, but I might be missing something). All three work (tested): // option 1 Phaser.Actions.Call(this.enemies.getChildren(), function(enemy) { enemy.speed = Math.random() * 2 + 1; }, this); // option 2 this.enemies.children.each(function(enemy) { enemy.speed = Math.random() * 2 + 1; }, this); // option 3, native js this.enemies.getChildren().forEach(function(enemy) { enemy.speed = Math.random() * 2 + 1; }, this);
  3. I was wondering if there is a way to add a custom property to all the sprites when creating a group, something like an "extend" property on the config object, similar to that of Scenes: this.enemies = this.add.group({ key: 'dragon', repeat: 5, setXY: { x: 120, y: 100, stepX: 70, stepY: 20 }, //proposed idea extend: { gold: 2, silver: 1 } }); Is there a way currently to set a property to all the elements of a group? from the source code I only found Phaser.Action.Call which can be used for this.
  4. ceeed

    silhouette masking

    Hey guys, Im making a top down game and i'm struggeling to find a solution, to show players behind an object. My goal was to have: 1. the background layer, which contains the map image 2. the player layer, which contains the player sprite and collisons 3. the foreground layer, which contains the objects which are over the player with this setup you wouldn't see the player behind the foreground layer so i want to add another layer which contains the player sprite tinted black or something but for that to work i need the foreground layer to be an alpha mask for the "silhouette" layer Any ideas how to archive this with a good performance?
  5. I have a question. I'm creating multiple "popups" in my game that's triggered with different buttons. Right now I have 5 functions 4 of them are basically the same thing. Closewindow, openwindow, closewindow1 and openwindow1. The only difference is that they correspond to different popups. Is there a more elegant solution (if that's the right word) than what I have right now. I plan on adding more so I feel like there's another way I just don't know what it is. I've looked at groups but don't items in groups have to be all doing the same thing? I attached my code if it helps. Thanks
  6. Hello community, i am new here, because i have any questions about blender + babylon.js I want to create a game (oh, really ? :D), write the logic in JavaScript and the design stuff in blender. Now i am an point i dont know how to group objects in blender, so in can use them in babylon.js I am great in Webdevelopment but terrible in blender (no experience) I am able to add stuff like tubes, cubes, etc. but not shure about how to group them so babylon.js can create meshes out of the groups. It seems to babylon.js create for every item (cubes, tubes, ...) i add in blender a new mesh. I want that when i group things, that only for the group are meshes created. (See screenshot) BTW i export every thing as *.obj And (for this point not necessary), how can in group, groups to an whole "item", like an building, car, or something else ? Thanks guys!
  7. mattdudley

    Scale Group and maintain position

    I posted a while back about tile maps without much luck, I may have been way too vague. No matter, finished up the game and was happy enough with it. On to the next one! Phaser kicks ass!!! My Issue: I have a few sprites that I've added to a group, what I want to do is scale the group down and maintain its position. I was reading about "pivot" but I couldn't get it to work. It seems like the group is shrinking to the top left corner. I want to set the "center" of the group and then scale down. If anyone has experience with this I'd love to hear how you solved it, if you need a code sample let me know. I haven't worked with the sandbox much but will be more than willing to set it up if it helps out. Thanks and cheers!
  8. I am fairly new to phaser. I am currently working on a card game using phaser and I am trying to work out how to best position sprites in zones around the board. My tests this far have revolved around hardcoding positions on the screen and that has been a math-tastic nightmare. I am building two decks of cards on either side of the screen. Then I am dropping several other cards onto the board in a row. The two decks of cards when clicked will be added to two seperate zones (one hand and one play). So, my thought process is as follows: Load all sprites Assign sprites by starting position into starting groups when a card is clicked add that card to the appropriate group use the group to determine the position within the bounds of the group (checking for overlap, etc). Does this seem like an appropriate way of handling it? If not, what would you suggest?
  9. So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using game.world.bringToTop on the text itself and the frontLayer group and it didnt work.
  10. So Ive searched and the topics discussing this in the forum didnt help. I added 3 groups: backLayer, middleLayer, frontLayer declared in that order. Added a sprite to back and middle, and a text to front, however the text is still below the sprites. I tried using game.world.bringToTop on the text itself and the frontLayer group and it didnt work.
  11. Hi there, I have two groups, each one with 50 item placed randomly in the stage. I need to check if any of the items of group1 overlaps with any of the items of group2 (and then, destroy it) but I´m doing something wrong as all the elements of group 2 are being destroyed, it´s like is checking object1 with the whole group2... how can I check items by item? I have this code (not working properly) function checkOverlaps(group1, group2){ group1.forEachAlive(function(obj1){ group2.forEachAlive(function(obj2){ var boundsA = obj1.getBounds(); var boundsB = obj2.getBounds(); if(Phaser.Rectangle.intersects(boundsA, boundsB)){ obj2.destroy(); } }, this) }, this) },
  12. Hello, everyone. I am using Phaser 2.8.3 Basically I want to add a sprite to two groups. In my game I want three columns so I have three column groups. this.leftColumn = game.add.group(); this.middleColumn = game.add.group(); this.rightColumn = game.add.group(); Later I add buttons into these groups this.spawnRateButton = []; this.spawnRateButton.push(this.leftColumn.create(0,0,"custom-left-button")); this.spawnRateButton.push(this.middleColumn.create(0,0,"custom-middle-button")); this.spawnRateButton.push(this.rightColumn.create(0,0,"custom-right-button")); for(var i=0;i<3;i++){ this.spawnRateButton[i].inputEnabled = true; this.spawnRateButton[i].events.onInputDown.add(this.buttonPress,this); } However here comes my problem. I want these columns to be scrollable, so I have to utilize this https://github.com/trueicecold/phaser-scrollable . this.scroller = game.add.existing(new ScrollableArea(x, y, width, height, {horizontalScroll: false})); //... this.scroller.addChild(this.leftColumn); this.scroller.addChild(this.middleColumn); this.scroller.addChild(this.rightColumn); this.scroller.start(); The scrolling works, however, the events.onInputDown of the spawnRateButtons do not. I click the buttons and nothing happens. When I take away the scroller everything works fine except for the scrolling, of course. When I add the sprites individually to the scroller it doesn't work either. I am guessing this is because I am trying to add the sprites to two groups? Is there a correct way to do this?
  13. puzzler

    The subtleties of adding children

    I'm starting to use Phaser, and am mystified by the subtle complexities of how the API differs for sprites vs groups. Let's look at the process of creating a display element, and then adding it as a child of another display element at a given x,y. 1. Creating a sprite and adding it as a child of another sprite at a given x,y parent.addChild(game.make.sprite(x,y,"artkey")) 2. Creating a sprite and adding it as a child of a group at a given x,y parent.add(game.make.sprite(x,y,"artkey")) Why do we need to use add here, instead of addChild? 3. Creating a group and adding it as a child of a sprite at a given x,y g = parent.addChild(game.make.group()); g.x = x; g.y =y; Why is there no way to make a group with a given x, y in one step like sprites? Why the need to manually set position in two extra steps? 4. Creating a group and adding it as a child of a group at a given x,y g = parent.add(game.make.group()); g.x = x; g.y= y; For this, we use add and then we also need the two extra steps. Did I get the taxonomy correct here? Why is every combination different? Thanks.
  14. I looked at the documentation on how to create a sprite https://phaser.io/docs/2.6.2/Phaser.GameObjectFactory.html#sprite It takes in the following parameters x y key frame group It's very easy to add a sprite with just the first three parameters car1 = this.game.add.sprite(800, 400, 'car'); But it fails when I try to add the car to a group car1 = this.game.add.sprite(800, 400, 'car', objects); If I went with the first declaration and then added objects.add(car1) it will then work I need to use the second declaration because my codebase is becoming way too large, and I need fewer lines. Not sure, why this is failing. Maybe an update killed this functionality?
  15. Hello, I'm wondering if someone could help me solve this problem I have with 'Groups' in Phaser. So I have a group called 'enemy_wave' and it has 2 sprites attached to it: 'e_blue' and 'e_red'. Now, I want to 'kill' (sprite.kill();) 'e_blue' sprite and 'revive' (sprite.revive();) it later. Everytime I try to do that it also kills 'e_red', no matter how I put it. this.enemy_wave = game.add.group(); this.enemy_wave.enableBody = true; this.enemy_wave.physicsBodyType = Phaser.Physics.ARCADE; for (i = 0; i < system_var.length; i++) { for (j = 0; j < system_var[i].length; j++) { switch(system_var[i][j]){ case 'b': var e_blue = this.enemy_wave.create(40 + 40 * j, 40 + 40 * i, 'enemies'); this.enemy_wave.add(e_blue); break; case 'r': var e_red = this.enemy_wave.create(40 + 40 * j, 40 + 40 * i, 'enemies'); this.enemy_wave.add(e_red); break; } } } This is how I 'kill' sprites: this.enemy_wave.forEachAlive(function (e_blue) { e_blue.kill(); }, this); And this is how I 'revive' sprites: this.enemy_wave.forEachDead(function (e_blue) { e_blue.revive(); }, this); So yeah it doesn't matter if I kill 'e_blue' or 'e_red' because either way it 'kills'/'revives' all sprites attached to this group. How do I go about this? What seems wrong here? ~Thanks!
  16. Hey guys, I have a quick question about 'Groups' as I'm kinda new to this Phaser HTML5 game dev. So my plan is to create multiple groups and have control over each one of them. First thing that came into my mind is to create a 'for loop' and be done with! Problem is that I don't know how to assign different names for a variable (wave).Example: Instead of doing this: this.wave00 = game.add.group(); this.wave00.enableBody = true; this.wave00.physicsBodyType = Phaser.Physics.ARCADE; this.wave01 = game.add.group(); this.wave01.enableBody = true; this.wave01.physicsBodyType = Phaser.Physics.ARCADE; this.wave02 = game.add.group(); this.wave02.enableBody = true; this.wave02.physicsBodyType = Phaser.Physics.ARCADE; I am trying to do this: for(i=0; i<10; i++){ this.['wave'+i] = game.add.group(); this.['wave'+i].enableBody = true; this.['wave'+i].physicsBodyType = Phaser.Physics.ARCADE; } So I'm sure you got the idea but this (['wave'+i]) is the problem. Can someone help me with this? What is the correct way of writing it? I've been searching but maybe I'm not questioning this correctly. Thanks and sorry for the noob question!
  17. m4uro

    Depth sort + multiple groups

    I have two groups of sprites, one containing trees, and another one containing characters. I want to sort them with the group.sort() function, but in order to do that I would need to put them in other, bigger group. However, I can't do that with the approach taken in the example of "sub groups", because when I do it that way, the _container has other containers as its children, instead of the actual sprites. What is the best/easiest way to accomplish this, without losing the flexibility of having separate groups for trees and characters?
  18. Hi all, first post, happy to be here. I'm pretty new to Phaser (love it) but not to JavaScript or web development. For my first game, I'm making a Raiden-style top-down shooter. My problem is in using motion paths. I can get them working for one enemy ship, but I'd like to apply them to all the ships in a group. The ships from the group enter the world at an interval, so they'd be on different parts of the path at any given time. Here's my group. What I was trying to do is to use that pathPosition property to store the correct index value of the path for each individual ship. enemies = game.add.group(); enemies.enableBody = true; enemies.physicsBodyType = Phaser.Physics.ARCADE; enemies.createMultiple(10, 'enemy'); enemies.setAll('anchor.x', 0.5); enemies.setAll('anchor.y', 0.5); enemies.setAll('scale.x', 2.0); enemies.setAll('scale.y', 2.0); enemies.setAll('angle', 180); enemies.setAll('pathPosition', 1); // this is a custom value for motion path Here's my spawning function: function spawnEnemy(numOfEnemies) { if (numOfEnemies > 0) { var randTime = getRandom(1000, 1500); // var x = game.rnd.integerInRange(50, game.width - 50); // var y = -100; var x = path[0].x; var y = path[0].y; // a promise that handles enemy spawning var sendEnemies = new Promise(function (resolve) { var enemy = enemies.getFirstExists(false); if (enemy) { enemy.reset(x, y); enemy.checkWorldBounds = true; // without this can't check if sprite is in bounds enemy.events.onOutOfBounds.add(hasLeftBottom, this); // this adds a custom callback //enemy.body.velocity.y = enemySpeed; } resolve(1); }); // calls the promise and sets a success result. sendEnemies.then(function (result) { setTimeout(function () { spawnEnemy(numOfEnemies - 1); }, randTime); }); } } Here's my plot function: function plot() { var x = increment / game.width; for (var i = 0; i <= 1; i += x) { var px = game.math.catmullRomInterpolation(points.x, i); var py = game.math.catmullRomInterpolation(points.y, i); path.push({ x: px, y: py }); } } Here's what I'm trying to do in my update function: enemies.forEach(function (enemy) { if(path[enemy.pathPosition]){ enemy.x = path[enemy.pathPosition].x; enemy.y = path[enemy.pathPosition].y; enemy.pathPosition ++; } else{ enemy.body.velocity.y = 300; } }); What I get is a jumbled mess of flashing enemy ship sprites crawling through their points. There must be a better way. Help?
  19. Hi i'm very new to phaser and i have one problem. I'm using a group (called platforms) to put my ground in it. But when i'm creating the ground and i test the game, the ground isn't showing up. var game = new Phaser.Game(1024, 512, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var platforms; function preload() { game.load.image('platform', 'assets/platform.png'); } function create() { /* === GROUPS === */ // PLATFORMS platforms = game.add.group(); // PHYSICS platforms.enableBody = true; /* === GROUND === */ var ground = platforms.create(0, 0, 'platform'); ground.scale.setTo(2, 1); ground.body.immovable = true; } I hope someone has a solution for this. thanks
  20. Terumi

    center align a group

    Hello all, Is it possible to align a group to the center of the stage? I have a series of buttons that comprise the locked and unlocked levels of my game. Because the number of levels is arbitrary (as for now) is it possible to determine the width of the group in order to align it to the stage?
  21. Hey! I have a group of enemies created like this (called from create()): spawnEnemies: function(map){ this.enemies = this.game.add.group(); this.enemies.enableBody = true; this.game.physics.arcade.enable(this.enemies); var enemyStartPositions = this.findObjectsByType('enemyStart', this.map, 'objectLayer'); for(var i = 0; i < enemyStartPositions.length; i++){ var enemyStart = enemyStartPositions[i]; var enemy = new Enemy(this.game, enemyStart.x, enemyStart.y, 'cultist'); enemy.countStats(); this.enemies.add(enemy); } this.enemies.setAll("body.immovable", true); } In the update function - I try to detect the collision between the children in the group like in this example (using 2.4.7): http://examples.phaser.io/_site/view_full.html?d=arcade physics&f=group vs self.js&t=group vs self&phaser_version=v2.4.7& this.game.physics.arcade.collide(this.enemies); But they wont collide with - just passing trough - each other. Also tried with adding a callback as when I let the player sprite collide with the enemy group like this: this.game.physics.arcade.collide(this.player, this.enemies, this.collisionHandlerPlayerAndEnemy, null, this); this.game.physics.arcade.collide(this.enemies, null, this.collisionHandlerEnemyAndEnemy); And the callback-function will not be called (may it be that this does not even work at all when the case is group to group?). I need someone elses eyes on this. No properties for enemy body is set outside these code blocks.
  22. OGCrab

    Groups overlap

    So I am trying to create a game like battle cats if any one knows what that is. But i have to test if the enemy sprite is overlapping with the player sprites that I am spawning. I am using a group to spawn them so that i can do the this.player.create(x, y, 'image'). But if 1 sprite from the groups collide with the enemy i have to stop them by setting velocity to 0 so that it will stop moving and do some damage. The problem is that I dont know how to only stop the sprite that is actually touching the enemy sprite from a group. So each time 1 sprite from the group touches the enemy sprite, all the sprites stop moving. Any ideas on how to fix this? or if there is an easier way of doing this I would like to know Thank you in advance for any help you can give me
  23. Hi All Quick question, I am scratching my head on this for the last day - what am I doing wrong ? I have created a basic car driving on a highway and to avoid the cars. I hae created an enemies grou fornthe car and my car is a player object http://html5gamer.mobi/phaser2/carChase/index.html sample of script : in create I have : //player this.player = this.add.sprite(this.game.world.centerX, this.game.world.height - 200, 'player'); this.player.anchor.setTo(0.5); this.game.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.initEnemies(); this.scheduleEnemies = this.game.time.events.loop(Phaser.Timer.SECOND * 1, this.initEnemies, this); in update I have : // kill enemies when out of screen if (this.enemies.y > this.game.height){ this.enemies.kill(); } //player and enemy hit this.game.physics.arcade.overlap(this.player, this.enemies, this.killPlayer, null, this); rest of the functions : initEnemies: function(){ this.enemies = this.add.group(); this.enemies.enableBody = true; this.createEnemy(); }, createEnemy: function(){ // create a random lane for the cars to drive down - 4 lanes var carRandom = Math.floor((Math.random() * 4) + 1); ; if (carRandom == 1){ //console.log('1st lane'); this.laneX = 50; this.laneY = -150; this.vel = 400; } else if (carRandom == 2){ //console.log('2nd lane'); this.laneX = 220; this.laneY = -150; this.vel = 400; } else if (carRandom == 3){ //console.log('3rd lane'); this.laneX = 500; this.laneY = -150; this.vel = 900; } else if (carRandom == 4){ //console.log('4th lane'); this.laneX = 660; this.laneY = -150; this.vel = 900; } // creat random cars var key = Math.floor((Math.random() * 4) + 1); ; // create enemy if one exists in the enemies group var enemy = this.enemies.getFirstExists(false); if (!enemy){ enemy = this.add.sprite(this.laneX,this.laneY, 'car' + key); } else { enemy.reset(this.laneX,this.laneY, 'car' + key); } // make the cars move towards the bottom enemy.body.velocity.y = this.vel; // add enemy to enemies group this.enemies.add(enemy); if (carRandom > 2){ // reverse the car image in the last 2 lanes enemy.scale.setTo(-1); } }, killPlayer: function(player, enemy) { cosnole.log('HIT !'); this.player.kill(); this.game.state.start('GameState'); }, Thanks for any help in adavnce Eric
  24. WholemealDrop

    Animation Issues

    I'm working on a dungeon/cave exploration game and created some torches to scatter throughout the gamespace to guide the player via a tutorial here: Game Mechanic Explorer Lighting. Got the lighting working wonderfully finally but when I try to animate the sprite linked to the torches nothing happens or it breaks the game. I've tried standard animation add and play calls along with the shown callAll animation.Both animations and callAll throws errors of cannot read property animations/callAll of undefined. Any thoughts as to why I can't get the torch to animate? Relevant code below (my game is broken out to gamestates so assume that the sprite calls for the preload are correct): var PrototypeMaze = PrototypeMaze || {}; PrototypeMaze.Game = function() {}; PrototypeMaze.Level1 = { create: function() { // Create torch objects // Torch constructor var torch = function(game, x, y) { Phaser.Sprite.call(this, game, x, y, 'torch'); // Set the pivot point for this sprite to the center this.anchor.setTo(0.5, 0.5); }; // Torches are a type of Phaser.Sprite torch.prototype = Object.create(Phaser.Sprite.prototype); torch.prototype.constructor = torch; //Tilemap setup var map; var layer; //specify the tile size here or we can't render it this.map = this.game.add.tilemap('L1Map', 64, 64); // Now add in the tileset this.map.addTilesetImage('tiles'); // Create our layer this.layer = this.map.createLayer(0); // Resize the world this.layer.resizeWorld(); //Set wall collision with tilemap this.map.setCollisionBetween(1, 1); // //animation for torch //this.torches.callAll('animations.add', 'animations', 'flicker', [0, 1, 2], 3.5, true); //this.torches.callAll('animations.play', 'animations', 'flicker'); this.torches.animations.add('flicker', [0, 1, 2], 3.5, true); this.torches.animations.play('flicker'); //add torch group this.torches = this.game.add.group(); this.torches.add(new torch(this.game, 500, 100)); this.torches.add(new torch(this.game, 500, 400)); // The radius of the circle of light this.LIGHT_RADIUS = 150; // Create the shadow texture this.shadowTexture = this.game.add.bitmapData(2560, 3008); // Create an object that will use the bitmap as a texture var lightSprite = this.game.add.image(0, 0, this.shadowTexture); // Set the blend mode to MULTIPLY. This will darken the colors of // everything below this sprite. lightSprite.blendMode = Phaser.blendModes.MULTIPLY; }, update: function() { //tilemap collision this.game.physics.arcade.collide(this.mainChar, this.layer); // Update the shadow texture each frame this.updateShadowTexture(); }, render: function() { }, updateShadowTexture: function() { // This function updates the shadow texture (this.shadowTexture). // First, it fills the entire texture with a dark shadow color. // Then it draws a white circle centered on the pointer position. // Because the texture is drawn to the screen using the MULTIPLY // blend mode, the dark areas of the texture make all of the colors // underneath it darker, while the white area is unaffected. // Draw shadow, rgb dictates how dark the shadow is this.shadowTexture.context.fillStyle = 'rgb(100, 100, 100)'; this.shadowTexture.context.fillRect(0, 0, 2560, 3008); //Draw circle of light around torch this.torches.forEach(function(torch) { var radius = this.LIGHT_RADIUS + this.game.rnd.integerInRange(1, 10); var gradient = this.shadowTexture.context.createRadialGradient(torch.x, torch.y, this.LIGHT_RADIUS * 0.75, torch.x, torch.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); this.shadowTexture.context.beginPath(); this.shadowTexture.context.fillStyle = gradient; this.shadowTexture.context.arc(torch.x, torch.y, this.LIGHT_RADIUS, 0, Math.PI * 2); this.shadowTexture.context.fill(); }, this); // Draw circle of light around companion var radius = this.LIGHT_RADIUS + this.game.rnd.integerInRange(1, 10); var gradient = this.shadowTexture.context.createRadialGradient(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS * 0.75, this.sideChar.x, this.sideChar.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); this.shadowTexture.context.beginPath(); this.shadowTexture.context.fillStyle = gradient; this.shadowTexture.context.arc(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS, 0, Math.PI * 2); this.shadowTexture.context.fill(); // This just tells the engine it should update the texture cache this.shadowTexture.dirty = true; }, };
  25. So I have a group, and it has three sprites. create() { var parent = game.add.group(); var allSprites = [ 'sprite1', 'sprite2', 'sprite3']; for (i=0; i<3; i++){ childImage = parent.create( game.world.centerX, game.world.centerY+ (i*30), allSprites); childImage.anchor.setTo(0.5, 1); childImage.inputEnabled = true; childImage.input.useHandCursor = true; } } How to I trigger function changeText(); when one of the child sprite is clicked. So far I have tried this method below but it only detects click on the last sprite. update(){ child.events.onInputDown.add(changeText, this); }