Search the Community

let bigRect = new PIXI.Graphics(); bigRect.beginFill('0x00FF00'); bigRect.drawRect(0, 0, 200, 150); bigRect.endFill(); let smallRect = new PIXI.Graphics(); smallRect.beginFill('0xFFFF00'); smallRect.drawRect(0, 0, 190, 140); smallRect.endFill(); let smallRect_x = bigRect.x + (bigRect.width - smallRect.width)/2; let smallRect_y = bigRect.y + (bigRect.height - smallRect.height)/2; smallRect.position.set(smallRect_x, smallRect_y); app.stage.addChild(bigRect); bigRect.addChild(smallRect); bigRect.position.set(100, 100); I want to center smallRect inside bigRect. Why is it working in the code above when positions are set to (0, 0) initially, but wouldn't work if I had any position other than (0, 0) for the bigRect. It's not a problem to set the initial positions to (0, 0) and than change them, I just want to understand how it's working underneath.

Hi, In my isometric tmx file the object positions are :"x":4097 , "y": 3300. But in melonjs when i load the positions I am getting entirely different x and y cordinates. How can i map these both! can someone help me here! I am trying to save the game by editing the tmx json. so the x and y postions I am getting from the UI, when i try to save them in json . its not aligned.the postions are completely different!

As far as I understand, updating the positions data on a mesh using updateMeshPositions - or other update* functions - only works when the mesh is set to be updateable. This setting can only be done at creation time. All basic shape creation* functions have the updateable option that can be set, but the standard mesh constructor has not. How do I make a custom shaped mesh updatable? I have thought of a workaround, by creating an updateable cube or something and replacing the vertices data with my custom mesh data. I have not tested this, but I will. And another question: it was my take that the updateMeshPositions is the fastest way to update the vertices positions. setVerticesData works also on non Updateables but seems to be slow. Is updateMeshPositions the fastest way to modify the vertices positions? And if not, what is? I am working on a sculpting app, my custom mesh has over 50K positions. Updating vertices is what the app is all about and I need it to be done as smooth and realtime as possible.

