Search the Community

Hi all, Please check out Space Battle game, basically I used sea battle mechanics for single player in space setting. Made with VueJS, no canvas used - animation and isometric grid is made with CSS. Link to the game ? https://chpockrock.itch.io/spaceranger

Hey guys! I'm new to Phaser development, to JavaScript as a whole, and to any graphical game development whatsoever. Physics and such elude me still. I've set up a simple tilemap and lil character that you can move around. The collisions and boundaries work fantastically. Buuuut, I need grid-based movement! Think Pokemon, and other JRPGs that move you along a grid and never diagonally. I can more or less snap to the grid right now. The grid is 32x32 (sprite is as well) and I currently work movement like this... function update(time, delta) { const speed = 175; const preVelocity = player.body.velocity.clone(); // stop all velocity from previous frame player.body.setVelocity(0); snapToGrid(player); // horizontal movement if (controls.left.isDown) { player.x -= 32; } else if (controls.right.isDown) { player.x += 32; } // vertical movement if (controls.up.isDown) { player.y -= 32; } else if (controls.down.isDown) { player.y += 32; } // ensure that a player doesn't move faster diagonally player.body.velocity.normalize().scale(speed); if (controls.left.isDown) { player.anims.play("walk-left", true); } else if (controls.right.isDown) { player.anims.play("walk-right", true); } else if (controls.up.isDown) { player.anims.play("walk-up", true); } else if (controls.down.isDown) { player.anims.play("walk-down", true); } else { player.anims.stop(); // if we were moving, pick and idle frame to use if (preVelocity.x < 0) player.setTexture("cAtlas", "left1"); else if (preVelocity.x > 0) player.setTexture("cAtlas", "right1"); else if (preVelocity.y < 0) player.setTexture("cAtlas", "up1"); else if (preVelocity.y > 0) player.setTexture("cAtlas", "down1"); } } But the character zooms around like a caffeine-loaded kid on crack. It also ignores collision with boundaries, though it was working before when I didn't implement incrementing x and y by 32. How would you go about implementing grid-based movement into a game, while honoring collisions?

Hello, I try to use GridAlign for static Arcade physics objects, but I get strange positions. Code example, which you can run at https://labs.phaser.io/edit.html?src=src\games\firstgame\part10.js: var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; var player; var platforms; var cursors; var game = new Phaser.Game(config); function preload () { this.load.image('sky', 'src/games/firstgame/assets/sky.png'); this.load.image('ground', 'src/games/firstgame/assets/platform.png'); this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 }); this.load.spritesheet('diamonds', 'assets/sprites/diamonds32x24x5.png', { frameWidth: 32, frameHeight: 24 }); } function create () { // A simple background for our game this.add.image(400, 300, 'sky'); // The platforms group contains the ground and the 2 ledges we can jump on platforms = this.physics.add.staticGroup(); platforms.create(400, 568, 'ground').setScale(2).refreshBody(); platforms.create(600, 400, 'ground'); platforms.create(50, 250, 'ground'); platforms.create(750, 220, 'ground'); // The player and its settings player = this.physics.add.sprite(100, 450, 'dude'); player.setCollideWorldBounds(true); // Our player animations, turning, walking left and walking right. this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); // Input Events cursors = this.input.keyboard.createCursorKeys(); // Collide the player and the stars with the platforms this.physics.add.collider(player, platforms); // STATIC ALIGNED GROUP var group2 = this.physics.add.staticGroup({ key: 'diamonds', frame: [ 0, 1 ], frameQuantity: 2 }); Phaser.Actions.GridAlign(group2.getChildren(), { width: 3, height: 10, cellWidth: 32, cellHeight: 32, x: 100, y: 100 }); // DYNAMIC ALIGNED GROUP var group3 = this.physics.add.group({ key: 'diamonds', frame: [ 0, 1 ], frameQuantity: 2 }); Phaser.Actions.GridAlign(group3.getChildren(), { width: 3, height: 10, cellWidth: 32, cellHeight: 32, x: 500, y: 100 }); this.physics.add.collider(player, group2); this.physics.add.collider(player, group3); this.physics.add.collider(platforms, group3); } function update () { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true); } else { player.setVelocityX(0); player.anims.play('turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } } Here strange is that all static objects (group2) position is 0x0 - you can see the debug layer in canvas top-left corner. You can also try to move a player there - images do not have collisions, but that rectangle in the corner does have. If I create the same, but dynamic group (group3) - everything is Ok. The question is should it be like that or static bodies are not being placed correctly by GridAlign ?

I'm developing a game that will have grid based maps - levels and the player will be moving through it one block per keystroke. I'll be using the keyboard as input just for the start, I'll add others later on. Every level is generated from a double array filled with 1 & 0. So I want to do here is for example: if I press W the player will move one block forward. if I press Q the player will rotate anticlockwise by 45 degrees.

I need to know how to program a really simple 6x6 grid in Phaser - I can't figure out how to do it and I've been trying for ages! I am planning on further developing it with some friends later but I need to get this sorted first

Hello, I'm searching for Hex grid engine to make Battle Isle (DOS) clone in Phaser.js, if somebody can help me with that I'll be very gratefull cause I've found only this link which is broken -> http://www.html5gamedevs.com/topic/12546-super-simple-hex-tile-grid-demo/ Maybe there is a Phaser Hex Grid addon with documentation that I can't find ?

Hi, Am building my first game with Phaser and am a beginner. Am trying to code the grid which i attached. I have read some articles about the grids in phaser and at some articles was suggested to create it in html and position it over the canvas but in that way i will have issues with resizing. Also i cant have it as one whole image cause i have animations on each winning case which highlights the win symbol and its points. Any ideas how i can achieve this type of grids creation? Thanks.

Hi, I'm making a tile based mahjong clone, you can check the attached image for reference. basically I need a smart way to implement the mechanic of mahjong, that checks when I tap a tile if he has neighbours ( left or right ) and if he has a tile ontop of him. The way these are placed makes it very difficult for me to come up with a system. The sprites/buttons are all overlapping already I have my buttons(tiles) in an array and the references to which tile it is in a seperate array so I can create them easily for more levels. Is there someone who can help me tell phaser to check this without giving each tile in each level a reference to neighbours ( would take forever ) If you want me paste some code just ask

A 3d reference grid using BABYLON.MeshBuilder.CreateLineSystem http://www.babylonjs-playground.com/#P6XHUB

I would like to create boxes of random size that should align with grid squares. For example, if grid is 8x8 square and there is a box of size 2x3 then it should exactly take 2x3=6 square on grid. Is there any way to force this? Actually I want have drag and drop for those boxes that's why this restriction is needed. Or do I have to do maths stuff to force this? Something like shown in image. http://www.babylonjs-playground.com/#26LMDE#0 I am using one of these to implement grid:

Update 1: Single question for which solution required. How to implement large probably 1000x1000 grid. Not necessarily 3D? Playground: http://www.babylonjs-playground.com/#1VGWP9#9 Thanks in advance. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Detailed App: Use-Case: I want to create a floor for building. Floor is a grid. I must be able to add and remove boxes as rectangle which align with grid squares. This functionality should be implemented with drag and drop. When entered source and destination coordinates for two squares on grid, I have to show the path. This app can be done as 2D, 3D no required. Tried: I implemented basic grid with TiledGround of size 30x30 but as soon as I increase the size of grid the FPS goes down to 1, 2. I am finding hard to implement feature for box to aligned with grid. For showing path, after finding the path I am creating small boxes and putting them onto squares with basic translation for alignment with grid. The grid size may go upto 1000x1000. Help: Can you suggest better way to implement this application? I am good with 2D too. Attached: Screenshot of my implementation so far.

Hi, I have the file background.js (below) and in use it to draw some elements of my background. The problem is with my grid. My grid is correctly drawing in my stage but i can't move his position. By default the origin is (0,0). i put grid.x=400 but it's still to x=0. How do you move it ? I try also to build my grid with the prototype function but i don't know do it... //background.js //e for background function draw(e,game,nameA,posx,posy,wi,he,color,valueAlpha) { var e=game.add.sprite(0,0,nameA); e.x=posx; e.y=posy; e.width=wi; e.height=he; e.tint=color; e.alpha=valueAlpha return e } //g for game, w for width, h for height //color like white and red is on a separate file function Grid(e,g,row,line,w,h) { //var group=g.add.group() var grid=[]; for (var j = 0; j < line; j++) { grid[j] = []; for (var i = 0; i < row; i++) { grid[j][i] = draw(e,g,"rect",0,0,w,h,white,1) ; grid[j][i].x = i*(w+1) grid[j][i].y =j*(h+1) }; }; grid.x=400 return grid } function drawE(g,e) { var e=[] e.player=draw(e,g,"rect",0,0,320,480,red,1) e.papers=Grid(e,g,1,9,10,10,80,240) return e } //game.js var theGame = function(game){ background = null } theGame.prototype = { create: function(){ background=drawE(this.game,this.background) } }

hi, i know create an oop object with a simple graphic shape like this : // create an new instance of a pixi container var container = new PIXI.Container(); // create a renderer instance var renderer = PIXI.autoDetectRenderer(320, 480); // add the renderer view element to the DOM document.body.appendChild(renderer.view); requestAnimationFrame( animate ); var T={} T.draw = function() { PIXI.Graphics.call(this) this.beginFill(0xFFFFFF) this.drawRect(100,100,80,200) } T.draw.prototype = Object.create(PIXI.Graphics.prototype); T.draw.prototype.constructor = T.draw; var button=new T.draw() container.addChild(button); function animate() { requestAnimationFrame( animate ); renderer.render(container); } but I am lost on the fact of doing the same with an 2d array. Can you point me ? var graphics = []; for (var j = 0; j < 5; j++) { graphics[j] = []; for (var i = 0; i < 5; i++) { graphics[j][i] = new PIXI.Graphics(); graphics[j][i].beginFill(0xFF3300); graphics[j][i].lineStyle(4, 0xffd900, 1); graphics[j][i].drawRect(0,0,10,10); graphics[j][i].position.x = 40 * i; graphics[j][i].position.y = 40 * j; container.addChild(graphics[j][i]); }; };

<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>M N B</title> <script src="js/phaser.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { var width = window.screen.width; var availwidth = window.screen.availWidth; var height = window.screen.height; var availheight = window.screen.availHeight; var textStyle = { font: "20px Arial", fill: "#ffffff"}; var game = new Phaser.Game(availwidth , availheight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { //game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('red','assets/red.png'); game.load.image('green','assets/green.png'); } function create () { game.stage.backgroundColor = "000000"; var graphics = game.add.graphics(0,0); graphics.lineStyle(1,0xffffff,1); var box_width = (availwidth/10)-5; var box_height = (availheight/10)-5; last_start = box_width*10; last_end = box_height*10; //draw vertical lines for(var i=0;i<=last_start;i+=box_width){ graphics.moveTo(i,0); graphics.lineTo(i,last_end); } //draw horizontal lines for(var j=0;j<=last_end;j+=box_height){ graphics.moveTo(0,j); graphics.lineTo(last_start,j); } } function update(){ } }; </script> </body> </html> When I run the above code, and emulate it in Google Nexus 7 using Intel XDK, it does not show the last horizontal line (image below) On the other hand, when I emulate it in Apple Ipad (image below), it shows the complete grid perfectly (even though I need to scroll down to see the last line) Ques 1: Why is the above difference coming? Ques 2: Why is there a scrollbar coming when I am scaling the content properly? Thanks in advance.

So I am new to isometric and I have been looking into the isometric plugin recently and I was wondering several things regarding the map. So how do you go about building the map? Do you load a map image then add the grid to it or do you build the grid and add the map on top? Let's take this image as an example So if someone gives me this image, can I add a grid on top of it?

Hi, First of all, I'm new to WebGL and Babylon, so apologies for any noobisms. Basically, i'm trying my hand at an RTS, I've done a bunch of reading on Babylon and at the moment I'm just getting to grips with some of the basics. My plan is to get a very simple world in babylon that I can use to test and code some of the game mechanics. I've so far created a simple world with a heightmap and texture as per the example in the tutorials. Where I'm struggling is how to approach setting that world to a grid. So any buildings etc have to snap to grid when being placed. I'll also want to be able to detect clicks on grid squares so I can display information about what's there, resources etc. Really, I'm just looking for help with approach here. Should I be looking at a tiled ground? (I'm not sure how that would work, splitting up the height map image etc.) or should all the work be done with the detection of the mouse cursor and the grid can just be aesthetic only? Thanks for any help you can give! (p,s> I've also looked at a bunch of examples, but haven't yet found anything that does what i'm after).

Hi, I want to create a game with a hex grid map. The map itself should be created with blender (simple ground with some hills and few trees and houses). My problem is that I don't know how to lay a hex grid over the map (as seen below). It would also be nice, if the hexagon under the mouse cursor would be highlighted. What would be the best way to achieve this?

I am using PIXI v3.x and I have added a bunch of sprites to a container. The container looks like this: Which is confusing to me because each square sprite is flush with the others so the black lines in between don't make any sense. The lines also seem to get larger and smaller when I zoom in and out or move the container. The original images for the sprites look like these: Can someone help me figure out where these black lines are coming from and get rid of them? Regards, Jordan

Hello everyone, just registered for the forum a little while ago. Already enjoying the place I've been playing around with PIXI for the past couple of days and have run into an issue which has me stumped I am attempting to draw a tile map/grid of N number of tiles, pixi however abruptly stops drawing tiles, see the images below The time when it ceases to draw any more doesn't seem to be dependant on the number of drawing operations, or the tiles size. Interestingly enough, Firefox manages to get a little further than Chrome in drawing the tilemap. Here is my code for drawing the tilemap for(var i = 0; i < this.gridWidth; i++){ for(var j = 0; j < this.gridHeight; j++){ var cell = this.grid[i][j]; graphics.beginFill(cell.color); graphics.drawRect(i*cellSize, j*cellSize, cellSize, cellSize); } } graphics.endFill(); };Any ideas? Thanks.

I am trying to create a top-down game with movement constrained to a grid (think Pokemon Red/Blue movement). I have successfully imported a tilemap (32x32 pixel tiles) into my game, and I have set up tile collisions using setCollisionBetween() and physics.collide() for a player-controlled sprite. Currently I am adjusting body.velocity properties on keyboard input to move the player sprite, which works fine but is not really what I want. What I would like to do is to move the player sprite 1 tile (32 pixels) in the appropriate direction so that it always aligns to the tiled grid. I have tried updating the sprite's body.x and body.y values, but when I do this the player sprite seems to ignore all collision logic with the tilemap layer tiles set with setCollisionBetween(). So in short, how can I move a sprite x pixels every key press while still limiting the speed at which the sprite can cover a certain distance (as well as ensuring collisions still work)?