Search the Community

Showing results for tags 'groups'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 93 results

  1. 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 sample of script : in create I have : //player this.player = this.add.sprite(, - 200, 'player'); this.player.anchor.setTo(0.5);; this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.initEnemies(); this.scheduleEnemies = * 1, this.initEnemies, this); in update I have : // kill enemies when out of screen if (this.enemies.y >{ this.enemies.kill(); } //player and enemy hit, this.enemies, this.killPlayer, null, this); rest of the functions : initEnemies: function(){ this.enemies =; 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();'GameState'); }, Thanks for any help in adavnce Eric
  2. 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) {, 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 ='L1Map', 64, 64); // Now add in the tileset'tiles'); // Create our layer this.layer =; // Resize the world this.layer.resizeWorld(); //Set wall collision with tilemap, 1); // //animation for torch //this.torches.callAll('animations.add', 'animations', 'flicker', [0, 1, 2], 3.5, true); //this.torches.callAll('', 'animations', 'flicker'); this.torches.animations.add('flicker', [0, 1, 2], 3.5, true);'flicker'); //add torch group this.torches =; this.torches.add(new torch(, 500, 100)); this.torches.add(new torch(, 500, 400)); // The radius of the circle of light this.LIGHT_RADIUS = 150; // Create the shadow texture this.shadowTexture =, 3008); // Create an object that will use the bitmap as a texture var lightSprite =, 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.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 +, 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 +, 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; }, };
  3. So I have a group, and it has three sprites. create() { var parent =; var allSprites = [ 'sprite1', 'sprite2', 'sprite3']; for (i=0; i<3; i++){ childImage = parent.create(, (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(){, this); }
  4. Hello, As per title, can anyone explain the difference between Group / physicsGroup and use cases for each? Many thanks for your help, P
  5. Hello, I'm following an online tutorial and had a question regarding the code shown below. I was wondering what this.add(floorTile) does? I assume this is adding the floor tile sprites to a group? Note, I have removed much of the code for brevity. this.floorPool =; this.platformPool =; this.platform = new MrHop.Platform(, this.floorPool, 12, 0, 200); this.platformPool.add(this.platform); MrHop.Platform.prototype.prepare = function(numTiles, x, y) { this.alive = true; var i = 0; while(i < numTiles){ var floorTile = this.floorPool.getFirstExists(false); if(!floorTile) { floorTile = new Phaser.Sprite(, x + i * this.tileSize, y, 'floor'); } else { floorTile.reset(x + i * this.tileSize, y); } this.add(floorTile); } } update: function() { this.platformPool.forEachAlive(function(platform, index){, platform); }, this); },
  6. I am looking at this Phaser example, and am simply trying to replace the aliens sprites with simple filled circles drawn by graphics - I've also removed the car, I just want some sprites moving around the area randomly. Unfortunately, the sprites appear with the "no image" graphic. I'm not sure what I am doing wrong here, any help is appreciated: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); var aliens; var sprite; function preload() { sprite =,0); sprite.beginFill(0x00FFFF, 1); sprite.boundsPadding = 0; sprite.drawCircle(50, 50, 100, 100); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); aliens =; aliens.enableBody = true; for (var i = 0; i < 10; i++) { var s = aliens.create(,, sprite); = 'alien' + s; s.body.collideWorldBounds = true; s.body.bounce.setTo(0.8, 0.8); s.body.velocity.setTo(10 + Math.random() * 40, 10 + Math.random() * 40); } }
  7. Hi, i'm creating a gameover screen and i made it .. now i want color faded or like an overlay screen around gameover screen group. this is the code snippet i'm using ... this.gameOverScreenGroup =; this.gameOverScreenGroup.x = 197; this.gameOverScreenGroup.y = 52; /* var gameOverBGScreen =,; gameOverBGScreen.ctx.fillStyle = "#d5d2cc" gameOverBGScreen.ctx.fillRect(0,0,, */ /* Game Over screen BG */ this.gameOverBG =,0,this.gameOverScreenGroup); // this.gameOverBG.lineStyle(2, 0xFFFF00, 1.0); this.gameOverBG.drawRoundedRect(0,0,630,600,10); this.gameOverBG.beginFill(0xfaecbe, 1); this.gameOverBG.drawRoundedRect(0,0,630,600,10); this.gameOverBG.endFill(); this.gameOverBG.width = 630; this.gameOverBG.height = 600; // this.gameOverScreenGroup.add(gameOverBGScreen) this.gameOverScreenGroup.add(this.gameOverBG); //this.gameOverScreenGroup.x = this.gameOverBG.x; //this.gameOverScreenGroup.y = this.gameOverBG.y; var star_1 =, 74,'UI', 'star',this.gameOverScreenGroup); var star_2 =, 44,'UI', 'star',this.gameOverScreenGroup); var star_3 =*2+160, 74,'UI', 'star',this.gameOverScreenGroup); this.nextBtn =, 226,'UI', 'btn_next',this.gameOverScreenGroup); this.nextBtn.inputEnabled = false;
  8. I'm relatively new to Phaser, but up until now I have found everything to work as expected. I'm trying to develop a Worms clone (just for fun) and i'm basing most of my code on the following tutorial : The problem is, I can't get my worms (group) to collide with the land (bitmapdata converted into a sprite) Here is my create() create: function() { //create background first this.background =,0,'background'); //start the physics system this.physics.startSystem(Phaser.Physics.ARCADE); //create land this.createLand(); //create worms this.createWorms(); } and createLand() createLand: function(){ //create the land bitmap data this.landBmp = this.add.bitmapData(1500,1000); this.landBmp.draw('land1'); this.landBmp.update(); //convert to sprite landBmp -> land =,0,this.landBmp); //enable physics on land sprite this.physics.arcade.enable(; = true; = true; } createWorms() createWorms: function(){ this.worms =; this.physics.enable(this.worms,Phaser.Physics.ARCADE); for (var i = 0; i < 10; i++) { //calculate team and select name var team = i % 2; var name = names[Math.floor((Math.random() * names.length -1))]; //create a worm var worm = this.worms.create(land1SpawnPoints[i].x,land1SpawnPoints[i].y,'sprites'); = team; = name; = 100; //enable physics for the worm this.physics.arcade.enable(worm); worm.body.gravity.y = 200; worm.body.bounce = 0.3; worm.body.velocity.x = 1; //animations worm.animations.add('idle' , Phaser.Animation.generateFrameNames('worm_idle',1,1),5,true); worm.animations.add('move' , Phaser.Animation.generateFrameNames('worm_walk',1,3),5,true); //add the worm to worms group this.worms.add(worm); } }, and in my update function i'm calling this.physics.arcade.collide(this.worms,; //NOTE: this function works , and by works, I mean - // //The function this.test will be called when a worm overlaps with the land sprite //this.physics.arcade.overlap(this.worms,, this.test, null, this); When I run my code with physics.arcade.collide it doesn't trigger any callback function and the worms just fall through the ground. However if I use the overlap function , a callback function is triggered. If anyone could point me in the right direction as to what is going wrong I would be very grateful. Edit: Even if you could tell me how I can programmatically stop my worms from falling through the ground . For example, the following function would be called when a worm overlaps with the ground. test : function(worm, land) { //code goes here to prevent worm falling further },
  9. Hey! I'm struggling really hard trying to get anything to work - I checked to Playgrounds, forums and documentation but I can not find anything helpful about working with imported meshes. Am I blind? Most of the playground examples I can find work with simple meshes like cubes and spheres, but that is not helpful for me. var frame = new BABYLON.Mesh.CreateBox("box", 100, scene); frame.isVisible = false; var loader = new BABYLON.AssetsManager(scene); var meshTask = loader.addMeshTask("FW", "", "assets/", "groups.babylon"); meshTask.onSuccess = function (task) { LIBRARY['kubus'] = task.loadedMeshes[0]; LIBRARY['kubus'].parent = frame; } And then I can scale the frame without destroying my object. This seems rather complex for such a simple task, is there a better way? But how do I access the object now? Anything outside the onSuccess function happens before so everytime I try to reference LIBRARY['kubus'] outside this function, I just get an "undefined" error. I tried it with onFinish and put it after loader.load(). Next big problem: How do I access groups I set up in 3dsmax - is it even possible? Is there a better way than looking at the parent object of every mesh and comparing them? For example, this imported object consists of 70 meshes but I have models with up to 200 meshes and this approach seems rather counter intuitive. And for further reading, are there any further ressources I could check out? I don't find the Playground search to be too helpful and the documentation is great when needing assistance in rendering and other engine stuff but I find it lacking in the "importing and working with meshes and objects"-department. And what exactly is the difference between the name of an object and the name of the variable? I really don't understand this approach, is the name used internally for reference? Can I access the objects like this? Is there a way to get an overview of all objects in a scene? Thanks for all the help!
  10. Hello, this is my first time developing a game, ever. So please bear with me Currently I'm making a game where a player can shoot bullets at enemies. Each enemy has it's own healthbar, which should decrease when a bullet hits the enemy. For now, implemented the healthbars as a spritesheet with 5 different frames and added them as children to the enemies. function create() { enemies =; game.physics.arcade.enable(enemies); enemies.physicsBodyType = Phaser.Physics.ARCADE; enemies.enableBody = true; bars =; for (var i = 0; i < 5; i++) { enemy[i] = enemies.create(base1.body.x + game.rnd.integerInRange(0, 150), game.rnd.integerInRange(0, 150), 'enemy'); enemy[i].anchor.set(0.5); enemy[i].health = 100; bar = bars.create(0, -30, 'bar'); //sticking the healthbar to the enemy enemy[i].addChild(bar); bar.anchor.setTo(0.5); bar.frame = 0; // first frame -> full healthbar } } function update() { game.physics.arcade.overlap(bullets, enemies, bulletHitsEnemy, null, this); } function bulletHitsEnemy(bullet, enemy) { bar.frame += 1; // decreasing the healthbar bullet.kill(); -= 20; if ( <= 0) { enemy.kill(); } } The problem is that when I hit one of the enemies, only the healthbar of the first spawned enemy changes, all the other ones stay the same. I guess it's a problem with the bulletHitsEnemy() function, because it seems that bar.frame += 1 refers to the very first healthbar created in the enemy creation loop. Any ideas how to fix this? Thanks.
  11. I have a group of 6 elements and want them to do a specific tween separately with a delay between each. However, everything I've tries just seems to start them all together at once. var bulge = game.add.tween(tiles.getAt(i).scale).to({ x: 1.2, y: 1.2 }, 1000, Phaser.Easing.Back.InOut,false, 0, 1, true); Any help is appreciated
  12. I want to create game with unlimited world. I decided to make world wrap to move player and items to new position when player reaches end of world. wrapHorizontal() { let padding = game.width/2; let player = this.intoHell.player; if ( player.x + padding > { this.wrapped.x += 1; this.intoHell.player.x = padding; += 2*padding; this.intoHell.items.x -= - 2*padding; } else if ( player.x - padding < 0 ) { this.wrapped.x -= 1; this.intoHell.player.x = - padding; -= 2*padding; this.intoHell.items.x += - 2*padding; } } But it makes items/sky blink. I use this function everytime in update() and I move player using body.velocity from arcade physics system. What can be cause of this behavior? EDIT:
  13. I think groups are not really possible with Box2D based on a post by Rich some where. Instead, I have made some text follow the player by setting it's x and y relative to the player's positions. It's look alright but has a floating appearance like the body moves away faster some of the time. Is there a way to get multiple sprite attached to a body without any floating?
  14. Hi I need to find the distance between a player sprite and the closest sprite to it in a group of sprites, I know this can be done by iterating through each of the sprites in the group and checking them individually however, I was hoping phaser had a built in way of accomplishing this. Once the player is within a certain distance, it will die so if phaser has an event for this that will work as well. Thanks for any help
  15. Hi, I need more rendering groups, is it possible? Cheers
  16. Is it possible to create a group and configure in such a way that any child with position (0, 0) would be the center of the group instead of its top left corner? As I add bigger sprites to the group and its size increases, things get misaligned. The manual solution seems to involve re-adjusting the positions of the object in the group every time I add/remove something to it, which is kinda ugly.
  17. So in my game the player object is made up of several different sprites, so I made a Group called "player," and tried to add an object to it, "rover_proto." I am also trying to use forEach() to change attributes of each item belonging to the group. Here is my code: function createGameScene() { // format: (game, name, addToStage, enableBody, physicsBodyType) player =, 'player', true, true, Phaser.Physics.P2); Rover_proto = player.create(0, 0, 'Rover_proto'); //player.setAll('body', true, true, false); //Group collision player.forEachExists(function (item){ item.body.setCollisionGroup(playerCollision); item.body.collides(wallCollisionGroup); item.body.createGroupCallback(wallCollisionGroup, hurt_rover, player); });}So when I comment out the setAll() is says that "item.body is null." I thought that using allows you to enableBody for each item in the group, at least I think it worked that way in Arcade (I am using P2 now which is what is causing me this trouble). So that's when I added in player.setAll(), to hopefully give everything a body. However, if I uncomment it, then the program gives two errors: "TypeError: item.body.setCollisionGroup is not a function" and "TypeError: This.body.preUpdate is not a function." I don't understand why these problems are being caused. I remember using arcade the only way to fix the problem of objects in a group not having bodies was to use the method which I did use in this code. I've also used forEach before, but here it's not working. Is there something I'm missing? Am I using these functions wrong? Can forEach only be called during Update() and not Create() or something? How can I create a body and physics and set collisions, etc. for each object in a group if isn't working (and why isn't it working)? Thank you for your time, --jagd
  18. I have a group of clouds and from what I understand groups work like sprite pools, but also their creation order specifies the render order in the scene. I have 4 groups that I use for layering : backgroundLayer playerLayer foregroundLayer UILayer I have a cloud group that has my clouds an it's currently a child of my backgroundLayer so the clouds get rendered behind the player. The issue is that is some situations I want to have clouds in foregroundLayer. what is the best way to handle this? 1---> Should I have two groups of clouds, one for each layer? 2---> Or should I have one cloud group and add a cloud to the appropriate layer when needed and then when killing it move it back to the cloud group so that it's back in the pool I am spawning from? #2 seems messier, but only requires one cloud group.
  19. I been having an issue while looping through 2 groups and got this error, what I think this means is one of the objects is undefined. Uncaught TypeError: Cannot read property 'width' of undefined This is code (which is in Typescript) that causes the error: for (var i = this.tris.children.length - 1; i >= 0; i--) { for (var s = this.squares.children.length - 1; s >= 0; s--) { if(Overlap(this.tris.children[i],this.squares.children[s])){ this.BreakTris(this.tris.children[i]); this.BreakSquare(this.squares.children[s]); } } } The error is given specifically for the Overlap function. Two loops which go through 2 groups in order to compare each sprite of both groups to each other and check for Overlap, which is as follows: function Overlap(spriteA, spriteB) { var boundsA = (spriteA instanceof Phaser.Sprite) ? spriteA.getBounds() : spriteA; var boundsB = (spriteB instanceof Phaser.Sprite) ? spriteB.getBounds() : spriteB; return Phaser.Rectangle.intersects(boundsA, boundsB); } I don't see what i'm doing wrong? Thanks for reading.
  20. Hi, all I try to write game similar on: During development I have faced a problem how to place text above sprite for each element in group. At the moment I see only one solution, create for each letter personal group, but i think that it not the best decision. I have checked all documentation but haven't found anything similar. Thanks for any help.
  21. Hello, i'd like to know if there's any way to determine if a certain sprite is part of a certain group. More specifically, if i can check for collision between sprite and group, and make sure the sprite is colliding with another sprite that's part of a certain group. Thanks in advance.
  22. Hi, I have a problem with Ninja physics when I adding a group with sprite in my game. I read on this forum, that Ninja doesn't support group collision, but mayby something was changed withing the last year, because in my it work, but not that what I expected. What could be the cause this "bullet time" effect? Without group everything was ok. Can I use any trick for repair that?
  23. Hello, I encountered an error in "RenderingGroup.prototype.dispatch = function (subMesh)". This occured when I tried to activate shadows on a mesh. "material" is undefined in this case and produces an "needAlphaBlending of undefined" error.
  24. Hi All, I am trying develop a game that contains a color band of 5 different colored rectangles. So I created a group and added those rectangles to it(I have uploaded the image of the output). Now I am trying to write the code in such a way that the entire group will be moving horizontally once I drag it. But from what I found we can make the individual element in the group draggable but not the entire group. Anyways, I did write the code this way but I think its wrong as its not working. Here it is. var leftRectGroup =; var colorarray = ["0x607D8B", "0xFF5722", "0xFFEB3B", "0x9E9E9E", "0x795548"]; for(var i = 0; i < 5; i++){ var rectanglegraphics =,0); rectanglegraphics.beginFill(colorarray, 1); rectanglegraphics.drawRect(0, i*256, 100, 256); leftRectGroup.add(rectanglegraphics); rectanglegraphics.endFill(); } leftRectGroup.inputEnabled = true; leftRectGroup.input.enableDrag(); leftRectGroup.input.allowHorizontalDrag = false; Can anyone please provide me the right snippet to make the entire group draggable at once. Thanks in Advance.
  25. Hey everyone, how do I create an array of groups? I've tried things similar to this.groupArray.push(; Thanks