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 185 results

  1. 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!
  2. 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.
  3. 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...
  4. 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);
  5. 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
  6. 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?
  7. 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.
  8. Hi I have a script (below): How do I get the elements for myItems, I want to drag an item over an identical item placed at the top of the stage so that I can kill it here is my custom function once there is an overlap touchItem1 : function(myitem, item){ console.log('MY ITEM ->' + this.myItems.key + ' - RANDOM ITEM KEY -> ' + this.getRandItem1); if (this.myItems == this.getRandItem1){ console.log('Touching the same id key and now i can kill the sprite'); } }, link : http://html5gamer.mobi/phaser2/santa/ var FreestyleGame = FreestyleGame || {}; FreestyleGame.GameState = { //initiate game settings init: function(currentLevel) { //use all the area, don't distort scale this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //cursor keys this.cursors = this.game.input.keyboard.createCursorKeys(); //initiate physics system this.game.physics.startSystem(Phaser.Physics.ARCADE); //game constants this.PLAYER_SPEED = 500; this.score = 0; }, create: function() { //moving stars background this.background = this.add.sprite(0, 0, 'background'); this.levelData = JSON.parse(this.game.cache.getText('level')); // create 3 top irems to choose from this.getRandItem1 = Math.floor((Math.random() * 15) + 1); this.getRandItem2 = Math.floor((Math.random() * 15) + 1); this.getRandItem3 = Math.floor((Math.random() * 15) + 1); // show 3 random items at top this.item1 = this.add.sprite(this.game.width / 2 - 200 ,100,'item' + this.getRandItem1); this.item1.anchor.setTo(0.5); console.log(this.getRandItem1); this.game.physics.arcade.enable(this.item1); this.item2 = this.add.sprite(this.game.width / 2 ,100,'item' + this.getRandItem2); this.item2.anchor.setTo(0.5); this.game.physics.arcade.enable(this.item2); this.item3 = this.add.sprite(this.game.width / 2 + 200,100,'item' + this.getRandItem3); this.item3.anchor.setTo(0.5); this.game.physics.arcade.enable(this.item3); //my items this.myItems = this.add.group(); this.myItems.enableBody = true; var item; this.levelData.itemData.forEach(function(element){ //create rendom x and y this.getRandX = Math.floor((Math.random() * 711) + 1); this.getRandY = Math.floor((Math.random() * 1111) + 200); //get info from the json file item = this.myItems.create(this.getRandX,this.getRandY, element.key); // get key //touch and drag item.inputEnabled = true; item.input.enableDrag(); }, this); this.myItems.add(item); //player this.player = this.add.sprite(500, 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.createOnscreenControls(); //load level this.loadLevel(); this.addScore = this.game.time.events.loop(Phaser.Timer.SECOND * 4, function(){ this.score ++; this.distance --; this.refreshStats(); }, this); }, update: function() { this.myItems.forEach(function(element){ //console.log(element.key); }, this); this.game.physics.arcade.overlap(this.myItems, this.item1, this.touchItem1, null, this); this.game.physics.arcade.overlap(this.myItems, this.item2, this.touchItem2, null, this); this.game.physics.arcade.overlap(this.myItems, this.item3, this.touchItem3, null, this); //listen to user input if(this.game.input.activePointer.isDown) { //get the location of the touch var targetX = this.game.input.activePointer.position.x; //define the direction of the speed var direction = targetX >= this.game.world.centerX ? 1 : -1; //move the player this.player.body.velocity.x = direction * this.PLAYER_SPEED; } // keyboard and touch control if (this.cursors.left.isDown || this.player.customParams.isMovingLeft){ this.player.body.velocity.x = - this.PLAYER_SPEED; } else if (this.cursors.right.isDown || this.player.customParams.isMovingRight){ this.player.body.velocity.x = + this.PLAYER_SPEED; } }, createOnscreenControls : function(){ this.leftArrow = this.add.button(this.game.world.width * 0.05,this.game.world.height /2, 'arrowButton'); this.rightArrow = this.add.button(this.game.world.width * 0.95,this.game.world.height /2, 'arrowButton'); this.leftArrow.alpha = 1; this.leftArrow.scale.setTo(2); this.rightArrow.alpha = 1; this.rightArrow.scale.setTo(2); this.rightArrow.scale.x = -2; //left this.leftArrow.events.onInputDown.add(function(){ this.player.customParams.isMovingLeft = true; }, this); this.leftArrow.events.onInputUp.add(function(){ this.player.customParams.isMovingLeft = false; }, this); this.leftArrow.events.onInputOver.add(function(){ this.player.customParams.isMovingLeft = true; }, this); this.leftArrow.events.onInputOut.add(function(){ this.player.customParams.isMovingLeft = false; }, this); //right this.rightArrow.events.onInputDown.add(function(){ this.player.customParams.isMovingRight = true; }, this); this.rightArrow.events.onInputUp.add(function(){ this.player.customParams.isMovingRight = false; }, this); this.rightArrow.events.onInputOver.add(function(){ this.player.customParams.isMovingRight = true; }, this); this.rightArrow.events.onInputOut.add(function(){ this.player.customParams.isMovingRight = false; }, this); }, touchItem1 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem1); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, touchItem2 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem2); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, touchItem3 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem3); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, }; thanks in advance Eric
  9. I'm making an endless runner as my first dive into phaser and I've working on getting the 'obstacles' for my player to jump over. I have 3 obstacles for the player to jump over, 2 on the 'ground' and 1 hanging from the top of the game. My plan is to have one obstacles randomly generated every 2-6 seconds and for them to move towards the player (the player is static except for being able to jump). But I'm not sure how to go about this. Can anyone point me in the right direction? just some sudo code or ideas how you would approach the problem? My repo is https://github.com/craftycal/vaultage if anyone would like to take a look.
  10. Hello all, I have a problem with Phaser P2 physics in short i have 2 groups with objects. One is for my projectiles and the other is for enemies. The problem is that i want when projectile hits an enemy, the enemy should not move (it bounce back a little...). This is the code for my enemies i set the body.kinematic = true but it doesn't work. Thanks. this.enemiesGroup = this.add.group(); this.enemiesGroup.enableBody = true; for(var i = 0; i < 3; i++){ for(var j = 0; j < 9; j++){ var tmp = this.enemiesGroup.create( 80 +(j*66), y , 'enemies_1'); this.physics.p2.enable(tmp, this.Debug); tmp.enableBody = true; tmp.physicsBodyType = Phaser.Physics.P2JS; tmp.name = 'enemy' + buff; this.enemiesHP[tmp.name] = 100; tmp.anchor.setTo(0.3); tmp.angle = 90; tmp.scale.setTo(0.6); tmp.body.setCircle(18); tmp.body.kinematic = true; tmp.checkWorldBounds = true; var exp = this.enemyExplosion.create(0, 0, 'explosion'); exp.visible = false; exp.exists = false; exp.anchor.setTo(0.5); buff++; } y = y + 90; }
  11. Game = function(game) { this.timer = 0; this.cycle = 1000; this.cnt = 0; } Phaser.GameObjectFactory.prototype.enemy = function(x,y,xPix,yPix,enemyNum) { return this.game.add.existing(new Enemy(this.game,x,y,xPix,yPix,enemyNum) ); } Game.prototype = { create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); enemies = game.add.group(); enemies.enableBody = true; // locations for the first group of enemies to fly in var group1PixelLocations = { 'x' : [game.width/2,game.width/2-30,game.width/2,game.width/2-30, game.width/2,game.width/2-30,game.width/2,game.width/2-30], 'y' : [(game.height/2)-30,(game.height/2)-30,(game.height/2)-60,(game.height/2)-60, (game.height/2)-90,(game.height/2)-90,(game.height/2)-120,(game.height/2)-120], }; //create enemies for (var i = 0; i < 8; i = i+2) { enemies.create(game.add.enemy(game.width/1.33,0,group1PixelLocations.x[i],group1PixelLocations.y[i],0)); //create another enemy object with opposite coordinates enemies.create(game.add.enemy(game.width/4,0,group1PixelLocations.x[i+1],group1PixelLocations.y[i+1],1)); } }, update: function() { if (game.time.now > this.timer) { this.timer = game.time.now + this.cycle; var en = enemies.getAt(this.cnt); // this is the function I want each child to perform en.group1Path(); this.cnt = this.cnt + 1; } } }; I'm trying to call a function that I created in the Enemy class(below) with the children in my group. However, the error I get is 'Uncaught TypeError: en.group1Path is not a function' . Which is odd becuase the group consists of Enemy objects. Enemy class: var Enemy = function(game,x,y,xPix,yPix,enemyNum) { Phaser.Sprite.call(this,game,x,y,''); this.xPix = xPix; this.yPix = yPix; this.enemyNum = enemyNum; this.create(); } Enemy.prototype = Object.create(Phaser.Sprite.prototype); Enemy.prototype.constructor = Enemy; var completed = false; Enemy.prototype.preload = function() { } Enemy.prototype.create = function() { //this.group1Path(); } Enemy.prototype.update = function() { if (!this.exists) return; if (completed) game.physics.arcade.moveToObject(this.enemy,this.pixel,100); } Enemy.prototype.isComplete = function() { completed = true; } //path of the first group Enemy.prototype.group1Path = function() { /*This is the function to be called*/ }
  12. Hello, I'm trying to apply a tint to the whole of a group, to designate a team. Instead of creating a spritesheet that includes every sprite corresponding to each team, I'm using a grayscale sprites, putting them in a group, and applying tint to that group. For some reason, this works perfectly with the "group.alpha" setting, but doesnt with the group.tint setting. The sprites just stay grayscale Here's my code: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'row', { preload: preload, create: create, update: update }); // Spritemap Key, spritemap url and JSON file URL var spriteMap = "main" var textureURL = 'assets/main.png' var atlasURL = 'assets/main.json' var terrainLayer; var terrain; var biffinRed; var army; var corps; function preload() { //Preloading... game.load.atlasJSONHash(spriteMap, textureURL, atlasURL) // Loads Sprite atlas and corresponding file} } ; function create() { // Start of create // creates Red Army supergroup biffinRed = game.add.group(); biffinRed.name = "Red SuperGroup"; biffinRed.inputEnableChildren = true, biffinRed.tint = 0xff0000; //inside biffinRed, creates "army group", and assigns properties: army = game.add.group(biffinRed); army.spriteMap = 'main'; army.textureURL= 'assets/main.png'; army.name = "Red army"; //inside army, create corps, that houses units array corps = game.add.group(army); corps.name = 'Army corps' corps = {units: [ {assetName: 'artillery0.png', pos_x: 3, pos_y: 3}, {assetName: 'artillery0.png', pos_x: 4, pos_y: 4}, {assetName: 'antiair0.png', pos_x: 2, pos_y: 4} ]}; //create sprite inside army group using corps properties. army.create(corps.units[0].pos_x*32,corps.units[0].pos_y*32, spriteMap, corps.units[0].assetName); Sorry for the noobie question, still new to phaser. Any help greatly appreciated, Bab
  13. hi guys, I wonder is there any way to check whether 2 sprite in different groups are overlap, in the p2 system, currently I am using game.physics.p2.setPostBroadphaseCallback(this.checkOverlap, this); to do it, however I think it maybe expensive because I need to check whether the 2 sprites are from same group (the same group should not do anything). and I do not need collide when 2 sprite impact, I just need them to trigger my function. so I wonder is there any way to do thing like body.collide in arcade system, thanks.
  14. I'm using Phaser and TypeScript to create a Snake game with multiple snakes and my question is about the general structure of the program. My question is: What is the best way to structure the data for such a game using Phaser.js? So I mean which variable types to use for the snakes, walls, apples etc. when the key features of the game would be: Everything is placed on a grid There are multiple snakes that can grow and shrink during a game Snakes move on a timer from tile to tile (so no smooth animation in-between tiles) There are walls, the layout differs per level but doesn't change during a game Food item appear randomly and can be eaten by the snakes The snakes are build up out of several sprites, and they will display the shape of the snake including the bends and turns with shadow effect etc. These snake-parts need to be updated as the snake moves/shrinks/grows. For each move the game will need to check if the snakeheads bumps into something, either a wall or a food item or another snake (or its own tail). I was first thinking of using just one big two-dimensional array, fill it with integers to represent all in-game items. And then another two-dimensional arry filled with sprites, make all those sprites invisible, and then for each move set the sprites (frame number/visibility) in the corresponding array positions. Array[x][y] (entire play area) with integers representing all items, 1=snakehead 2=snake-part-up .. 8=apple, 9=wall etc. Array[x][y] (entire play area) | +- Phaser.Sprite But a better approach would be to use Phaser.Group to group each snake, and then a separate Phaser.Group to hold all the food items and maybe also the walls. And for the hit detection/eat food etc. there need to iterate all groups children against all other groups children. Another thing is that each snake also needs to hold some extra information (head position, direction) and I can't easily extend default classes (using Type Script) array[snakes] | +- Phaser.Groups (a group for each snake) | +- Phaser.Sprites (snake parts) Phaser.Group (FOOD + WALLS) | +- Phaser.Sprite (sprite for each apple or mushroom) For the hit detection/eat food etc. it makes more sense to just put it in a two-dimensional array because everything is on a grid, and then you can simply lookup the grid positions to see if something is in it. So, I'll be glad to hear any ideas on this.. Btw I've already seen this Phaser Snake tutorial but that example does not address the issues with multiple snakes and the snake parts sprites.
  15. hello, I have an error when using destroy() on group.children[0] function create() { boomerangBullets = this.game.add.group(); boomerangBullets.enableBody = true; boomerangBullets.physicsBodyType = Phaser.Physics.ARCADE; boomerangBullets.setAll('checkWorldBounds', false); boomerangBullets.setAll('outOfBoundsKill', true); } function update() { if(game.physics.arcade.distanceBetween(player, boomerangBullets.children[0]) < 30) { boomerangBullets.children[0].destroy(); } } here is an error screenshot --> http://prntscr.com/cnea7s Please help me, the kill() method is working fine but I need to completely destroy the group children element.
  16. I simply want to know the best approach for destroying a group and everything within the group. According to the documentation: destroy(destroyChildren, soft) Destroys this group. Removes all children, then removes this group from its parent and nulls references. Unfortunately, I'm still finding that my references return an object - not null or undefined For reference, here is a simplified look at the object I'm trying to destroy: class MyObject extends Phaser.Group { constructor(game) { this.game = game; // Creating Phaser sprites and adding them to group } destroyObject() { this.destroy(); } }
  17. I just found there is a function called sort(key, order) inside game.world inherited from Phaser.Group. I have a list of objects of type Phaser.Graphics inside my parent also of type Phaser.Graphics. The parent object is a wall and the children are shelves. I need to fake a 3D effect that the shelves sit on top of each other as the "y" coordinate increases. I can do this by setting the child index to descending order i.e from larger to smaller, but I need first to sort my shelves by "y" coordinate in ascending order. (The shelves which have the smallest "y" coord. have the highest z-index i.e sit on top of the other). Could I use this Phaser.Group.sort(key order) function for children of Phaser.Graphics or not? Or maybe there is a another way to sort graphical objects?
  18. Hi, i'm trying to make my bomb collide with the sprite at border left and right, it's colliding but i wanna make them immovable and i'm getting stuck. this.backgroundImage = this.game.add.tileSprite(0, 0, 440, 600, spriteAssets.backgroundName); this.backgroundGraphics = this.game.add.graphics(0, 0); this.backgroundGraphics.lineStyle(2, 0xFFFFFF, 1); //this.barreiraGroup = this.game.add.group(); this.barreiraGroup = this.game.add.physicsGroup(); for(var j = 0; qnt >= j; j++){ var p = j*22; //this.barreiraGroup.create(0, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira = this.game.add.sprite(0, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira.tint = 0x677E52; this.backgroundBarreira.blendMode = PIXI.blendModes.MULTIPLY; this.barreiraGroup.add(this.backgroundBarreira); } for(var j = 0; qnt >= j; j++){ var p = j*22; //this.barreiraGroup.create(this.game.world.centerX+190, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira = this.game.add.sprite(this.game.world.centerX+190, j+p, spriteAssets.backgroundBarreira); this.backgroundBarreira.tint = 0x677E52; this.backgroundBarreira.blendMode = PIXI.blendModes.MULTIPLY; this.barreiraGroup.add(this.backgroundBarreira); } //this.barreiraGroup.setAll('body.immovable', true); //this.barreiraGroup.setAll('body.moves', false); With that code, my result: But without comment: this.barreiraGroup.setAll('body.immovable', true); this.barreiraGroup.setAll('body.moves', false); My result: NO COLLIDE
  19. Hi there. I'm an experienced JS dev looking to get into Game Development. I've started out with a fairly small top-down "rpg" style game. I'm used the program "Tiled" to create the world map. So far i've been following this tutorial to get started, learn the basics of Phaser, but now i'm unfortunately running into this problem. This tutorial is about 2 years old, and uses it's own "object" generator, however i'd really like to use Phaser's native `.createFromObjects` function. My code is as follows; this.map = this.game.add.tilemap("world"); this.map.addTilesetImage("sheet", "spritesheet"); let map = this.map; let objects = this.game.add.group(); objects.enableBody = true; this.map.objects.objects.forEach(function(element) { map.createFromObjects(element.name, element.gid, element.properties.sprite, 0, true, false, objects); }); The error I receive in the console; Tilemap.createFromObjects: Invalid objectgroup name given: goldCoins Tilemap.createFromObjects: Invalid objectgroup name given: playerSpawn Tilemap.createFromObjects: Invalid objectgroup name given: goldCoins Tilemap.createFromObjects: Invalid objectgroup name given: campFire Tilemap.createFromObjects: Invalid objectgroup name given: stool Tilemap.createFromObjects: Invalid objectgroup name given: sign I've cut out the majority of the code for sake of saving space in this forum post, but the full code is available here. I've already looked up multiple forum posts, each with their own solutions to fix the bug i'm experiencing, however none have worked. I've tried replacing the "groups" param with the Tiled object's name, as per this post, but i'm unable to find a fix for this. I'd appreciate any help anyone may provide for me.
  20. this is my first post so i apologize if i'm posting incorrectly. i'm trying to have a button change its frame and some of the others in the group. the buttons display fine initially and i can successfully change the properties but i cannot visually get them to change frames when one is clicked. on the other hand, if i want to change only one button that works (you can see that i left the code commented out for that). i left the changing button frames line blank because i've tried so many things and nothing seems to work. var GameState = { preload: function(){ this.game.load.spritesheet('btnSht', "tFassets/btnSprtSht.png", 100, 100, 4); }, create: function(){ btnArray = [ {x: 50, y: 200, id: 1, frm: 0}, {x: 150, y: 200, id: 2, frm: 0}, {x: 250, y: 200, id: 3, frm: 0}, {x: 350, y: 200, id: 4, frm: 0}, {x: 450, y: 200, id: 5, frm: 0}, {x: 50, y: 300, id: 6, frm: 0}, {x: 150, y: 300, id: 7, frm: 0}, {x: 250, y: 300, id: 8, frm: 0}, {x: 350, y: 300, id: 9, frm: 0}, {x: 450, y: 300, id: 10, frm: 0}, ]; this.btns = this.game.add.group(); var self = this; count = 0; btnArray.forEach(function (element){ btn = self.btns.create(element.x, element.y,'btnSht'); btn.idNum = element.id; btn.frame = element.frm; btn.inputEnabled = true; btn.events.onInputDown.add(self.btnFunc, this); }); }, btnFunc: function (sprite, event) { //console.log(sprite.idNum); /* this works to change the one clicked if (sprite.frame == 0) { sprite.frame = 1; count++; } else { sprite.frame = 0; count--; }; */ btnArray.forEach(function (element){ //resets all back to zero before element.frm = 0; //assigns new frame value to appropriate btns for (var i = 0; i < sprite.idNum; i++){ this.btnArray[i].frm = 1; }; //check to make sure values are changed and they are console.log(btnArray); //change btn frames visually }); }, update: function(){ }, }, game = new Phaser.Game(600, 400, Phaser.AUTO); game.state.add('GameState', GameState); game.state.start('GameState'); tF.js
  21. Hi i need some help with my school assignment so what i want to do is to kill the children at the same time if all the children's y position more than 820. or if i can check all the position of the children or the group ( i dont think that possible). animals.forEach(function(animal) { var z=0; if (animal.y > 820) { z++; console.log(z); } if (z>6) {animal.kill();} } ); the number of the children is 5 and the problem is the number of z is always 1 therefor the animal.kill() never been process. thought?? or do you have better way to check the position? really appreciate the help guys thanks
  22. Hi, I have next problem with collision.. I have a player: this.player = this.game.add.sprite(parseInt(playerx), parseInt(playery), 'player',5); this.game.physics.arcade.enable(this.player ); this.player.anchor.set(.5); this.player.scale.x=70/100; this.player.scale.y=65/100; this.player.body.setSize(25, 60, 0, 5); I have a group of animals: this.animal = this.game.add.physicsGroup(Phaser.Physics.ARCADE); this.animal.setAll('body.immovable', true); this.animal.setAll('body.bounce.x', 1); this.animal.setAll('body.bounce.y', 1); then i am creating animals: if (zwierzenazwa == "cow"){ this.cow =this.animal.create(zwierzex, zwierzey, 'cow'); this.cow.frame = zwierzefrlos; this.cow.id = iidzwierze; this.cow.name = zwierzenazwa; this.cow.datadodaniaanim = datadodaniaanim; this.cow.frameleft =5; this.cow.frameright = 13; this.cow.frameup =1; this.cow.framedown =9; this.cow.body.velocity.x = 0; this.cow.body.velocity.y = 0; //this.cow.body.immovable = true; //this.cow.anchor.set(0.45, 0.4); if(zwierzefrlos == 5 ){ this.cow.body.setSize(80, 38,20, 50); } else if(zwierzefrlos == 13) { this.cow.body.setSize(80, 38,30, 50); } else{ this.cow.body.setSize(38, 70,50, 40); } // this.cow.body.width = 48; //this.cow.body.height = 64; //this.game.debug.body(this.cow); this.cow.animations.add('cowleft',[7,6,5,4]); this.cow.animations.add('cowright', [12, 13, 14, 15]); this.cow.animations.add('cowdown', [8, 9, 10, 11]); this.cow.animations.add('cowup', [0, 1, 2, 3]); this.cow.animations.add('coweatleft', [20,20,20,20,20,20,20,20,21,22,22,23,22,22,23,22,22,23,22,22,23,22,21]); this.cow.animations.add('coweatdown', [24,24,24,24,24,24,24,24, 25, 26,26, 27,26,26,27,26,26,27,26,26,27,26,25,24]); this.cow.animations.add('coweatright', [28,28,28,28,28,28,28, 29, 30, 31,30,30,31,30,30,31,30,30,31,30,30,31,30,30,31,30,30,29,28]); this.cow.animations.add('coweatup', [16,16,16,16,16,16,16, 17, 18, 19,18,18,19,18,18,19,18,18,19,18,18,19,18,18,19,18,17]); //this.cow.scale.x=32; //this.cow.scale.y=32; this.animal.add(this.cow); //console.log(this.cow.id); } Then collision: this.game.physics.arcade.collide(this.player, this.animal, this.stopanimplayer, null, this); this.game.physics.arcade.collide(this.animal, this.animal, this.stopanimzwierz, null, this); And i have a problem because i must set immovable true to all animals to collide with player, but then there dont collide with each other in group.. Anyone can help to set it work?
  23. Hi guys, I would like to ask about group events and position that I assigned manually. If there a clean way to approach this? this.mouth1 = this.mouthGroup.create(150, 40, 'mouth1'); this.mouth1.inputEnabled = true; this.mouth1.input.enableDrag(); this.mouth1.events.onDragStart.add(this.onDragStart, this); this.mouth1.events.onDragStop.add(this.onDragStop, this); this.mouth1.scale.setTo(0.5); this.mouth1.anchor.setTo(0.5); this.mouth2 = this.mouthGroup.create(150, 120, 'mouth2'); this.mouth2.inputEnabled = true; this.mouth2.input.enableDrag(); this.mouth2.events.onDragStart.add(this.onDragStart, this); this.mouth2.events.onDragStop.add(this.onDragStop, this); this.mouth2.anchor.setTo(0.5); this.mouth2.scale.setTo(0.5); this.mouth3 = this.mouthGroup.create(150, 200, 'mouth3'); this.mouth3.inputEnabled = true; this.mouth3.input.enableDrag(); this.mouth3.events.onDragStart.add(this.onDragStart, this); this.mouth3.events.onDragStop.add(this.onDragStop, this); this.mouth3.anchor.setTo(0.5); this.mouth3.scale.setTo(0.5); etc....
  24. I am currently adding a sprite to my game with no texture as I just need an invisible draggable area, resizing it to the dimensions I need, then adding a bunch of buttons to it with .addChild(button) so that the buttons follow the sprite when dragged, which works fine, but the buttons adopt the scale of the sprite, which is undesired in this case. How can I reset the scale of a child after it has been added to a group?
  25. So, when i tried to remove from my my group "groundobjects" works fine only the first time. I will use a database to conect and get coordinates, there's no problem in that. I add the object to the group and with a timer i remove and add other. The first time works fine, then, when i add other sprite in this case with random positions the other are not removed. What im doing wrong? Ah im using a zoom function that i find in this forum Let my code... <script type="text/javascript"> var x = "<?php echo $_SESSION['coord_x']; ?>"; sessionStorage.setItem("c_x", x); var y = "<?php echo $_SESSION['coord_y']; ?>"; sessionStorage.setItem("c_y", y); alert(" " + x + "," + y + " "); function getWidthAndHeight() { var w = (this.width) / 2; var h = (this.height) / 2; sessionStorage.setItem("Ancho", w); sessionStorage.setItem("Alto", h); return true; } function loadFailure() { alert("'" + this.name + "' failed to load."); return true; } var myImage = new Image(); myImage.name = "assets/gray.jpg"; myImage.onload = getWidthAndHeight; myImage.onerror = loadFailure; myImage.src = "assets/gray.jpg"; var oldcamera; var worldScale = 1; var currentBounds; var mapSizeMax; var worldwidth = 1024; var worldheight = 720; var mapSizeX = 8000; var mapSizeY = 4000; var prevScale = {}; var nextScale = {}; var zoompoint = {}; var mapSizeCurrent; var distance = 0; var olddistance = 0; var distancedelta = 0; var easing = 0.1; var game = new Phaser.Game(worldwidth, worldheight, Phaser.AUTO, '', {preload: preload, create: create, update: update}); function preload() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setScreenSize(true); game.load.image('clouds', 'assets/gray.jpg'); game.load.image('dude', 'assets/body.png'); game.load.image('diamond', 'assets/diamond.png'); } function create() { timer = game.time.create(false); timer.loop(5000, updateStars, this); timer.start(); worldScale = 1; stageGroup = game.add.group(); // this group will contain everything except the UI for scaling backgroundobjects = game.add.group(); groundobjects = game.add.group(); mapSizeMax = mapSizeX; mapSizeCurrent = mapSizeMax; background1 = game.add.sprite(0, 0, 'clouds'); backgroundobjects.add(background1); stageGroup.add(backgroundobjects); sprite = game.add.sprite(sessionStorage.getItem("c_x"), sessionStorage.getItem("c_y"), 'dude'); groundobjects.add(sprite); stageGroup.add(groundobjects); currentBounds = new Phaser.Rectangle(-mapSizeX, -mapSizeY, mapSizeX * 2, mapSizeY * 2); game.camera.bounds = currentBounds; game.camera.focusOnXY(sessionStorage.getItem("Ancho"), sessionStorage.getItem("Alto")); game.input.mouse.mouseWheelCallback = function (event) { var wheelDelt = game.input.mouse.wheelDelta; if (wheelDelt < 0) { mapSizeCurrent -= 150; mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); } else { mapSizeCurrent += 150; mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); } worldScale = (mapSizeCurrent / mapSizeMax); }; } function update() { //touch zoom if (game.input.pointer1.isDown && game.input.pointer2.isDown) { olddistance = distance; distance = Phaser.Math.distance(game.input.pointer1.x, game.input.pointer1.y, game.input.pointer2.x, game.input.pointer2.y); distancedelta = Math.abs(olddistance - distance); if (olddistance > distance && distancedelta > 4) { mapSizeCurrent -= 150; } else if (olddistance < distance && distancedelta > 4) { mapSizeCurrent += 150; } mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); //prevent odd scalefactors - set a minimum and maximum scale value worldScale = (mapSizeCurrent / mapSizeMax); //calculate point between fingers (zoompoint.x and zoompoint.y) if (game.input.pointer1.x < game.input.pointer2.x) { zoompoint.x = game.input.pointer1.worldX + (Math.abs(game.input.pointer1.worldX - game.input.pointer2.worldX) / 2); } else { zoompoint.x = game.input.pointer2.worldX + (Math.abs(game.input.pointer1.worldX - game.input.pointer2.worldX) / 2); } if (game.input.pointer1.y < game.input.pointer2.y) { zoompoint.y = game.input.pointer1.worldY + (Math.abs(game.input.pointer1.worldY - game.input.pointer2.worldY) / 2); } else { zoompoint.y = game.input.pointer2.worldY + (Math.abs(game.input.pointer1.worldY - game.input.pointer2.worldY) / 2); } } else { // wheelzoom zoompoint.x = game.input.mousePointer.worldX; zoompoint.y = game.input.mousePointer.worldY; } // move camera / pan if (game.input.activePointer.isDown && !game.input.pointer2.isDown) { if (oldcamera) { // if moving the world always continue from the last position game.camera.x += oldcamera.x - game.input.activePointer.position.x; game.camera.y += oldcamera.y - game.input.activePointer.position.y; } oldcamera = game.input.activePointer.position.clone(); } // adjust camera center and zoom here else { oldcamera = null; rescalefactorx = mapSizeX / (mapSizeX * stageGroup.scale.x); // multiply by rescalefactor to get original world value rescalefactory = mapSizeY / (mapSizeY * stageGroup.scale.y); prevScale.x = stageGroup.scale.x; prevScale.y = stageGroup.scale.y; nextScale.x = prevScale.x + (worldScale - stageGroup.scale.x) * easing; nextScale.y = prevScale.y + (worldScale - stageGroup.scale.y) * easing; var xAdjust = (zoompoint.x - game.camera.position.x) * (nextScale.x - prevScale.x); var yAdjust = (zoompoint.y - game.camera.position.y) * (nextScale.y - prevScale.y); //Only move screen if we're not the same scale if (prevScale.x != nextScale.x || prevScale.y != nextScale.y) { var scaleAdjustX = nextScale.x / prevScale.x; var scaleAdjustY = nextScale.y / prevScale.y; var focusX = (game.camera.position.x * scaleAdjustX) + xAdjust * (rescalefactorx); var focusY = (game.camera.position.y * scaleAdjustY) + yAdjust * (rescalefactory); game.camera.focusOnXY(focusX, focusY); } //now actually scale the stage stageGroup.scale.x += (worldScale - stageGroup.scale.x) * easing; //easing stageGroup.scale.y += (worldScale - stageGroup.scale.y) * easing; } } function updateA() { groundobjects.destroy(); stageGroup.remove(groundobjects); } function updateStars() { updateA(); sprite = game.add.sprite(100+Math.random() * 900, 100+Math.random() * 900, 'dude'); groundobjects.add(sprite); stageGroup.add(groundobjects); } </script>