Search the Community

Showing results for tags 'topdown'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 16 results

  1. Hi, This is my first time posting here. I hope i'm at the right place. So hello all! It's been a long time since I worked on a game. So I'm a little rusty (ok a lot). Last year I discovered Construct 2 and I thought I could revisit my top-down-zombie-shooter-obsession with it. So I started working on this game. It's been a year now and the time I spend working on this game is getting shorter by each week. I really want to finish this game and somehow publish it somewhere. I think having some feedback would make this process easier and result in a better game. So far I'm the only one played and tested it. So I really need your opinions! Here is the link to Game: About the game: It is a top down shooter. Player is limited to a small area and has to kill zombies until he/she is dead. The game-play is pretty much inspired by Crimsonland. I tried to keep the game as generic as possible. With a generic name and mostly generic guns and game-play. Although I tried my best to polish the graphics, sound (still working on most of them) and game play. You can access Dev Menu by clicking Show Dev Menu button on top right of the game screen. There are several buttons that will allow you to spawn weapons and bonuses. Also on the left side of screen, you will see some shortcut keys to spawn zombies, NPCs and other bonuses. You can press ESC to go back to main menu and start a new game. Also you can use Mouse Wheel to Zoom In and Out. Use WASD to move player and mouse to aim and shoot. Q and E to cycle weapons. For anyone interested in more: I wanted a dark and creepy atmosphere with lots of zombies to shoot. So the darkness is part of the game. There are bonuses and upgrades that will help player see better in dark. Please tell me if it is too dark for you to enjoy the game play. Player just runs around game area and zombies spawn, getting tougher and faster. I am still working on spawn algorithm but I think it works fine for testing. There are 6 type of zombies, 11 different weapons and 13 bonuses that will spawn in time. Also NPCs will spawn every now and then and they will be equipped with different weapons. There is an upgrade menu accessed by pressing Shift. Once the game is finished, upgrades will cost points to purchase. Still working on that. (also working on the UI part of it) But for testing purposes all of the upgrades are available without points. I would appreciate any suggestions about that. Currently red particles spawn when player kills zombies (like XP orbs) and they move to player when they are close enough. Then player will gain point (or XP perhaps). Then they will be able to spend them on upgrades. Those upgrades will only last until player dies. Much like in Crimsonland, player has to upgrade in each retry. (i'm seriously thinking about getting rid of those XP orbs and give points instantly instead... I think it would confuse players as the way it is now) Right now there is a difficulty multiplier that goes up by small amounts in time. I use it to multiply health, speed, damage and of enemies and max amount of enemies in game. You can change it in Dev Menu. At 100 things get crazy fast. I would like to hear your opinions about the difficulty setting. I still have some work to do with UI design, sound effects and need to find a fitting music. I'll keep working on them. In the meantime I would really appreciate any kind of feed back. It would be especially helpful if you could tell me about the FPS value that is located at the bottom right of the screen. And tell me how the game performs on your computer. Thank you all for your time!
  2. 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, and Node.js And this one: How to create a multiplayer game with Phaser, Node, 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="//"></script> <script src="/node_modules/"></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);'left', true); } else if (cursors.right.isDown) { player.setVelocityX(160);'right', true) } else if (cursors.up.isDown) { player.setVelocityY(-160);'right', true) } else if (cursors.down.isDown) { player.setVelocityY(160);'left', true) } else{ player.setVelocityX(0); player.setVelocityY(0);'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 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="/"></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 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!
  3. Hi Been working on a top down car game for quite a while and creating my own render using 2d canvas. Looked at pixiJS and decided to update the render with that to get the benefit from webGL and perhaps other nice useful features that I don't know about yet. I create tiles in photoshop, draw the map in many layers in Tiled and then in my game I pre render all background layers and my foreground layers into 2 large canvases stored in memory which I then use to draw what the player sees based on my camera that is tracking the hero. Now that I'm switching to pixiJS I'm confused about a couple of things. I've been searching, and going through some great tutorials, explanations and documentation but still feel I want to ask for some help here. My current setup is that I do the same prerender as before and then add my background and foreground as sprites like this: this.layers[zLevel] = new pixiJS.Sprite(pixiJS.Texture.fromCanvas(this.offScreenCanvas[zLevel])); if (zLevel === 'background') { this.layers[zLevel].zOrder = 20; } else { this.layers[zLevel].zOrder = 10; } this.pixiApp.stage.addChild(this.layers[zLevel]); Question 1: Is this approach recommended (I know this consumes memory and if the map is too big I'll need to split into smaller chunks) ? I'm also confused about sprite vs texture. I could not get my background to show up unless I turned it into a sprite. Question 2: How do I control which layer is on top of the other? I tried in this example to place background above foreground but that didn't work. My cars should be positioned between background and foreground, how do I accomplish that? In my old version I draw my layers like this: this.ctx.drawImage( this.preRender.offScreenCanvas[zLevel], // image camera.x, // source x camera.y, // source y camera.width, // source width camera.height, // source height 0, // target x 0, // target y camera.width, // target width camera.height // target height ); Question 3: How should I approach the camera in pixi? It seems like I should just change x and y of my background sprites to accomplish the same effekt. Is that the right approach? Question 4: When looking at the examples in pixijs: or kitty kat attack tutorial: I keep seeing thing things done different all the time. is one of them out of date? For example in kittykatattack they call renderer.render at the end of each example. /piranha
  4. I would like to show you my topdown 2d multiplayer shooter. It currently uses a pretty basic placeholder map, I just suck at graphics So consider this a WIP TechDemo. I used Phaser as the engine, Primus for the socket layer, Node as a server. Behind the scenes this does entity interpolation and prediction to give a smooth ride and good experience and to keep things exciting a visibility polygon will give you the ability to hide behind cover so your enemy can't see you. But they can hear you due to positional audio if you fire your gun. Controls: Mouselook - It will ask for a lock on your mouse, accept it and you can control the direction of your character like you would in a FPS shooter. It might be twitchy, I like minimal mouse movement, sorry. WASD/Arrows - move and strafe Left mouse - shoot to kill TAB - show score (weird numbered name means someone connected, but still in character selection or name entry) Click below to play: Enjoy
  5. Hi everyone, I just finished this little project that I call Room Walkers. You can play it here: In the top-left corner enter a name and click "Play!". Then a character will appear which you can control with arrow keys. When other players join you can see them and they can see you as well. There is no attacking or messaging in this game, just walking around. I used basic JavaScript Phaser with NodeJS "ws" library on the backend. Let me know what you guys think. woot.
  6. Hi, I'm trying to build a top-down 2d game. You can find the code for it here: Here is a screenshot of the game using "this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE ;" The game works, but there are a few issues I'm having: 1) The "viewport" always shows an area of 10 x 10 tiles. As the player moves the camera follows him and he appears to be moving around the map. However, the viewport is always 10 x x10. Is there a way to change this, for example, to where the viewport always showed an area of 20x20 tiles? 2) When I use "NO_SCALE" mode everything looks super tiny, but when I use any scale mode (such as SHOW_ALL) the text looks blurry and is completely unreadable... How can I have graphics that are large enough to see while still keeping nice, crisp fonts? thanks.
  7. Here's me giving back to the community by sharing my own knowledge and adventure in Phaser: New: Jan 9, 2017 - Past: Hope you guys enjoy!
  8. Just quickly a short story before I begin with the description for this game: This game originally started as a graduation project, after graduating we started working on a new version. Worked on this new version for 6 months and never finished it. This is a great example of an overscoped project, however, we did manage to do quite a lot and that's why I'm sharing this game nonetheless since I think that some of you might find this interesting. UPDATE: Managed to scope it down a lot. At the time of writing this there'll be an update near the end of next week. This would bring Tuludo to the Minimal Viable Product that we should've defined better. From there we can start adding fun new features. Now that we got that out of the way: Tuludo is an online game create that is accessible for anyone. It is targeted towards kids who would like to create games but who do not know how to program. The goal of Tuludo is not to teach kids how to program, there're already plenty of websites doing that just fine. Tuludo's goal is rather to have fun with creating games. Features: Create levels by simply drawing tiles. Add interactions to levels using pre-built game objects. Change the behaviour and looks of game objects freely. Easy to understand action-reaction system that allows users to create their own logic for game objects. Save and publish games to share them with friends. Tuludo is of course made with Javascript and uses Matter.js for the physics. Mustache.js and jQuery were used to make the GUI interactions more doable. Other then that there's no engine used. The website itself is built using the Laravel framework. You can check out some of the demo games that were made: Adventure in the dark cave (Small platformer): Lava Tower (Vertical platformer with rising lava): Legend of the Puzzle Temple ("Pushing blocks" puzzle game): Or you can jump straight into the Editor to try it out yourself (No account or sign up required): And if you really don't feel like doing anything you can simply watch this video that I once made (Which was never meant to be shared): So that's it. That's Tuludo. Thought some of you might like seeing it, it's nowhere near perfect but I and my team members learned a lot. Nonetheless, never overscope your projects kids. Let me know if you have any questions!
  9. I think I'm done with this minimal 2D maze shooter, with one enemy, two weapons (shotgun and laser), six levels, and infinitely destructible terrain. the game: level editor: On touch screens, the buttons are on the bottom left corner: switch weapons, and fire. Everywhere else is treated like a big trackball. Tested on iOS Safari and Android Chrome. On desktop, Z switches weapons and X fires. Arrow keys move, and you can hold "shift" for an extra speed boost. Mostly tested on Chrome, some Safari and Firefox. No idea about IE though. I wrote this because I wanted to complete a basic, full-screen multi-level arcade game, for mobile (and desktop), using WebGL, Web Audio, and my physics engine (with continuous collision detection!) and editor code. Gameplay-wise I didn't want to do anything fancy because I thought this would be a starter project, one of many. It's a lot like, the first JS game I ever wrote, yeeeears ago. Not including the physics engine, the editor code, or a lot of other fundamentals, this took exactly 100 days.
  10. Hey, check out my new game "" Its a multiplayer top-down shooter with pixel art graphics. Its free and requires no registration so you can play straight away. Its still in developement, but perfectly playable. It plays a bit like classic shooters like UT or Q3, with the difference of beeing top-down instead of 1st person of course. You run around in an arena, pick up ammo and health kits and shoot enemy players. Currently there are 3 game modes: Deathmatch, Team Deathmatch and CTF and a bunch of maps for each mode. There are also abilities and attributes which you can pick to customize your character. Id love to get some feedback and of course i can answer any questions.
  11. Emesis

    How to do hitboxes?

    We are building a multiplayer top-down shooter deathmatch app. My team's idea is to upload all hits at a given time as x,y coordinates to an array (which is then passed to the server) and then check on each update loop to see if any enemy players were at those same coordinates. We were considering doing the traditional way (with collisions) but we're concerned about latency issues. Any insight about how to handle this? Any resources?
  12. I made a simple multiplayer top-down shooter. Please try to play and give me a feedback. Description. Play against other players. Shoot and kill. Let blown body of your enemies sprinkle this battlefield. Control. Use the arrows on your keyboard to move and the mouse for aiming. Click or hold left mouse button to shoot. How it works. There is phaser.js on the client side. Nodejs, nginx - on the server side. I picked as a connection mechanism.
  13. I recently got the opportunity to develop 2 separate HTML5 games in Phaser for a client training project and wanted to share the results of that here. Please keep in mind that these are intended more as fun, interactive training modules than fully fledged games and the target audience is 40-50yr old tech resellers. Each game is intended to be played through in about 10 minutes by someone who may or may not have experience with games in general. The games are intended to be played on Desktop (Though I added some hacky, last-minute touch support for Game 1: Space Evaders). Game 1: Space Evaders Space Evaders is a topdown, scrolling shoot em up style game. There are 3 "sections" and a boss battle at the end. This uses standard Arcade Physics with some extra polygonal collision detection. I created my own looping "map" system and level editor since it seemed like it fell slightly outside the realm of what Tiled could provide me. Game 1 Link: Game 2: Martian Mayhem Martian Mayhem is a top down game where you collect cargo packages and avoid meteors, robots and falling into pits. Two level sections with the last one ending in a boss battle. It uses P2 physics (mainly for more precise collision detection) with many object bodies acting as sensors/triggers. I used Tiled to generate the levels for this game. Game 2 Link: This was my first experience working with Phaser and I had a great time doing it! Many thanks to the Phaser creators and all the members here for the vast amount of information that exists on these forums!
  14. Hello everyone, I've been working on a little something for a while now (top-down classic rpg) using phaser. For the most part it works quite well, but there is just one thing that I can't seem to get the hang of... Side-on staircases. Forward facing staircases are no problem at all, but the real challenge comes when attempting to create side on stair cases like we see in the image attached. I've made progress enough to get the player sprite to move up and down at a 45 degree angle, and 'almost' so that you aren't able to walk off the edges and only each end. But it's very tacky and feels hacked together, since it's using a simple check of tile properties to determine whether they are a staircase tile or not. When variation comes in to it, the whole thing falls apart, considering all the different types of staircases / entrances or exits you might have. It's particularly challenging since I'm using arcade physics, I was thinking of moving to P2 so I can do a polygon check instead, thus allowing you to only travel 45 degrees while stood on that particular area. Has anyone else come across this problem before? Am I perhaps missing a blatantly obvious answer (aside just not bothering at all)? Many thanks
  15. hello, I am making a game using phaser arcade physics engine. In the game, the player is exactly the size of a tile. The player can move freely in open space. It doesn't have to stop at the center of the tile everytime. This cause a problem. It is really hard to enter a small path of exactly one tile wide, because the player will always collide with the tile even if it is off the center for a little bit. say the tile is 50px wide, the x coordinates of tiles are 0,50, ,150,200. The player wants to enter at x=100. But it is actually entering from x=99. This will cause the player to be stopped. how to ignore the small difference and auto correct the player's position, make it at x=100?
  16. Teun28


    Puzco is an addictive puzzle game where you have to think before doing something. The game starts easy and end up hard. You can play Puzco on your pc, and you can play it on mobile! Controls on desktop: WASD or the arrow buttons to move Shift to select a player. Music is from by mrDMan Download: