Search the Community

Showing results for tags 'object'.



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

  1. 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
  2. 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 :: http://www.babylonjs-playground.com/#1QJUDF#3 Thank you! <3 Mythros
  3. 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!
  4. 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
  5. 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), game.world.randomY, '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; }
  6. 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 ,
  7. 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 :/
  8. 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 http://www.babylonjs-playground.com/#E6OZX#6, 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 !
  9. 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.
  10. 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 = game.add.group(); 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 https://github.com/pardeep4e/Proyecto-DAW-2015-2016
  11. 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
  12. 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?
  13. 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
  14. 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)
  15. What is the "Stage" in Phaser?

    In this tutorial about game states, there is a part where the author says: this.game.state.start("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?
  16. 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 https://github.com/alexdantas/ludum-dare-29/blob/master/js/states/play.js, we have, for example, a line consisting of this.game.camera.setBoundsToWorld(). 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 .game.camera.setBoundsToWorld() 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 game.camera.setBoundsToWorld() method? function Play() {} Play.prototype = { create: function() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.stage.backgroundColor = '#000'; // initialize game variables this.cash = 0; this.chunkGroup = this.game.add.group(); this.nextChunkY = 0; this.game.world.bounds.x = 0; this.game.world.bounds.height = 1024; this.game.camera.setBoundsToWorld(); this.lastChunkIndex = 0; this.tephra = this.game.add.group(); this.rocks = this.game.add.group(); this.gems = this.game.add.group(); this.carrots = this.game.add.group(); this.lastChunk = null; this.chunkIndex = 0; this.generateChunk(); this.generateChunk(); }, }
  17. 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
  18. 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 hex.click 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; this.hex.click =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); }; }
  19. 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 = this.game.add.group(); for (var i = 0; i < 90; i++) { this.enemy = this.enemies.create(x,y, i); this.game.physics.p2.enable(this.enemy); 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) { //this.enemy.animations.play('die'); // this.enemy.kill(); // this.enemy.destroy(); // this.enemies.remove(this.enemy); }
  20. 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?
  21. 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.
  22. 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: https://www.magnolia-cms.com/blogs/christopher-zimmermann/detail~@strategies-for-the-iframe-on-the-ipad-problem~.html 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: http://seejay.co.uk/phaserios/iframe.html object example: http://seejay.co.uk/phaserios/object.html
  23. Hello guys I am new in xdk I have a little problem I know there might be a little solution, so my problem is that, I have a Menu.js file and menuButton.js file I am trying to create menuButton object but its fire up an error like Uncaught TypeError: Cannot read property 'sprite' of undefined. my Menu.js file BasicGame.menuState = function(game){ };BasicGame.menuState.prototype = { create: function(){ BasicGame.global.menuBgSound = this.game.add.audio('menuBg',1,true); BasicGame.global.menuBgSound.play(); this.buttons = new menuButton(game); // error this.buttons.create(); // error }, update: function(){ } }my menuButton.js file var menuButton = function(game){ //this.game = game; // tried this not working // error - Uncaught TypeError: Cannot read property 'add' of undefined };menuButton.prototype = { create: function(){ this.playButton = this.game.add.sprite(100,100,'playButton'); }, update: function(){ } }the did the same formation in my Bracket editor and that was fine but in xdk it occurs error. I have tried several ways but the result is nothing. Thanks
  24. Limit car to roads

    Good afternoon, I'm trying to make a small driving game, and I want to limit my player's car so that he can't move off of the roads and on the sidewalks. Might anyone know how to best handle it? I'd rather not add lots of invisible "fences" to collide with the car if I can help it. Cheers.
  25. I've recently found myself in a professional position where by the artist is sapping most of my time demanding changes to art work. This has to stop! So I've created a simple and easy way to render art dynamically including the ability to add new art with absolutely no requirements from the coder! I have no idea if this is of use to anybody, just throwing it out there The idea is, the artist or creative director, or anybody who wishes to tinkle with the game can drag and drop the images into your asset folder, than edit a couple of JSON files to add them to the game. So, to start with, we're going to need a couple of JSON files. Beginning with none other than the list of files to be loaded into the game. I am also going to be wrapping these Javascript objects inside languages as to simulate a multi-lingual game / app. You are going to start by creating a JSON file and put inside it: { "english": { "0": { "name": "mainMenuBackground", "location": "assets/images/mainMenu/yes.png" } }, "spanish": { "0": { "name": "mainMenuBackground", "location": "assets/images/mainMenu/yes.png" }}Next, in your boot file.. you need to load this in using: this.game.load.json('imagesToLoad', 'assets/json/states/imagesToLoad.json');Now, onto the meaty stuff! In your Prelaoder, you are going to want to define the language the user is playing.. for me, that's english.. We now need a function to dynamically add any image we choose to throw at it: loadImage: function(asset) { this.load.image(asset.name, asset.location)},Add to that, a simple for loop to iterate over out JSON file and boom! for (var i in imagesToLoad[lang]) { this.loadImage(imagesToLoad[lang][i]);}And that's part one! When the user changes the language, the JSON file will look for those assets accordingly. For part two, we use a very similar process where by the images to be rendered are stored in a JSON (inside a language object again). Here is an example JSON file I would use: { "english": { "background": { "programName": "background", "assetName": "background1", "scale": 1, "x": 0, "y": 0, "anchorX": 0, "anchorY": 0, "alpha": 1, "angle": 0 }, "logo": { "programName": "logo", "assetName": "loadingLogo", "scale": 1, "x": 400, "y": 100, "anchorX": 0.5, "anchorY": 0.5, "alpha": 1, "angle": 0 } }}Calling this file, we can simply do the same for loop as before: for (var i in images[lang]) { this.addImage(images[lang][i].programName);}And then the method that is invoked using that for loop: addImage: function(objectName) { this.objectName = this.add.image(images[lang][objectName]['x'], images[lang][objectName]['y'], images[lang][objectName]['assetName']); this.objectName.anchor.set(images[lang][objectName]['anchorX'], images[lang][objectName]['anchorY']); this.objectName.alpha = images[lang][objectName]['alpha']; this.objectName.angle = images[lang][objectName]['angle']; },Thus, allowing the artist to add any art work, as well as draw it to any screen he or she wishes. This is also very handy when tweaks are required: i.e: "move this image 2 pixels to the right". I have also done the same for all text in my project but I'm sure you get the idea on how to do that now! Sorry if this is a little simple for this forum, It's actually my first ever tutorial.. if you could call it that! Many happy coding hours everyone Thanks Nick