Search the Community
Showing results for tags 'Top Down'.
Found 5 results
-
Hi there! I'm relatively new...ok very new to coding with phaser and I'm having a tough time finding tutorials that can help guide me through a few of the basics for what I'm looking for. I've been trying to use this tutorial: How to make a multiplayer online game with Phaser, Socket.io and Node.js And this one: How to create a multiplayer game with Phaser, Node, Socket.io and Express. However, it seems that both tutorials were made using Phaser2 and there are a few fundamental differences that don't function well using the newer code. The biggest part I'm having trouble with is the differences between game states in the old Phaser and how they are different from the scenes the new version uses. game.state.add('Game',Game); game.state.start('Game'); These functions specifically seem to break my game every time I try and use them. Is the new phaser designed to be run entirely through the index.html file? Or is there a way to execute most of my game's code in a separate game.js file? Currently I have at least a functioning game where I can move around on a map, but the entire thing is contained inside a single index.html file. You can see my game's code here: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Top Down Multiplayer Test Game</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <script src="/node_modules/socket.io-client/dist/socket.io.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.Auto, width: 960, height: 960, physics: { default: 'arcade', arcade: { debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var blocked; var game = new Phaser.Game(config); function preload () { //assets to use in the loading screen this.load.image('preloadbar', 'assets/images/preloader-bar.png'); //load game assets this.load.image('level1', 'assets/tilemaps/level1.png'); this.load.image('gameTiles', 'assets/images/Outside_A2.png'); this.load.image('gameTiles', 'assets/images/Outside_B.png'); this.load.image('emptypot', 'assets/images/emptypot.png'); this.load.image('filledbucket', 'assets/images/filledbucket'); this.load.image('player', 'assets/images/player.png'); this.load.image('doorleft', 'assets/images/doorleft.png'); this.load.image('doorright', 'assets/images/doorright.png'); this.load.image('tent', 'assets/images/tent.png'); this.load.image('sign', 'assets/images/sign.png'); this.load.image('campfire', 'assets/images/campfire.png'); this.load.image('woodpile', 'assets/images/woodpile.png'); this.load.image('tree', 'assets/images/tree.png'); this.load.image('rock', 'assets/images/rock.png'); this.load.image('grapes', 'assets/images/grapes.png'); this.load.image('log', 'assets/images/log.png'); this.load.spritesheet('dude', 'assets/spritesheets/dude.png',{frameWidth: 32, frameHeight: 48}); } function create () { this.add.image(480, 480, 'level1'); blocked = this.physics.add.staticGroup(); blocked.create(456, 216, 'sign'); blocked.create(648, 168, 'woodpile'); blocked.create(648, 216, 'campfire'); blocked.create(744, 168, 'tent'); blocked.create(840, 216, 'filledbucket'); blocked.create(600, 400, 'rock'); blocked.create(648, 448, 'rock'); blocked.create(600, 448, 'grapes'); blocked.create(214, 720, 'tree'); blocked.create(214, 552, 'tree'); blocked.create(214, 384, 'tree'); blocked.create(214, 286, 'log'); blocked.create(214, 192, 'tree'); blocked.create(358, 192, 'tree'); player = this.physics.add.sprite(480, 480, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider(player, blocked); 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 }); } 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 if (cursors.up.isDown) { player.setVelocityY(-160); player.anims.play('right', true) } else if (cursors.down.isDown) { player.setVelocityY(160); player.anims.play('left', true) } else{ player.setVelocityX(0); player.setVelocityY(0); player.anims.play('turn'); } } </script> </body> </html> I'm also having a few issues adapting what I see in these tutorials around using a server to keep track of my player's position and report back locations. Some examples start with something as basic as referencing socket.io in my code as a source. In all the tutorials I can find they say to use this line of code in my index.html file: <script src="/socket.io/socket.io.js"></script> However this doesn't work, as you can see at the top of my game file above, I had to reference the full file path, going in through the node_modules folder and finding the socket.io.js file. Am I doing something wrong? Or am I supposed to reference the full file path and the tutorial is not accurate? Finally when trying to implement some of the code in the tutorials into the game file itself to tell the game to ask the server when a new client is connected, I get an error saying the code is invalid. I'm not sure if this is because I am putting the code in the incorrect place, or if it's because the code doesn't work in Phaser3 the way it did in version 2. Client.askNewPlayer(); The tutorial says to put this "at the end of game.create()" however because I don't have game states, I have nothing I can find as the equivalent. Just for the sake of testing it out, I tried placing this code inside the "function create ()" of my game if only because of the word create, and then also in the "function update ()" of my game because I figured this is where the game is always looping and checking for updates. But both gave me errors saying that "client is not defined" Again I'm sure you can probably tell this is my first time doing this sort of thing with real code, I've been messing around with RPG maker before this, but I really think I can get the hang of it if I can just get a few pointers or tips to get me going in the right direction! Any help or advice would be greatly appreciated!
-
A friend of mine and I have been working on this game for a few months now. It's a top down, tower defense game that has been prototyped out, and manages player progression. Story: You stole an artifact from a highly evolved society and fled to space. You crash land on this planet that has only progressed to middle age level tech. Waves of ships from the home planet are in pursuit. Survive as long as you can. Every wave gets progressively harder and introduces new enemies. Every 5 waves a boss will spawn. After defeating the boss, the Shop Merchant opens the house door and allows you to enter. While in the shop you can purchase mercenaries, additional towers, player upgrades, weapon upgrades, and access to the Dungeon(in development)! A lot of this is actively in development (when we get free time) and open anyone who wants to be a part of it. Would be interested in making it opensource if anyone else wants to help out. Mercenaries: Melee Merc: Charges towards the nearest enemy and damages them with his mighty sword (in development and op atm). High Health Healing Merc: Heals the player and nearby mercs when damaged. Ranger Merc: Good all around support merc. Carries a Rifle and mid range health. Weapons: Will be progressively unlocked as player level increases. Currently all are available all the time (dev mode) Pistol: single fire, mid damage, short range Rocket: single fire, high damage, AOE damage, mid range Assault Rifle: High fire rate, mid damage, long range. Laser: High damage, penetration, slow fire rate. Upgraded Laser: High Damage, Penetration, high fire rate. Enemies: Melee Enemy: Does significant damage when close to player. Low health Shotgun Enemy: high damage, close range, mid health Rifle Enemy: mid damage, high fire rate, mid health Boss: Progressively harder with player level and wave. Weapons change as player gets higher level Turrets: Just added. Have preset locations. 4 Modes for turrets that currently evolve with the player level. Want to make them paid unlocks. Pistol AOE: Shoots a pistol shot in all 360 degrees Laser: Pew Pew Beam: Peeeeeeeeeeeeeeew Roadmap: Dungeon bosses with progression More assets Additional levels Tower Placement Night mode with flashlight effect (already developed just buggy) Multiplayer (have our server built with Socket.io in place) ? Tech Stack: Javascript Node.js Phaser A* Tiled Texture Packer Trying to track down the person who made the sprite asset for credit. Let us know what you think. Code Below: https://github.com/FacesDev/Top-Down-Shooter To play: NPM Install NPM start localhost:7000/ Game play directions in "Controls"
-
Hi I'm working on a top down racing game. Yesterday I decided to buy the box2d plugin for phaser to get collision physics. There is a simple top down racing game included as a tutorial which I tried out and the collision part was good enough for my needs. But the actual driving physics were not because it was more like a spaceship. If you would stop pressing forward the car would continue in current direction until slowed down. But when I turn during this sliding a car should go where the wheels point and not in its current direction like a spaceship. So I decided to add my own driving physics to the demo which makes the car go in the direction of the wheels and instead of activating car.body.thrust(power) on key UP I call my function that ultimately sets car.body.x and car.body.y so it moves correct. The problem is that now I'm not colliding with the walls anymore because the box2d simulation is just getting the coordinates and doesn't move the car any more. I would like to use box2d as much as possible but I couldn't figure out how to make the car not slide like a spaceship and if possible I want to avoid having to create my own collision detection. Any tips on how to approach this?
-
I'm new here, though not new to game programming I'll try being short and to the point. My university's final year project is a Car Racing (2D top-down) game that takes any (ANY) route of the player's choice from Google maps and turns it into a race track. Then the player challenges their friends and race in real-time multiplayer. And the game is made in Phaser. I can take the array of points returned by the maps API and convert those into Cartesian coordinates and draw the whole track, with the boundaries of the road and everything. The problem I'm facing now is that I have a rectangular road texture, and I want to fill that shape generated from the points of the route with that road texture. Now, I asked this question to someone before and they suggested that I make the rectangular texture into a trapezoid and manipulate the individual sections, the more the sections the smoother the fill will be. Makes sense in theory. However, I can't find anything related to this in Pixi. Using another topic, I did learn how to skew images in HTML5 Canvas, but I can't figure out how to go about doing this in Pixi. Any help would be appreciated Thanks for reading! PS: Here's what my application can do, at the moment (apologies, I couldn't upload the picture here directly for some reason):
-
I'm building an old school top down racer but I can't get my car to drift when cornering. Can anyone share any code / tips / maths on how I could get a bit more 'fun' out of my car?
