Search the Community

Hey. While working with PBR materials i have noticed that the name and id are not applied when cloning the material. Instead it uses it's parent name and id. For comparison here is the cloning snippet for the standard material and PBR materials, where the id and name are not reset prior to returning. StandardMaterial.prototype.clone = function (name) { var _this = this; var result = BABYLON.SerializationHelper.Clone(function () { return new StandardMaterial(name, _this.getScene()); }, this); result.name = name; result.id = name; return result; }; PBRMetallicRoughnessMaterial.prototype.clone = function (name) { var _this = this; return BABYLON.SerializationHelper.Clone(function () { return new PBRMetallicRoughnessMaterial(name, _this.getScene()); }, this); }; Correct me if I am missing something. Thanks

Hi there, I have one single OBJ file with several objects within. Each element has its unique name. Is it possible to load each object as a single mesh? Tried to do this: var parts = []; obj.onSuccess = function (task) { for(var i = 0; i < task.loadedMeshes.length; i++){ parts.push(task.loadedMeshes[i]); parts[parts - 1].material = uniqueMat; ... } } But it seems that each next mesh / geometry has all previous ones like an avalanche. Loading OBJ with 5 similar spheres as a test Geometry {delayLoadState: 0, _totalVertices: 266, _isDisposed: false, id: "c0d23769-a422-47c5-8060-fabd67a55b1a", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 532, _isDisposed: false, id: "e83a4890-a107-425d-969c-eea1f356e200", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 798, _isDisposed: false, id: "19b85286-2066-4ef7-9e95-bba19d906e71", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 1064, _isDisposed: false, id: "22bc102d-1acc-4fa8-9576-77a9915e666f", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 1330, _isDisposed: false, id: "3eb8eab7-1871-4fed-b484-c18fc881cb23", _engine: Engine…} main.js:234 0

I maked simple hexagon in blender and i want change colour on click button "Click me". How I can refer to the specific id (In this case - Cube) from blender in my script? Can you check my html file? I'm not sure that all it's good. It's blender file {"producer":{"name":"Blender","version":"2.78 (sub 0)","exporter_version":"4.6.1","file":"szescian.babylon"}, "autoClear":true,"clearColor":[0.0509,0.0509,0.0509],"ambientColor":[0,0,0],"gravity":[0,-9.81,0], "materials":[{"name":"szescian.Material","id":"szescian.Material","ambient":[0.8,0.7048,0.0663],"diffuse":[0.64,0.5639,0.0531],"specular":[0.5,0.5,0.5],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false}], "multiMaterials":[], "skeletons":[], "meshes":[{"name":"Plane","id":"Plane","billboardMode":0,"position":[0.2658,0.2489,1.9542],"rotation":[0,0,0],"scaling":[5,5,5],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false ,"positions":[1,0,-1,-1,0,1,-1,0,-1,1,0,1] ,"normals":[0,1,0,0,1,0,0,1,0,0,1,0] ,"indices":[0,1,2,0,3,1] ,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":4,"indexStart":0,"indexCount":6}] ,"instances":[]} ,{"name":"Cube","id":"Cube","materialId":"szescian.Material","billboardMode":0,"position":[0,1,0],"rotation":[0,0,0],"scaling":[1,1,1],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false ,"positions":[1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,-1,-1,-1,-1,1,-1] ,"normals":[0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,0.5773,-0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,-0.5773] ,"indices":[0,1,2,3,4,5,5,0,2,4,6,0,6,3,1,2,3,5,0,6,1,3,7,4,5,4,0,4,7,6,6,7,3,2,1,3] ,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":8,"indexStart":0,"indexCount":36}] ,"instances":[]} ], "cameras":[{"name":"Camera","id":"Camera","position":[7.4811,5.3437,-6.5076],"rotation":[0.4615,-0.8149,0],"fov":0.8576,"minZ":0.1,"maxZ":100,"speed":1,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.2,0.9,0.2],"cameraRigMode":0,"interaxial_distance":0.0637,"type":"FreeCamera"}],"activeCamera":"Camera", "lights":[{"name":"Lamp","id":"Lamp","type":0,"position":[4.0762,5.9039,1.0055],"intensity":8.22,"diffuse":[0.1138,1,0.1492],"specular":[0.1138,1,0.1492]}], "shadowGenerators":[] } My html code <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="js/babylon.2.5.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="renderCanvas"></canvas> <button id="sweetButton">Click me</button> <script> window.addEventListener('DOMContentLoaded', function(){ var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); engine.enableOfflineSupport = false; var createScene = function(){ var scene = new BABYLON.Scene(engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene); // target the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas camera.attachControl(canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); BABYLON.SceneLoader.ImportMesh("","","szescian.babylon",scene); return scene; } var scene = createScene(); engine.runRenderLoop(function(){ scene.render(); }); window.addEventListener('resize', function() { engine.resize(); }); }); </script> </body> </html>

