Search the Community

Showing results for tags 'object'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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

Found 49 results

  1. Get object fired the event

    When I attach an event to a sprite, like sprint.on('click',clickresponse) I would like to know which of the hundreds of sprites fired this event. But somehow the event does not contain a pointer to the sprite that fired the event. I would have thought currentTarget would be a good candidate to test for it, but that one seems to be null allways. How to figure this out?
  2. getting name of this variable

    I am trying to create an adventure game. Very new to Phaser and Js. I've been through multiple tutorials and am now trying to make my way on my own. If you imagine a stage that can be returned to at any time, I need to know if the coins on that stage were collected before. I can write individual functions for each coin successfully: var State1 = { preload: function(){ game.load.image('coin','coin.png'); }, create: function(){ //note these vars are declared in Main state numCoins = 0; //the array that will tell me if the coin has already been collected. that check hasn't been written yet. coinsCollected = []; this.coinText =game.add.text(, 30, numCoins, {font: "26px Amatic SC"}); //single coins to collect on the stage. trying 2 different ways to show, as button and as sprite this.coin1=game.add.button(600, 300, 'coin', this.getCoin1, this); var coin2 = game.add.sprite(350, 250, 'coin'); coin2.inputEnabled=true;, this); var coin3 = game.add.sprite(400, 100, 'coin'); coin3.inputEnabled=true;, this); }, getCoin1: function(coin){ numCoins ++; this.coinText.text=numCoins; //which coins have been collected coinsCollected.push('coin1'); console.log(coinsCollected); coin.kill(); }, getCoin2: function(coin){ numCoins ++; this.coinText.text=numCoins; coinsCollected.push('coin2'); console.log(coinsCollected); coin.kill(); }, So that works fine, but obviously I don't want to write out a hundred "getCoin" functions. How do I pass the name of the coin to a single getCoin function so I can store it in an array? so getCoin: function(coin){ numcoins ++; this.coinText.text=numCoins; coinsCollected.push(coinNAME); }
  3. Hello, How might I rotate the propeller in the following scene: I'm obviously not defining the variable for the prop correctly. Below is the full code: Thanks, DB
  4. If we do ModelFinish.initScene(scene); we initialize scene of ModelFinish.js. That works fine. Is there any way how to get object ModelFinish from document ? is there any way similar like this so as maybe var objModel = document.getObject"ModelFInish") and then initilization object objModel.initScene(scene) ??? Greetings Ian
  5. Hi all. I'm trying to return an array of objects loaded by the Mesh Importer for later use. I would like to be able to call a function to load my objects and outside of the function, affect & change each one of them OUTSIDE of the function. Here is the small demo I made :: Thank you! <3 Mythros
  6. Hi everyone, I have an obj file of an object composed of several meshes. When I load this file using the object file loader and try to drag it (as in the drag and drop tutorial in the playground) only one of the meshes is selected. What is the correct way to make sure the object is selected? Thanks!
  7. Hi all. I've been searching the web for the past 24+ hours & cannot seem to find a demo where when moving a 3d object and attaching a follow camera ( chase cam ) to the player, i can't seem to find a demo which allows the object to move in the same direction the chase camera is facing. How would you go about doing that? Thank You all! <3 Mythros
  8. Changing sprites into objects?

    HI everyone, sorry for very noobish question, but I'm new in phaser and objective js I'm making platform game, where I placed enemy like a sprite and programmed his movement. It works, but when I add another enemy, one is not moving, while the other is. I understand this, because sprites are not objects and all of my instructions can conduct only one, the latest sprite. How change the code, group or sth, can someone give me example, that I could add multiple sprites and all of them will be doing the same? Here's the code: //IN CREATE: for (var i = 0; i < 20; i++) { droid = game.add.sprite(game.rnd.integerInRange(0, 128),, 'droid'); } game.physics.enable(droid, Phaser.Physics.ARCADE); droid.body.bounce.y = 0.1; droid.body.setSize(32, 32, 5, 1); droid.animations.add('left', [0, 1, 2], 10, true); droid.animations.add('right', [5, 6], 10, true); droid.body.collideWorldBounds = true; droid.previous_x=droid.body.x; droid.body.velocity.x = 50; //IN UPDATE: if( Math.abs(droid.body.x-droid.previous_x) > 100) enemy_switch_direction(droid); function enemy_switch_direction(enemy) { if ( enemy.body.velocity.x > 0 ) enemy.body.velocity.x=-50; else enemy.body.velocity.x=50; }
  9. I want to create a object including sprite text and progessbar , and clone object to listview , i have code in unity and c# very easy , but with phaser and typescrípts very hard , please helpme ,
  10. Hi everyone, Anyone knows how i could convert a object layer from tiled(with rectangle, circle...) into a P2 object/sprite or whatever ? I would like that my player can check if there's an overlap with theses objects :/
  11. Hey everyone I am building a game on top of the babylon engine and I keep all babylon objects inside the meta "game object". I am having trouble with the scope of the variables when performing event related animations, sometimes it works sometimes it does not... And I have not idea why. I was playing around with the sky material tutorial, that has some key binding to control the daylight. var setSkyConfig = function(property, from, to) { var keys = [{ frame: 0, value: from }, { frame: 100, value: to }]; var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); scene.stopAnimation(skybox); scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1); }; window.addEventListener("keydown", function(evt) { switch (evt.keyCode) { case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1 case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; ... So that is working fine. But now if I want to animate a sphere called lightSphere0 without creating a nested function (with direct reference inside it) like above, animation only work if I put the code directly inside the switch, like so. case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); var keys = [{ frame: 0, value: lightSphere0.position.x }, { frame: 100, value: 30 }]; var animation = new BABYLON.Animation("animation", "position.x", 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); scene.stopAnimation(lightSphere0); scene.beginDirectAnimation(lightSphere0, [animation], 0, 100, false, 1); If i try to call any function outside of this switch with the object as an argument, or with its name, or with the scene object etc.. the animation runs without changing the property of the object. For example those following functions are methods of the meta object (that i call with thisObject.animateFloat(sphere, "position.x", ... , ....). So I get the OK, in the console (I get in fact 4 of them, not sure why), and everytime I have a correct reference to the object in the debugger. But the animation does not work... animateFloat(object, property, from, to) { var keys = [{ frame: 0, value: from }, { frame: 100, value: to }]; var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); this.currentSceneObject.stopAnimation(object); // edit, what was missing : object.animations.push(animation); object._scene.beginAnimation(object, 0, 100, false, 1, function() { console.log("ok") }); //this.currentSceneObject.beginDirectAnimation(object, [animation], 0, 100, false, 1); }; animateVector3(objectName, property, from, to) { var keys = [{ frame: 0, value: from }, { frame: 100, value: to }]; var sphere = this.currentSceneObject.getMeshByName(objectName); var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); this.currentSceneObject.stopAnimation(sphere); // edit, what was missing : object.animations.push(animation); this.currentSceneObject.beginAnimation(object, 0, 100, false, 1, function() { console.log("ok") }); //this.currentSceneObject.beginDirectAnimation(object, [animation], 0, 100, false, 1); }; On the other hand if I create a function without animation, and change the position manually, it does work. For example if I change the code of the above function to : animateVector3(object, property, from, to) { object.position.x = 50; } the object is moving... Sorry for the long post ! Do you have any clue as to what is going on ? Im lost... Thanks !
  12. Hello. I'm working on a "jungle jump" phaser game and got stucked with it. The use case is very easy: there are some swinging ropes on the top of the screen (they are moving separately with a constant speed), and there is a "Monkey" which jump from one rope on other. When he fail the jump, falling down and waste a life. I found a way how can I generate and move the ropes. But I can't figure out how can move together the monkey and the rope and how can jump from one moving rope on other. Any code example would be helpful, or if have additional question feel free to ask. I found a picture which very similar to my game. p.s I have to say that I'm just now started with phaser.
  13. Phaser ES6

    Phaser Game with ES6 Phaser object orientation with objects and class. We do not use prototype See one example class file class Items extends Phaser.Sprite { constructor(game,sprite) { var arrEnemyX = [500,1500,1800,1300,1400,1900,2200,2500,1701,2250]; var arrEnemyY = [1200,1400,2000,2100,1000,1250,1650,1450,2101,2021]; var vx = Math.floor((Math.random()*10)+0); var vy = Math.floor((Math.random()*10)+0); super(game,arrEnemyX[vx],arrEnemyY[vy],sprite); this.scale.setTo(1.1, 1.1); this.frame = 9; game.physics.arcade.enable(this); this.body.collideWorldBounds = true; game.add.existing(this); this.body.allowGravity = false; this.effects =; for (var i = 0; i < 20; i++) { this.effect = this.effects.create(0, 0, 'effectRing', [0], false); this.effect.anchor.setTo(0.4,0.4); this.effect.animations.add('effectRing'); } } animate(l,r,u,d){ this.animations.add('left', l, 10, true); this.animations.add('right',r, 10, true); this.animations.add('up', u, 10, true); this.animations.add('down', d, 10, true); } see more in this proyect
  14. Hello forum I am writing a game using phaser v2.4.8 which has several states. The general structure of my game is: Level list - the player can select a level to play on a draggable background Level - each level consists of 5 puzzles (mini games) Puzzle - each puzzle is a state I am fairly new to javascript and phaser (but not to programming or scripting languages). Enough introductions - after watching several phaser tutorials I just couldn't understand why states are defined in the following way: game.state.add('Boot', Game.Boot); ... //in a separate Boot.js file: var Game = {}; Game.Boot = function(game) { this.someVariableName = ...; ... }; Game.Boot.prototype = { preload: function () { this.add.image(...); ... }, create: function() {...}, ... }; Whereas my states are written as so: game.state.add('Boot', BootState); game.state.add('Preload', PreloadState); ... //in a separate js file: var BootState = { preload: function() { game.add.image(...); ... }, create: function() {...}, ... } //in a separate js file: var PreloadState = { preload: function() { game.add.image(...); ... }, create: function() {...}, ... } My questions are: What is the purpose of the 'game' parameter in Game.Boot = function(game) {...} ? Is the game object automatically passed as an argument in game.state.add('Boot', Game.Boot) ? Is there any reason for me to use the first approach instead of the other one? What are the differences? Thank you in advance for your responses Force out
  15. Can anybody tell me how to define name in Blender. When we export model for babylon.js. Name and id are same. I would like to define name in Blender. Where can be that defined in blender?
  16. Hello, I have a problem with load animation from two files to one obecjt. Load files to the game: this.load.spritesheet('cowwalk', 'assets/images/animal/cow_walk.png',128,128); this.load.spritesheet('coweat', 'assets/images/animal/cow_eat.png',128,128); Create object from file cowwalk: this.cow =this.animal.create(zwierzex, zwierzey, 'cowwalk'); Adding animation to object: 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', [7,6,5,4]); this.cow.animations.add('coweatright', [12, 13, 14, 15]); this.cow.animations.add('coweatdown', [8, 9, 10, 11]); this.cow.animations.add('coweatup', [0, 1, 2, 3]); Animation walk i going well, but please tell my now, how to add animation coweat to the object, and them chose wich animation shoud be play? I must create animal from obect coweat or what? Maybe i should to compile two files to one and them add? Please give me some ideas
  17. 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; } = function() { container.clicked=true; } window.Chest = createjs.promote(Chest, "Container"); }(window)); Result (ignore the backwards 'R' haha)
  18. What is the "Stage" in Phaser?

    In this tutorial about game states, there is a part where the author says:"GameOver",true,false,score); "This is the first time I am calling the state with all its arguments, so let’s have a look at them: GameOver is the name of the state to start. The second argument is called clearWorld, default at true, and clears the World display list fully (but not the Stage, so if you’ve added your own objects to the Stage they will need managing directly)." What is this "Stage" she talks about? And how would I add my "own" objects to this "Stage", in a way that the clearWorld won't clear these objects and I'll have to manage them directly?
  19. I built a simple game using phaser, but didn't use multiple game states. The game had only one screen and no states! It was all poorly done. So now I'm learning game states. In this code snippet, taken from a phaser game, we have, for example, a line consisting of I know how this works, but i'm having trouble knowing who is this here. I know this in OOP refers to the "owner" of the function, but in this case, who is it? Another doubt I'm struggling with is, where does the comes from? Is it from when Phaser initializes a new state? When it start a new state, does it create a new "main state", which in this case is what the "this" refers to, and add attributes/methods to it? Like this method? function Play() {} Play.prototype = { create: function() {; = '#000'; // initialize game variables = 0; this.chunkGroup =; this.nextChunkY = 0; = 0; = 1024;; this.lastChunkIndex = 0; this.tephra =; =; this.gems =; this.carrots =; this.lastChunk = null; this.chunkIndex = 0; this.generateChunk(); this.generateChunk(); }, }
  20. Hello, I've got a peculiar thing. I want to capture the instances in such a way that once I've left my create scene handlers, I can return to my model calculators (i.e. scene hosts). User will engage with some form fields, during which time, I want to look up the related model calculators and make changes, potentially rebuild the scene based on the input. I've tried something like this, but it falls over on account of the scene object, deep within which is circular I think; somewhere is, at any rate. Point is, jumping to/from JSON is not going to work very well for purposes of what I am doing. <script type="application/json" id="data"> {"calc1": null, "calc2": null, "calc3": null} </script> Perhaps I will need to completely decouple the calculator configuration from the scene modeling bits, that's probably the right longer range answer. But I want to see if I can make it work without jumping to/from JSON first. Partly, too, is my ignorance concerning JavaScript object life cycle of variables throughout the scripts, i.e. if they survive the load and can be referenced at a later point. Regards, Michael Powell
  21. Hello ! At first : I'm not good in english writing and speeking, sorry for the quality of the language ... I'm new in javascript, and I wanted to write a little game. After days of searching and reading, I choose pixi.js. I write an object named Hexagone, witch contains a PIXI.Graphics named hex that I want to be interactive. in this object I create an hitArea into hex and I had a function (line 81) I want that when I click on one figures that the console print the x and y coordonate of the hexagone, but it always print 0, 0, can you explain me why ? Here is the code, thanks for your attention function jeu(){ console.log(PIXI); var renderer = PIXI.autoDetectRenderer(600, 600,{antialias: true, transparent: false, resolution: 1}); document.getElementById("pixi").appendChild(renderer.view); var stage = new PIXI.Container(0xFFFFFF); //var background= new PIXI.Sprite.fromImage('prairie-verte-1_2997580.jpg'); var param = { l : 60, calcule : function(){ this.h= this.l*0.45; this.x1 = this.l/4; this.y1 = 0; this.x2 = this.l*3/4; this.y2 = this.y1; this.x3 = this.l; this.y3 = this.h; this.x4 = this.x2; this.y4 = this.h*2; this.x5 = this.x1; this.y5 = this.h*2; this.x6 = 0; this.y6 = this.h; }, }; param.calcule() function Hexagone(x,y) { this.x=x; this.y=y; if(this.x%2 == 0){ this.xBase = this.x*3*param.l/4; this.yBase = this.y*2*param.h } else{ this.xBase = this.x*3*param.l/4; this.yBase = (this.y+1/2)*2*param.h } } Hexagone.prototype.dessiner = function(){ this.hex = new PIXI.Graphics(); this.hex.beginFill(0x00FF00); this.hex.lineStyle(1, 0x000000); this.hex.moveTo(this.xBase + param.x1, this.yBase + param.y1); this.hex.lineTo(this.xBase + param.x2, this.yBase + param.y2); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x2, this.yBase + param.y2); this.hex.lineTo(this.xBase + param.x3, this.yBase + param.y3); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x3, this.yBase + param.y3); this.hex.lineTo(this.xBase + param.x4, this.yBase + param.y4); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x4, this.yBase + param.y4); this.hex.lineTo(this.xBase + param.x5, this.yBase + param.y5); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x5, this.yBase + param.y5); this.hex.lineTo(this.xBase + param.x6, this.yBase + param.y6); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x6, this.yBase + param.y6); this.hex.lineTo(this.xBase + param.x1, this.yBase + param.y1); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.hitArea = new PIXI.Polygon([ new PIXI.Point(this.xBase + param.x1,this.yBase + param.y1), new PIXI.Point(this.xBase + param.x2,this.yBase + param.y2), new PIXI.Point(this.xBase + param.x3,this.yBase + param.y3), new PIXI.Point(this.xBase + param.x4,this.yBase + param.y4), new PIXI.Point(this.xBase + param.x5,this.yBase + param.y5) ]); this.hex.interactive = true; =function(data){console.log("click x :"+this.x+" y : "+this.y)}; stage.addChild(this.hex); } listeHexa=[]; for(var y=0;y<10;y++){ for(var x=0;x<10;x++){ hexa = new Hexagone(x,y) hexa.dessiner() listeHexa.push(hexa); } } renderer.render(stage); update(); function update(){ requestAnimationFrame(update); renderer.render(stage); }; }
  22. How to kill object from group?

    Everytime player collides to any enemy, that enemy object needs to be killed. Enemies are made as group. I need some simple solution for this. this.enemies =; for (var i = 0; i < 90; i++) { this.enemy = this.enemies.create(x,y, i);; this.enemy.body.setMaterial(this.enemyMaterial); this.enemy.body.static = true; this.enemy.body.collideWorldBounds = true; this.enemy.outOfBoundsKill = true; this.enemy.body.velocity.x = 290 + Math.random() * 87; this.enemy.body.setCollisionGroup(this.enemyCG); this.enemy.body.collides([this.playerCG, this.wallsCG]); } this.player.body.collides(this.enemyCG, this.killEnemy, this); none of these does not work. How it works in the example then? killEnemy: function (player, enemy) { //'die'); // this.enemy.kill(); // this.enemy.destroy(); // this.enemies.remove(this.enemy); }
  23. How to keep attributes on objects?

    I am passing from KineticJs to PixiJs. In KineticJs every object has setAttr(), getAttr()so that it is possible to keep user data on objects, which helps later to search over objects on a stage depends on their attributes. I did not see in PixiJs such mechanism yet. How do I do? Yes, sure, it is just possible to extend my javascript variable as I wish, but does PixiJs have a native mechanism for this?
  24. Loading Objects from Tiled

    Hi I'm new to phaser ( and new-ish to coding in general ), and for the past few days I've been trying to make a really simple game, platformer-style, where the player must navigate to certain areas before being able to exit the level. I have the basics running, but now I can't seem to figure out how to check if the player is in those areas. The relevant part of the code so far is as follows: var game = new Phaser.Game(800, 600, Phaser.AUTO, "mygame", { preload: preload, create: create, update: update, render: render});function preload() { game.load.tilemap("questMap", "assets/quest.json", null, Phaser.Tilemap.TILED_JSON); game.load.image("tilesheet", "assets/tilesheet.png"); game.load.image("npc", "assets/npc.png"); game.load.spritesheet("player", "assets/player.png", 64, 64);}var map;var tileset;var groundBg;var props;var houses;var houseProps;var npc;var ground;var areas;var player;function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#A8DBFF"; map = game.add.tilemap("questMap"); map.addTilesetImage("tilesheet"); map.addTilesetImage("npc"); ground = map.createLayer("ground"); groundBg = map.createLayer("groundbg"); props = map.createLayer("props"); houses = map.createLayer("houses"); houseProps = map.createLayer("houseprops"); npc = map.createLayer("npc"); map.setCollisionBetween(1, 5000); ground.resizeWorld();Not too pretty, I know. I've created the map with tiled and there are a lot of small props and decorative tiles, hence the multiple "map.createLayer()" calls. The only one with collision is the ground layer. Now, on my Tiled file, i've created an Object layer and drawn small rectangles on the areas I want to check if the player is in. I tought this was going to be an easy process but I can't seem to figure out how to load those areas into phaser, and then check if the player is within bounds. Googling has given me some results, but none seem to fit, as they usually cover how to add a sprite to an object, which in this case does not apply: I simply need that small area to exist and check if the player is there. I've also given names to each of those rectangles in Tiled, via the custom properties tab.
  25. Hi all, Whilst creating a game for a client, I came across a bug with responsive CSS iFrames, where the frame wouldn't obey the CSS applied, and expand past the parent ONLY on iOS devices, so I created a demo to try to find the cause (see iframe example at bottom). Looking at the forums, it appears there has been a few unanswered posts on the topic, so I thought I would give it an attempt myself. I got nowhere! ...But after doing some surfing on iOS iframes, I found a semi-related article at: which raised a separate issue with scrolling. Following one of their solutions, to use an <object> instead of <iframe>, this seems to have fixed the issue on iOS. I've got limited devices to test this on just now, but it appears to work on my pc browsers, mac, iPhone and 2 androids. Apart from sharing my solution, I was just wondering what your thoughts were on the issue. Is this a problem that lies with the iFrame code on iOS, or is this something that Phaser could change to handle? I've raised a github issue just incase. Does the solution seem to work on your devices, and is there any downsides to an <object> over an <iframe>? Cheers as always! -- Examples -- iframe example: object example: