Search the Community

Showing results for tags 'child'.



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

  1. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : https://jsfiddle.net/3sf1b2zL/18/ var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop','https://s1.postimg.org/6fz3duzc0r/user_input_box.png'); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x = this.game.width/2; shopBtn.y = this.game.height*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main'); Please help me so that only the button takes click and text should not take the click Thanks
  2. angleToPointer on child sprite

    Hi guys, I'm trying to rotate a player's arm (anchored at the shoulder) to the mouse pointer using angleToPointer() method for aiming. I have a player sprite and a frontArm sprite. angleToPointer works as expected until I make the frontArm sprite a child of the player sprite. When I do this, the frontArm sprite will get stuck at certain points and won't rotate any further. I'm a complete newbie to Phaser and game dev so any help would be appreciated. I'll put my code below: create: function() { this.background = this.game.add.sprite(0, 0, 'background'); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.player = this.game.add.sprite(200, 500, 'player', 'Fire Marshall Main_00025'); this.game.physics.arcade.enable(this.player); this.player.anchor.setTo(0.5); this.frontArm = this.player.addChild(this.game.make.sprite(-10, -240, 'frontArm')); this.frontArm.anchor.setTo(0.48, 0.30); this.game.physics.arcade.enable(this.frontArm); //walk animation this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false); this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false); cursors = this.game.input.keyboard.createCursorKeys(); }, update: function() { //player walk movement this.player.body.velocity.x = 0; if (cursors.right.isDown) { this.player.body.velocity.x = 150; this.player.animations.play('walkright'); }else if (cursors.left.isDown){ this.player.body.velocity.x = -150; this. player.animations.play('walkleft'); }else { this.player.animations.stop(); this.player.frame = 25; } this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm); }
  3. Freeze Rotation

    Hey Guys, I have an object parented to a modified ArcRotateCamera. The Camera can pan left and right. I want my object to move left and right with the camera but not rotate when the camera rotates around its target. Is there any way to freeze the rotations of a mesh so that it does not rotate with its parent?
  4. So.... to my great disappointment - yes, another one of those - it looks like parented meshes don't work with physics engine. Is there any workaround? I think it's impossible for me to unroll all parenting in the project, it would break animations and god knows what else... BTW it looks like @Wingnut is currently working on similar issues (poor physics support). thumbs up to you for all the great work
  5. Is it possible to get the absolute rotation of a child mesh, in the same way it is possible to get the absolute position of a child mesh via mesh.getAbsolutePosition?
  6. Hello guys, I have a little problem in my scenario. I am able to set the parent child relation among two meshes and i am able to move them along only if the parent mesh is dragged but not counter-wise. Both objects need to be able to be dragged and moved along together no matter which object is dragged. So i will be very thankful if anybody could help me. Thanks!
  7. Hello! I am working on a voxel project and creating a very basic voxel player. It has a box as head, a bigger box for body, etc. I created the whole thing like this: this.player_head = BABYLON.MeshBuilder.CreateBox(PLAYER_HEAD, {size: 1, updatable: true}, scene); this.player_body = BABYLON.MeshBuilder.CreateBox(PLAYER_BODY, {width: 1, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_right_arm = BABYLON.MeshBuilder.CreateBox(PLAYER_RIGHT_ARM, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_left_arm = BABYLON.MeshBuilder.CreateBox(PLAYER_LEFT_ARM, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_right_leg = BABYLON.MeshBuilder.CreateBox(PLAYER_RIGHT_LEG, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); this.player_left_leg = BABYLON.MeshBuilder.CreateBox(PLAYER_LEFT_LEG, {width: 0.5, depth: 0.5, height: 1.5, updatable: true}, scene); // Head this.player_head.parent = this.player_body; this.player_head.position.y += 1.25; // Right arm this.player_right_arm.parent = this.player_body; this.player_right_arm.position.x += 0.75; // Left arm this.player_left_arm.parent = this.player_body; this.player_left_arm.position.x -= 0.75; // Right leg this.player_right_leg.parent = this.player_body; this.player_right_leg.position.x -= 0.25; this.player_right_leg.position.y -= 1.5; // Left leg this.player_left_leg.parent = this.player_body; this.player_left_leg.position.x += 0.25; this.player_left_leg.position.y -= 1.5; Since I need all the meshes to be treated as a single mesh, I merged them with: BABYLON.Mesh.MergeMeshes([this.player_head, this.player_body, this.player_right_arm, this.player_left_arm, this.player_left_leg, this.player_right_leg]); Until here, all beautiful and nice. But a problem arises: I want to be able to move the arms, legs and head to make some sort of animation for walking but it doesn't seem to work. My player object has the references to all the meshes before the merging, so I thought I would still be able to transform them even after the merging. What's wrong then? Also, is there perchance a better way to create a bunch of simple meshes, apply a specific material to each of them and then 'merging' them into 1 bigger BABYLON.Mesh without losing their individual texture/material? MergeMeshes destroys the materials of the children objects, which is quite bad :/.
  8. Hi there! So here's my issue. I have a player sprite which has an orb sprite attached to it as a child. Player = function (game, x, y, image) { Phaser.Sprite.call(this, game, x, y, image); //calls constructor this.orb = this.addChild(game.make.sprite(0, 0, 'orb')); game.add.existing(this); }; /*--------------------------------------------------------*/ Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; /*--------------------------------------------------------*/ I want to reference the x and y positions of the orb so that I can shoot bullets out of it. BUT, if I console.log(this.orb.x) or the y position, the value that is returned is 0. What do I do so that I can get the x and y positions of the orb, relative to the game world and not the parent sprite??
  9. In the app I am building, the user can drag in different components that snap together (think lego). As part of that I am introducing grouping (think Microsoft Powerpoint where you can add individual shapes but then group them and any transformations are then applied as a group). The approach I have used so far is that when individual components (meshes) are added they have no parent. When component A is snapped to component B it checks whether either has a parent. If neither has a parent (ie neither is yet part of a group) then it creates an invisible mesh and makes that the parent of both. If one or more has a parent (ie they are already part of a group) then it combines them under one parent (if both have parents, some logic will be introduced to determine which would be the best parent). This works to an extent. The problem I am seeing is that the meshes may have been moved around prior to being grouped. So their position will have a value. What seems to be happening when the parent is set is that the component's position is being re-evaluated relative to the parent and so the component jumps to a new position in space. I just wanted to first validate that this is how parenting should work and also get some advice on how to counter it's behaviour. I don't want the child meshes to move when I set the parent. However from that point on I do want any further movement or rotation to be done as a group. I have already amended my onMouseMove function so that if a mesh has a parent, the movement is applied to the parent (and therefore ALL children) rather than just the mesh being moved. This works a treat. This little playground illustrates the behaviour I am seeing. It creates 3 meshes ... m1, m2 and parent and gives them each a new position away from the world origin. It writes their position and getAbsolutePosition to the console. It then sets m2.parent=parent and again writes their position to the log. You can see that m2 is initially positioned at (10,0,0) and parent is at (20,0,0). However when m2.parent is set to parent, m2 moves to (30,0,0). So its position is now being evaluated relative to its parent (ie 20+10 along the x axis). This is contrary to how I have seen the behaviour described elsewhere in which it seemed to suggest that position was nullified upon setting a parent. Thoughts? Thanks Rich
  10. Might be a bug or it could my expectations (again). However the problem could be at the root of people having difficulties placing pivots. If you rotate a parent them translate its child using LOCAL axes the child moves and positions as you would expect. However if you rotate a parent then translate its child using WORLD or use position the child moves again in the direction of LOCAL axes but distances depend on the rotation of the parent. The PG http://www.babylonjs-playground.com/#1J7LGZ shows the effect. The cylinders mark the positions of the child mesh (the pilot) as it and the parent (sphere) move. The red cylinder marks the expected final position following the final move of -2 in the direction of the world x axis. The pilot meshes show the actual positions. Commenting out the pilot and sphere moves and uncommenting them in turn will show the sequence.
  11. Cant add Child to background

    I cant figure out how i would be able to add a function as a child, the function spawns items at the top of the screen and then they fall to the bottom where they will be killed. But if i add a background the items spawn behind that background. i cant figure out how they will be able to spawn infront of the background any help would be greate! Here im trying to add the items as a child Potato.SpawnPotato = this.mainBackground.addChild(game.potato); And this is the code which holds game.potato Potato.item = { spawnPotato: function(game){ game.world.enableBody = false; game.physics.startSystem(Phaser.Physics.ARCADE) game.physics.arcade.gravity.y = 200; var dropPos = Math.floor(Math.random()*650); var dropOffSet = [-27, -36, -36, -38, -48]; var potatoType = Math.floor(Math.random()*5); var potato = game.add.sprite(dropPos, dropOffSet[potatoType], 'FallingPotato'); potato.animations.add('anim', [potatoType], 10, true); potato.animations.play('amim'); game.physics.enable(potato, Phaser.Physics.ARCADE); potato.inputEnabled = false; potato.anchor.setTo(0.5, 0.5); potato.rotateMe = (Math.random()*4)-2; game._potatoGroup.add(potato); potato.checkWorldBounds = true; potato.events.onOutOfBounds.add(this.removePotato, this) }, removePotato: function(potato){ potato.kill(); } }
  12. Child sprite collisions

    Hi I'm trying to make my enemies turn in the opposite direction when they get close to the edge of a platform. I've attached two 16 x 16 child sprites to enemies, one to the bottom left, the other to the bottom right. However, I can't get them to detect my map's collision layer (playState.collisionLayer - I'm using Tiled for maps and exporting to JSON). Ideally what would happen is if the enemy is moving left and the left child sprite stops colliding with the collision layer, the enemy would start moving right Any tips?
  13. Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 200, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-66, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(66, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?
  14. http://www.babylonjs-playground.com/#3HNIJ#1 I am trying to create a Fischer Price type toy with three meshes. I was thinking I could combine the three meshes and have one solid mesh and just move one mesh. Originally I tried connecting them with joints to give the character parts a little movement but the joints were way too loose. After creating and positioning my three meshes, whenever I try to make one mesh a parent it changes the location of the children. That seems very weird. Any ideas on how to combine these meshes? I tried another method (forget what it was called) and it said it was deprecated and to use child/parent. I want the option of making the meshes different colors too. Thanks for any tips.
  15. Retrieve child information

    Hi 2 all Is there a way in phaser to retrieve chlid information from its parent? Which method should i use to get information about the childs?
  16. I am having the hardest time adding a list of objects to my container! For whatever reason, only the last container object appears on the left side of the screen. Any clue as to why only one container is being drawn? If anyone is interested in testing the program, here is a link to the related commit. Parent Container: (function (window) { function ChestManager() { container.Container_constructor(); container.addChest(640,100,1,1,"topClosed"); container.addChest(1100,360,1,1,"sideClosed"); container.addChest(640,620,1,1,"bottomClosed"); container.addChest(180,360,-1,1,"sideClosed"); } //instance of class var container = new createjs.extend(ChestManager, createjs.Container); //shared spritesheet properties var manifest = [{src: "chests.png", id: "chests"}]; container.loader = new createjs.LoadQueue(false); container.loader.addEventListener("complete", handleComplete); container.loader.loadManifest(manifest, true, "img/"); //configure after loaded function handleComplete() { container.spriteSheet = new createjs.SpriteSheet({ framerate: 4, images: [container.loader.getResult("chests")], frames: [[0,0,159,132,0,79.25,65.65],[159,0,193,107,0,98.25,40.650000000000006],[352,0,193,107,0,98.25,40.650000000000006], [545,0,113,147,0,56.5,73.4],[658,0,180,149,0,56.5,75.4],[838,0,180,149,0,56.5,75.4], //center bounds [0,149,116,97,0,57.25,47.75],[116,149,111,94,0,55.25,44.75],[227,149,111,94,0,55.25,44.75]], animations: { //"run": [0, 1, "run"], topClosed: [6], topOpenReward: [7], topOpenNothing: [8], sideClosed: [3], sideOpenReward: [4], sideOpenNothing: [5], bottomClosed: [0], bottomOpenReward: [1], bottomOpenNothing: [2] } }); } //update container.tick = function (event) { for (i=0; i<container.children.length; i++){ if (container.getChildAt(i).isClicked()){ container.removeChest(i); } } } container.addChest = function (x,y,scaleX,scaleY,frame){ container.addChild(new Chest(x,y,scaleX,scaleY,container.spriteSheet,frame)); //add to stage container.getChildAt(container.children.length-1).sprite.on("click", function(evt){ container.getChildAt(container.children.length-1).click(); }); } container.removeChest = function(i){ container.getChildAt(i).sprite.removeEventListener("click"); container.removeChildAt(i); } window.ChestManager = createjs.promote(ChestManager, "Container"); }(window)); Child Container: (function (window) { //constructors function Chest(){ container.Container_constructor(); } function Chest(x,y,scaleX,scaleY,spriteSheet,frame){ container.Container_constructor(); container.initChest(x,y,scaleX,scaleY,spriteSheet,frame); } //instance of class var container = new createjs.extend(Chest, createjs.Container); //initialize Chest container.initChest = function (x,y,scaleX,scaleY,spriteSheet,frame) { container.x = x; container.y = y; container.sprite = new createjs.Sprite(spriteSheet, frame); container.sprite.scaleX = scaleX; container.sprite.scaleY = scaleY; container.sprite.gotoAndStop(frame); container.customText = new CustomText(0,0,scaleX,scaleY,"car"); container.addChild(container.sprite); container.addChild(container.customText); } //public functions container.isClicked = function(){ return container.clicked; } container.click = function() { container.clicked=true; } window.Chest = createjs.promote(Chest, "Container"); }(window)); Result (ignore the backwards 'R' haha)
  17. How add a PIXI container into a Phaser Game? I have a game made ONLY with PIXI. but now i would like to port it to a Phaser. All my game content happens inside a pixi container "screenContainer". I tried to add a pixi container like this. var created = function() { screenContainer = new PIXI.DisplayObjectContainer(); var sprite = m.game.add.existing(screenContainer); } var.game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, "divId", { create: created }); but it stops here "phaser.js" line 33067 /** * The core update - as called by World. * @method Phaser.Group#update * @protected */ Phaser.Group.prototype.update = function () { var i = this.children.length; while (i--) { this.children[i].update(); // UPDATE IS UNDEFINED } }; because Pixi.Container, does not have "update" method. Is there any other way to add a pixi container inside a phaser game? thanks
  18. Hi there! I have a few questions on how Babylon handles parenting: 1. A is B's parent. What happens to A and B if I go: A.parent = B; ? 2. A is B's parent. B is C's parent. What happens if I go: A.parent = C; ? Infinite hierarchy? 3.A is B's parent. C is D's parent. How would I swap parent? What happens if I go: B.parent = C; // B now has 2 parent, A and C ? Did A get disconnected? Did D lose his parent? Do all of this happen at the end of the frame or in real time? D.parent = A; // What happens there? 4. is there a mesh.children[] or something similar I need to update when assigning new parents? Thanks
  19. Hi there, I'm working on a little project where I do a lot of parenting and swapping parents/children around, etc.. Is there an easy way to preserve a child's world position when changing its parent? I'm really new to Babylon so I don't always know what's available to me. If this doesn't exist how would I go about it? Inverse the parent's world matrix and apply to it its child? If someone has an example handy I'd appreciate Thanks!
  20. suppose, I have a TileMap and a Button which opens a popup Menu by click. My popup menu is a sprite (game.add.sprite) which holds some sprites (some Ships) as Child: popup.addChild(shipArray); My Tilemap is loading by: map = game.add.tilemap('Map'); map.addTilesetImage('terrain_atlas', 'terrain_atlas'); background = map.createLayer('Background'); background.resizeWorld(); How do I get the sprite from the popup menu on the tilemap? I have tried the following. // Sprite in the popup menu is clicked function isShipButtonDown(sprite, pointer) { popup.removeChild(sprite); sprite.x = 912; // example positions sprite.y = 1264; } But the sprite is then no longer visible.
  21. Hi there, I'm having an issue where a child sprite does not respect the depth of the parent's group. Meaning that other objects will render on top of the parent sprite as expected, but not the child sprite, which appears on top of both the parent (expected) AND other objects (unexpected). First, I am extending the sprite class: var Wall = function (game, x, y, width, height) { Phaser.Sprite.call(this, game, x, y, 'wall-border'); this.width = width; this.height = height; this.anchor.setTo(0, 1); game.physics.arcade.enable(this); this.body.immovable = true; var child = this.addChild(game.add.tileSprite(0,0,100,100,'wall-pattern')); // this.game.add.existing(child); // (THIS LINE IS THE PROBLEM) child.x = this.x + 10; child.y = this.y - 10; child.anchor.setTo(0, 1); child.width = this.width - 20; child.height = this.height - 20;}The problem is that the tileSprite created as a child does not appear in game unless the commented out line is added, but if so, it appears on top of all other objects (does not respect the parent's group ordering). Do I need to add the child to the same group as the parent or....? I know I'm doing something dumb, so any guidance is appreciated. Thank you!
  22. I have dynamic sprites (classes) in a container sprite. When I change the x or y of the container nothings happens... this.menuContainer = this.game.add.sprite(0, 0);this.menuData.forEach(function(item){ obj = new DressApp.ItemBtn(this.state, xloc, yloc, this.boxImg.width, item); yloc += obj.container.bg.height; this.menuContainer.addChild(obj);}, this);Also, I can't set a graphic mask on that sprite. I tried both ways to define a mask but it still doesn't work.. var myMask = new PIXI.Graphics();//this.game.add.graphics(0, 0);//var maskWidth = this.boxImg.width;// - (this.boxImg.width * .2);var maskHeight = this.game.height * .90;myMask.beginFill(0x000000);myMask.moveTo(0, 0);myMask.lineTo(0, maskHeight);myMask.lineTo(maskWidth, maskHeight);myMask.lineTo(maskWidth, 0);myMask.lineTo(0, 0);myMask.endFill(); myMask.position.x = this.boxImg.x - (this.boxImg.width / 2);myMask.position.y = 0; this.menuContainer.mask = myMask;and var maskX = this.boxImg.x - (this.boxImg.width / 2);var maskY = 0;var maskWidth = this.boxImg.width;// - (this.boxImg.width * .2);var maskHeight = this.game.height * .90; var mymask = this.game.add.graphics(0, 0);mymask.beginFill(0xffffff);mymask.drawRect(maskX, maskY, maskWidth, maskHeight); this.menuContainer.mask = mymask;could somebody please help me..
  23. Hi there, I've got an issue, and I guess "it's not a bug it's a feature", but when applying scaling to an object and setting an other object's parent as the aforementioned object, the scaling of both objects becomes the same, even if parenting is set up after applying scale on the parent. Here is a Playground to demonstrate the issue : Playground link Here you can see that the sphere's scaling should be (1, 1, 1), the default scaling, but instead it has the same scaling as its parent (2, 3, 5), even if the scaling has been set up before linking those objects. I guess that Babylon sets the scaling matrix of the parent to be the same as its childs (I'll investigate the source code to confirm that), but it shouldn't, every child should have their own scaling matrix, and change their scaling vector relatively according to their parent. That's how I would do it anyway... Thanks in advance for your answers
  24. Add text to scaled sprite

    Hello, i'm trying to add a text child to a sprite s = this.game.add.sprite(0,0,'bet');s.scale.setTo(0.5, 0.5);t = this.game.add.text(0,0,'100$');s.addChild(t);The problem is the also get scaled with the sprite. is there any way to scale only the sprite ?
  25. Add text as child to group

    Hi Guys, I was looking for an answer but could not find one so Im sorry if I missed and double post. Im currently working on an small sidescroller game. The enemies are created as group and come from the right into the scene. what I would like to do is add a random name for the enemy displayed as text on top of the enemy, and having the same physical propperties like it (eg gets killed/destroyd if the enemy dies, moves at same speed etc) I suppose I can do this as child from the enemy but I have no idea how to add text this way especially for an "dynamic" text I appreciate any help cheers