Hi I have a script (below): How do I get the elements for myItems, I want to drag an item over an identical item placed at the top of the stage so that I can kill it here is my custom function once there is an overlap touchItem1 : function(myitem, item){ console.log('MY ITEM ->' + this.myItems.key + ' - RANDOM ITEM KEY -> ' + this.getRandItem1); if (this.myItems == this.getRandItem1){ console.log('Touching the same id key and now i can kill the sprite'); } }, link : http://html5gamer.mobi/phaser2/santa/ var FreestyleGame = FreestyleGame || {}; FreestyleGame.GameState = { //initiate game settings init: function(currentLevel) { //use all the area, don't distort scale this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //cursor keys this.cursors = this.game.input.keyboard.createCursorKeys(); //initiate physics system this.game.physics.startSystem(Phaser.Physics.ARCADE); //game constants this.PLAYER_SPEED = 500; this.score = 0; }, create: function() { //moving stars background this.background = this.add.sprite(0, 0, 'background'); this.levelData = JSON.parse(this.game.cache.getText('level')); // create 3 top irems to choose from this.getRandItem1 = Math.floor((Math.random() * 15) + 1); this.getRandItem2 = Math.floor((Math.random() * 15) + 1); this.getRandItem3 = Math.floor((Math.random() * 15) + 1); // show 3 random items at top this.item1 = this.add.sprite(this.game.width / 2 - 200 ,100,'item' + this.getRandItem1); this.item1.anchor.setTo(0.5); console.log(this.getRandItem1); this.game.physics.arcade.enable(this.item1); this.item2 = this.add.sprite(this.game.width / 2 ,100,'item' + this.getRandItem2); this.item2.anchor.setTo(0.5); this.game.physics.arcade.enable(this.item2); this.item3 = this.add.sprite(this.game.width / 2 + 200,100,'item' + this.getRandItem3); this.item3.anchor.setTo(0.5); this.game.physics.arcade.enable(this.item3); //my items this.myItems = this.add.group(); this.myItems.enableBody = true; var item; this.levelData.itemData.forEach(function(element){ //create rendom x and y this.getRandX = Math.floor((Math.random() * 711) + 1); this.getRandY = Math.floor((Math.random() * 1111) + 200); //get info from the json file item = this.myItems.create(this.getRandX,this.getRandY, element.key); // get key //touch and drag item.inputEnabled = true; item.input.enableDrag(); }, this); this.myItems.add(item); //player this.player = this.add.sprite(500, this.game.world.height - 200, 'player'); this.player.anchor.setTo(0.5); this.game.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.createOnscreenControls(); //load level this.loadLevel(); this.addScore = this.game.time.events.loop(Phaser.Timer.SECOND * 4, function(){ this.score ++; this.distance --; this.refreshStats(); }, this); }, update: function() { this.myItems.forEach(function(element){ //console.log(element.key); }, this); this.game.physics.arcade.overlap(this.myItems, this.item1, this.touchItem1, null, this); this.game.physics.arcade.overlap(this.myItems, this.item2, this.touchItem2, null, this); this.game.physics.arcade.overlap(this.myItems, this.item3, this.touchItem3, null, this); //listen to user input if(this.game.input.activePointer.isDown) { //get the location of the touch var targetX = this.game.input.activePointer.position.x; //define the direction of the speed var direction = targetX >= this.game.world.centerX ? 1 : -1; //move the player this.player.body.velocity.x = direction * this.PLAYER_SPEED; } // keyboard and touch control if (this.cursors.left.isDown || this.player.customParams.isMovingLeft){ this.player.body.velocity.x = - this.PLAYER_SPEED; } else if (this.cursors.right.isDown || this.player.customParams.isMovingRight){ this.player.body.velocity.x = + this.PLAYER_SPEED; } }, createOnscreenControls : function(){ this.leftArrow = this.add.button(this.game.world.width * 0.05,this.game.world.height /2, 'arrowButton'); this.rightArrow = this.add.button(this.game.world.width * 0.95,this.game.world.height /2, 'arrowButton'); this.leftArrow.alpha = 1; this.leftArrow.scale.setTo(2); this.rightArrow.alpha = 1; this.rightArrow.scale.setTo(2); this.rightArrow.scale.x = -2; //left this.leftArrow.events.onInputDown.add(function(){ this.player.customParams.isMovingLeft = true; }, this); this.leftArrow.events.onInputUp.add(function(){ this.player.customParams.isMovingLeft = false; }, this); this.leftArrow.events.onInputOver.add(function(){ this.player.customParams.isMovingLeft = true; }, this); this.leftArrow.events.onInputOut.add(function(){ this.player.customParams.isMovingLeft = false; }, this); //right this.rightArrow.events.onInputDown.add(function(){ this.player.customParams.isMovingRight = true; }, this); this.rightArrow.events.onInputUp.add(function(){ this.player.customParams.isMovingRight = false; }, this); this.rightArrow.events.onInputOver.add(function(){ this.player.customParams.isMovingRight = true; }, this); this.rightArrow.events.onInputOut.add(function(){ this.player.customParams.isMovingRight = false; }, this); }, touchItem1 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem1); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, touchItem2 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem2); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, touchItem3 : function(myitem, item){ console.log('MINE ->' + this.myItems.key + ' - RAND -> ' + this.getRandItem3); if (this.myItems == this.getRandItem1){} console.log('Touch'); }, }; thanks in advance Eric

