Search the Community

Hi everyone! I have a problem. If I write a custom properties for the objects in the Tiled programs. How get custom properties?

Hello, How might I rotate the propeller in the following scene: http://qedsoft.com/DEMOS2017/bjs_loader/index8.html I'm obviously not defining the variable for the prop correctly. Below is the full code: Thanks, DB

So I am working on my just general knowledge of how phaser works, I have only done two tutorials. But I think I have a decent grasp on it so far. But I am running into a little problem, I am trying to use the Follower object, so that I don't have to create the vec2 and attach it, but I don't seem to understand the documentation or what it means by "If this Game Object is enabled for physics then this property will contain a reference to a Physics Body." I have scoured the docs for hours. I see how to 'enable' in arcade physics but I cannot find any reference to how with impact physics. I am able to create a body object, and assign it to the game object, as well as assign the the game object to the body, but they do not move in tandem. in fact the body does not move at all. P.S. This is not the only bug, when converting from matter.js to impact.js physics my logic on pausing player movement when the dialog modal broke. but one problem at a time.. P.P.S I know its not the best code //SHIVA path3 = new Phaser.Curves.Path(550, 450); path3.lineTo(450, 450); path3.lineTo(450, 505); path3.lineTo(550, 505); path3.lineTo(550, 450); path3.lineTo(450, 450); shiva = this.add.follower(path3, 550, 450, 'shiva'); //Phaser.GameObjects.BuildGameObject(this, Phaser.GameObjects.PathFollower) //this.game.physics.enable(shiva, impact); shivaBody = this.impact.add.body(550, 450, 16, 12); //TRYING DIFFERENT WAS TO SET BODY //shivaBody.setOffset(550, 450, 16, 12); shiva.body = shivaBody; shivaBody.setGameObject(shiva); shiva.name = "shiva"; shiva.setRotation(); shiva.depth = 30; //ALT WAY TO GET NAME //shiva.name = "shiva"; shiva.setData(npc, true); shiva.setData("name", "shiva"); npcBodies[2] = shivaBody; npcs.add(shiva); shiva.startFollow({ ease: 'Linear', duration:6000, yoyo:true, repeat: -1, _delay: 200, delay: 100 }); P.P.P.S I also tried this.physics.world.enable(shiva); this.impact.world.enable(shiva); dialog_plugin.js game.js index.html city.json

I need help with creating objects in pixi In the backend I have a code running every 1000 millisecond, which passes the id, and x and y positions and I made a for that runs through the list of players. but when the first player comes in, it picks up the sprite "cat" which is a variable. then when the second player enters it also picks up the same variable, but as the first one already had it it becomes invisible. I need help, so that every id I pass in is for it to take an instance of "cat" and if I put the cat variable inside the for it gets creating several cat. const texture = PIXI.Texture.from('images/cat.png'); let cat = new Sprite(texture); const socket = io(); socket.on('newPositions',function(data){ // recebe o pacote 'newPosition' for(let i= 0;i < data.length; i++){ // fazendo um for do tamanho da data cat.x = data[i].x; cat.y = data[i].y; app.stage.addChild(cat); }

So I have a tilemap created from a Tiled .json file. The tile layers are scaled up 3 times. Works great. However, now that I'm trying to add an object layer, the objects seem to be in the wrong position, I presume, in the 3 times scaled down position. Game is a sidescroller. Take this example - https://testarea.krizucentrs.lv/. The tiny orange guy up in the leaves? He's supposed to be down by the rock on the right side. Also, he's supposed to be much bigger. I can't create an object layer and just scale it, Phaser doesn't recognize it in the map.createLayer function. How would I go about scaling the object layer correctly? P.S. if I'm doing this wrong by scaling every tile layer and sprite then let me know, I don't know how to make the game appear bigger.

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?

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(game.world.width-20, 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; coin2.events.onInputDown.add(this.getCoin, this); var coin3 = game.add.sprite(400, 100, 'coin'); coin3.inputEnabled=true; coin3.events.onInputDown.add(this.getCoin, 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); }

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

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

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!

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

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; }

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

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 ,

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 :/

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 !

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.

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

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?

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

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)

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?

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(); }, }

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

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); }; }