The following function minimizes the number of vertices in a mesh. BABYLON.Mesh.prototype.minimizeVertices = function() { var _pdata = this.getVerticesData(BABYLON.VertexBuffer.PositionKind); var _ndata = this.getVerticesData(BABYLON.VertexBuffer.NormalKind); var _idata = this.getIndices(); var _newPdata = []; //new positions array var _newIdata =[]; //new indices array var _mapPtr =0; // new index; var _uniquePositions = []; // unique vertex positions for(var _i=0; _i<_idata.length; _i+=3) { var _facet = [_idata[_i], _idata[_i + 1], _idata[_i+2]]; //facet vertex indices var _pstring = []; //lists facet vertex positions (x,y,z) as string "xyz"" for(var _j = 0; _j<3; _j++) { // _pstring[_j] = ""; for(var _k = 0; _k<3; _k++) { //small values make 0 if (Math.abs(_pdata[3*_facet[_j] + _k]) < 0.0001) { _pdata[3*_facet[_j] + _k] = 0; } _pstring[_j] += _pdata[3*_facet[_j] + _k] + "|"; } _pstring[_j] = _pstring[_j].slice(0, -1); } //check facet vertices to see that none are repeated // do not process any facet that has a repeated vertex, ie is a line if(!(_pstring[0] == _pstring[1] || _pstring[0] == _pstring[2] || _pstring[1] == _pstring[2])) { //for each facet position check if already listed in uniquePositions // if not listed add to uniquePositions and set index pointer // if listed use its index in uniquePositions and new index pointer for(var _j = 0; _j<3; _j++) { var _ptr = _uniquePositions.indexOf(_pstring[_j]) if(_ptr < 0) { _uniquePositions.push(_pstring[_j]); _ptr = _mapPtr++; //not listed so add individual x, y, z coordinates to new positions array newPdata //and add matching normal data to new normals array newNdata for(var _k = 0; _k<3; _k++) { _newPdata.push(_pdata[3*_facet[_j] + _k]); } } // add new index pointer to new indices array newIdata _newIdata.push(_ptr); } } } _newNdata =[]; //new normal data BABYLON.VertexData.ComputeNormals(_newPdata, _newIdata, _newNdata); //create new vertex data object and update var _vertexData = new BABYLON.VertexData(); _vertexData.positions = _newPdata; _vertexData.indices = _newIdata; _vertexData.normals = _newNdata; _vertexData.applyToMesh(this); } If you check this playground http://www.babylonjs-playground.com/#1JBMJ3#15 and switch on the Debug Layer you will see the number of vertices is 366. Comment out line 78 (ie do not apply the minimize vertices function) the number of vertices is 435. Replacing line 78 with sphere.optimizeIndices() leaves the number of vertices as 435 EDIT Just to bring to the top RaananW's warning from his post, this will only help if the mesh material is a uniform colour or texture. Textures such as the map of the earth will not seam correctly if the above function is applied to the sphere. Questions Is this a useful function? Is there anything made not possible by applying the function? Could this already be done with existing functions? Some Background to The Developement Playing around with sphere with a small number of segments (1) (below) I counted 14 vertices but the Debug Layer showed 28 The console for the vertex data positions gave Array [ 0, 5, 0, 0, 5, 0, 0, 5, 0, 0, 74 more… ] and that for the indices gave Array [ 0, 1, 7, 7, 1, 8, 1, 2, 8, 8, 98 more… ] This showed two things (1) vertex positions are repeated, eg 0, 5, 0 is repeated at least three times (2) The indices for the first facet (one of the triangles used to construct a mesh) 0, 1, 7 gives the vertex positions as (0, 5, 0), (0, 5, 0) and (4.330126941204071, 2.5, 0). Since (0, 5, 0) accounts for two positions the facet 0, 1, 7 is not a true triangle but is a straight line. So I set about seeing if I could remove the redundancies. This playground http://www.babylonjs-playground.com/#1JBMJ3#16 shows it was possible. Next question was did the function affect sub meshes? This playground http://www.babylonjs-playground.com/#1JBMJ3#13 shows that it does not appear to? This playground http://www.babylonjs-playground.com/#1JBMJ3#14 (by uncommenting lines 79 and 80) seems to show that the function will take a flat shaded mesh and reverse it back. Is there a name for a mesh that is not flat shaded? A round shaded mesh does not sound correct.

Hello, I want to update the vertices of a lines mesh after it has been created. On a sphere, by contrast, I can do so fairly simply: mySphere.position.x = myX; mySphere.position.z = myZ; But there does not appear to be anything like that for lines mesh: // myLines.positions is undefined ???? myLines.positions[0].x = myPositions[0].x; myLines.positions[0].z = myPositions[0].z; myLines.positions[1].x = myPositions[1].x; myLines.positions[1].z = myPositions[1].z; // myLines._positions is null ???? myLines._positions[0].x = myPositions[0].x; myLines._positions[0].z = myPositions[0].z; myLines._positions[1].x = myPositions[1].x; myLines._positions[1].z = myPositions[1].z; Is the only way to make the mesh updatable and send a new array of points in via the options? Doable, but it's more of a pain, IMO. Insight appreciated. Thanks!

Hi guys, So I'm trying to expand the game I'm making to be a multiplayer game using Node.js and Socket.io. The connection between server-side and client-side is working, however I don't know how to update the positions of the players. This is how it goes, whenever a player moves the socket.sessionid and coordinates are send to the server. The server then broadcasts this data to all the other clients except the client which sent the data. In the client-side that information gets decoded and stored in 2 variables (at this moment), a player variable (with the id), and a X variable (with the x value, duh). At this moment I really don't know how to update the positions of a certain sprite in the game. Are there any examples on how to create a basic multiplayer Phaser game using websockets? I'm kinda stuck. The code I'm using on the client side is as follows, it is very dirty atm since I'm experimenting.. The 'xChanged' function sends the new position to the server, and 'posChanged' reads the data that gets sent from the server. var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update});function preload() { game.load.spritesheet('player', 'img/ally_sprite.png', 64, 64); game.load.image('boss', 'img/boss.png'); game.load.image('bullet', 'img/bullet.png');}var player, boss, cursors, x, y, z, xTouch, yTouch, fireButton, bullets, bulletTime = 50, text, bulletsCount = 30;var players = {};var io = io.connect('http://192.168.0.13:3000');// server ipvar xPos, yPos, label, sock;function create() { game.renderer.clearBeforeRender = false; game.renderer.roundPixels = true; game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(game.world.centerX, game.world.centerY, 'player'); player.anchor.setTo(.5,.5); player.animations.add('fly'); player.animations.play('fly', 10, true); game.physics.enable(player, Phaser.Physics.ARCADE); player.enableBody = true; player.body.collideWorldBounds = true; // new player var pos = JSON.stringify({ player: io.socket.sessionid, x: game.world.centerX, y: game.world.centerY, angle: 0 }); socket.emit('newPos', pos); boss = game.add.sprite(game.centerX, game.centerY, 'boss'); boss.enableBody = true; boss.physicsBodyType = Phaser.Physics.ARCADE; bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(30, 'bullet'); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 1); bullets.setAll('outOfBoundsKill', true); game.stage.backgroundColor = '#ccc'; game.input.addPointer(); fireButton = game.input.pointer1; if(isMobile.any) { if(gyro.hasFeature('devicemotion')) { console.log('gyrojs loaded'); if(gyro.getFeatures().length > 0) { gyro.frequency = 10; gyro.startTracking(function(o) { var anglePlayer = Math.atan2(o.y, o.x); angleRadians = anglePlayer * Math.PI/180; anglePlayer *= 180/Math.PI; anglePlayer = 180 - anglePlayer; player.angle = game.math.wrapAngle(anglePlayer, false); if(fireButton.isDown) { fire(); } if(o.z < 9.5 || o.z > 10) { player.body.velocity.x -= o.x * 20; player.body.velocity.y += o.y * 20; } else { player.angle = 0; } console.log(player.body.velocity.x); // Send new position to server var newPos = JSON.stringify({ player: io.socket.sessionid, x: player.body.velocity.x, y: player.body.velocity.y, angle: player.angle }); socket.emit('newPos', newPos); }); } } else { // fallback als gyro.js niet werkt.. console.log('gyrojs not loaded'); window.addEventListener('devicemotion', function(event) { x = event.accelerationIncludingGravity.x; y = event.accelerationIncludingGravity.y; z = event.accelerationIncludingGravity.z; var anglePlayer = Math.atan2(y, x); anglePlayer *= 180/Math.PI; anglePlayer = 180 - anglePlayer; player.angle = game.math.wrapAngle(anglePlayer, false); if(fireButton.isDown) { fire(); } if(z < 9.5 || z > 10) { player.body.velocity.x -= x * 40; player.body.velocity.y += y * 40; } else { player.angle = 0; } // Send new position to server var newPos = JSON.stringify({ player: io.socket.sessionid, x: player.body.velocity.x, y: player.body.velocity.y, angle: player.angle }); socket.emit('newPos', newPos); var interval = 10; }); } } else { // Niet mobiel, bewegingen omzetten in keys console.log('Niet Mobiel'); cursors = game.input.keyboard.createCursorKeys(); } text = game.add.text(game.world.centerX, 50, "Bullets: 30", { font: "65px Arial", fill: "#000000", align: "center" }); text.anchor.setTo(0.5, 0.5); // Add new players to the screen socket.on('newPlayerwithPos', function(data) { var obj = JSON.parse(data); var xNew = obj.x; var yNew = obj.y; console.log(xNew, yNew); var p = game.add.sprite(xNew, yNew, 'player'); p.anchor.setTo(.5,.5); p.animations.add('fly'); p.animations.play('fly', 10, true); game.physics.enable(p, Phaser.Physics.ARCADE); p.enableBody = true; p.body.collideWorldBounds = true; });}function update() { player.body.velocity.setTo(0,0); if(!isMobile.any) { if(cursors.left.isDown) { player.body.velocity.x -= 40; } else if(cursors.right.isDown) { player.body.velocity.x += 40; var newPos = JSON.stringify({ x: player.x, player: io.socket.sessionid }); } if(game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR).isDown) { fire(); } } // Get new positions from all other players socket.on('updatePos', function(data) { for(var playerData in data) { // update array of players var player = {}; player.name = data[playerData].sessionID; player.x = data[playerData].x; player.y = data[playerData].y; player.angle = data[playerData].angle; players[player.name] = player; } }); // loop through all players and draw sprites for(var playerData in players) { var p = ''; var playerX = players[playerData].x; var playerY = players[playerData].y; var playerAngle = players[playerData].angle; var p = game.add.sprite(playerX, playerY, 'player'); game.physics.enable(p, Phaser.Physics.ARCADE); p.enableBody = true; p.body.velocity.x -= playerX; p.body.velocity..y += playerY; p.angle = playerAngle; }}function fire() { if(game.time.now > bulletTime) { bullet = bullets.getFirstExists(false); if(bullet) { bullet.reset(player.body.x + 32, player.body.y + 32); bullet.rotation = player.rotation; game.physics.arcade.velocityFromRotation(player.rotation, 400, bullet.body.velocity); bulletTime = game.time.now + 50; // Update bullet counter bulletsCount --; text.setText("Bullets: " + bulletsCount); } }}