I find my self often using console.log() to log for messages while developing which does the job but in the end I should remove all those log statements. So I though it would be nice if I use my own debug text field in Phaser. Yes I made one and it works but how to log messages on screen when all the JS scripts are still not loaded i.e before the game code loads? So, the new canvas API has methods to draw text inside but I don't see the canvas html element being created by Phaser to have its own ID or name. Yes I could possibly do it with custom JS function but are there some tools to help me already? Or I just create separate html element like paragraph and write log messages inside of it and don't bother with the canvas? https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

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?

Hi, I'm new with phaser and would like to know if there is any way to add html class or id tag to images and sprites so some properties can be apply. Regards.

Hi Guys, I have a question of obtaining some form of a unique ID from a sprite / button, let me explain. I have a main menu which loads a random number of items which are clickable (at the moment they are buttons, which I'm not sure is correct or if they should be sprites). I also have a JS object which represents each of these created items (the objects are put into an array). At the moment when the Phaser button is created (in a for loop), I attach the button to the JS object when it is created, so that it is stored. As a callback function on the clickable button, I try and pass the unique ID of the object so that I can quickly access which ever object is attached to that particular button and get all the details. However, when I alert the unique ID on button click, it keeps displaying the same one, regardless of the button I click. Now I know this must be wrong and I presume I should be attaching the custom object to the button instead, but I'm not too sure how to do that. If that is also incorrect, what steps should I take to link my object to a clickable button/sprite? The idea is that once a button is clicked, a small menu dialog appears with the details etc. depending on the item clicked Many Thanks!

Hey out there, I created some buttons like this: generateButtons() { for (var i = 0, j = 0; i < 3; i++, j++) { console.log(i); //shows 0,1,2 //create upgrade button this.upgradeButton = this.game.add.button(610, 225 + (j * 165), 'skillButton', function helper() { this.dosth(this.upgradeButton.name); }, this, 2, 1, 0); upgradeButton.name = 'button' + i; }}dosth(buttonname) { console.log('show me the clicked buttonname: ' + button name); //always 'button2'}And now i want to detect the exact name-attribute of the pressed button in the "dosth"-function. But i always get the name of the latest number of the "i" - in this case its: "button2". I know i can create three separate buttons but i would like to do it in a dynamic way. Can anyone give me some advice? Thanks