Search the Community

Showing results for tags 'phaser'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 3,282 results

  1. Hexone

    Black Screen every time.

    Hello, I have start to use phaser 3, i have setup all the basic things and follow some tutorial, but every time i use phaser 3 on my local or my web server, i have this : The code : My local file : If you can help me ^^ I thinks is just a things i don't get or something.. Thanks you.
  2. Hemanthraj

    how to make number tiles

    How to make number tiles with colors for example: array[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; I need to show into these box
  3. ExcitedBeginner

    Running into trouble making my first game

    Hello! I'm a total beginner (both with this forum, and Phaser), so please forgive me for any mistakes. I am trying to combine two examples I found on the phaser.io website. This one, and this one. I want to pause the game when pressing the 'pause' button. I'm getting the error "Uncaught TypeError: Cannot read property 'onInputUp' of undefined" in the console. I'm using Phaser 3.2.0, and I understand that the examples I found are from an earlier version, so maybe that's why it's not working? Please help! This is my code: var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'game_2', physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var stars; var bombs; var platforms; var cursors; var score = 0; var gameOver = false; var scoreText; var game = new Phaser.Game(config); function preload (){ this.load.image('sky', 'game_2/assets/sky.png'); this.load.image('ground', 'game_2/assets/platform.png'); this.load.image('star', 'game_2/assets/star.png'); this.load.image('bomb', 'game_2/assets/bomb.png'); this.load.spritesheet('dude', 'game_2/assets/dude.png', { frameWidth: 32, frameHeight: 48 }); } 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(); // Here we create the ground. // Scale it to fit the width of the game (the original sprite is 400x32 in size) platforms.create(400, 568, 'ground').setScale(2).refreshBody(); // Now let's create some ledges 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 physics properties. Give the little guy a slight bounce. player.setBounce(0.1); 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(); // Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis stars = this.physics.add.group({ key: 'star', repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); stars.children.iterate(function (child) { // Give each star a slightly different bounce child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8)); }); bombs = this.physics.add.group(); // The score scoreText = this.add.text(16, 16, 'score: 0', { font: '24px Arial', fill: '#fff' }); // Collide the player and the stars with the platforms this.physics.add.collider(player, platforms); this.physics.add.collider(stars, platforms); this.physics.add.collider(bombs, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function this.physics.add.overlap(player, stars, collectStar, null, this); this.physics.add.collider(player, bombs, hitBomb, null, this); /* Code for the pause menu */ var w = 800; var h = 600; // Create a label to use as a button pause_label = this.add.text(w - 100, 20, 'Pause', { font: '24px Arial', fill: '#fff' }); pause_label.inputEnabled = true; pause_label.events.onInputUp.add(function () { // When the pause button is pressed, we pause the game game.paused = true; // Then add the menu menu = game.add.sprite(w/2, h/2, 'menu'); menu.anchor.setTo(0.5, 0.5); // And a label to illustrate which menu item was chosen choiceLabel = game.add.text(w/2, h-150, 'Click outside menu to continue', { font: '30px Arial', fill: '#fff' }); choiceLabel.anchor.setTo(0.5, 0.5); }); // Add a input listener that can help us return from being paused game.input.onDown.add(unpause, self); // And finally the method that handels the pause menu function unpause(event){ // Only act if paused if(game.paused){ // Calculate the corners of the menu var x1 = w/2 - 270/2, x2 = w/2 + 270/2, y1 = h/2 - 180/2, y2 = h/2 + 180/2; // Check if the click was inside the menu if(event.x > x1 && event.x < x2 && event.y > y1 && event.y < y2 ){ // The choicemap is an array that will help us see which item was clicked var choicemap = ['one', 'two', 'three', 'four', 'five', 'six']; // Get menu local coordinates for the click var x = event.x - x1, y = event.y - y1; // Calculate the choice var choice = Math.floor(x / 90) + 3*Math.floor(y / 90); // Display the choice choiceLabel.text = 'You chose menu item: ' + choicemap[choice]; } else{ // Remove the menu and the label menu.destroy(); choiceLabel.destroy(); // Unpause the game game.paused = false; } } } } function update (){ if (gameOver) { return; } 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); } } function collectStar (player, star){ star.disableBody(true, true); // Add and update the score score += 10; scoreText.setText('Score: ' + score); if (stars.countActive(true) === 0) { // A new batch of stars to collect stars.children.iterate(function (child) { child.enableBody(true, child.x, 0, true, true); }); var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400); var bomb = bombs.create(x, 16, 'bomb'); bomb.setBounce(1); bomb.setCollideWorldBounds(true); bomb.setVelocity(Phaser.Math.Between(-200, 200), 20); bomb.allowGravity = false; } } function hitBomb (player, bomb){ this.physics.pause(); player.setTint(0xff0000); player.anims.play('turn'); gameOver = true; }
  4. newbie11

    How to add a text value

    Hi! can anyone tell me how to put some value on my "score" i already use if (playState.score <= 3){ game.add.text(20, 20, "practice more",{font: '50px Sports World', fill: '#b7e2fe'}); but it doenst work var winState = { create: function () { game.add.tileSprite( 0, 0, 1000, 490, "background3") if (playState.score >= loadState.hiscore) { loadState.hiscore = playState.score; } var hiscoreLabel = game.add.text(473, 155, loadState.hiscore, {font: '50px Sports World', fill: '#fdf59e'}); var scoreLabel = game.add.text(473, 243, playState.score, {font: '50px Sports World', fill: '#b7e2fe'});; var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.addOnce (this.restart, this); var escKey = game.input.keyboard.addKey(Phaser.Keyboard.ESC) escKey.onDown.addOnce (this.menus, this); }, restart: function (){ game.state.start('play'); }, menus: function (){ game.state.start('menu'); }, } thats my code pls help me thank you!
  5. altruist

    Issue with physics

    Hello everyone, I have the same problem like in this topic I don't understand how to set P2 Physic mode or solve this problem in other way. Please help.
  6. I'm trying to build a real-time MMO game. I'm using Phaser for FE and Node.js + socket.io for BE. I have read all the tutorials like http://www.gabrielgambetta.com/client-side-prediction-server-reconciliation.html and so on. Different players might have different FPS, this is how I update position on the client (phaser): const data = { down: this.cursors.down.isDown, timestamp: Date.now() }; var deltaTime = (data.timestamp - this.lastTimestamp) / 1000; if (data.down) { player.position.y += speed * deltaTime; socket.emit('input', data); } This ensures speed is FPS independent (every player is moving with the same speed). The server is running a tick() at 60 FPS. This method is processing saved inputs from players. How should the server correct player positions? It doesn't know their delta times. It also can't use server's delta time since it would be always around 0.016 and it doesn't reflect player's update interval. tick() { var now = Date.now(); var serverDelta = (now - this.prevTimestamp) / 1000; this.prevTimestamp = now; for (var player of players) { player.update(); } } player.update() { for (input in savedInputs) { player.y += input.down * speed; } }
  7. Hemanthraj

    how to load custom font

    How to load custom font i need to use daft lowercase font instead of down below, var tiles = this.game.add.bitmapData(this.tileWidth, this.tileHeight); tiles.ctx.font = '30px Arial';
  8. newbie11

    how to loop

    how can i loop my background and make it like it move going to left??? thank you!
  9. BunBunBun

    gunfight.io

    Hi Everyone, GunFight.io - original HTML5 multiplayer game. Select your team Counter-terrorists or Terrorists and have fun! Play Made with: Phaser + NodeJS server framework - custom version of Colyseus scheduled to add: 1) Multi-language support 2) May be bots? 3) Mobile device support. 4) More emotions. Any suggestion and feedback are welcome.
  10. Barak Inbal

    Create Simple Multiplayer

    Hey I want to create a simple Tic Toe Multiplayer Mobile game using phaser 2. The game need to support the following modes: Multiplayer between 2 anonymous players Multiplayer between 2 google account players Multiplayer between 2 facebook account players I have the following questions: How can I implement this? using websockets or pooling? Do I have to use socket.io inroder to implement websocket communication between 2 mobile players? Which other libraries do I can use for creating moblie multiplayers between 2 players? Thanks in advance Barak Inbal
  11. I am developing a game where my player has to look to see forward when I am pressing right arrow key. But how can I make it look reverse after pressing left arrow? I can create a sprite of reverse look but how can load that while pressing left and at the same time forward player should be destroyed?
  12. real2412

    Kid Rat, Game platform clasic

    Hi guys, I share a litle game that I did in my free time the link is the following: https://real2412.github.io/kidrat/ I also converted it into apk with cordova, although it is a version in Spanish and I have no idea how to remove the cordova icon. In case you want to see it look for it in google play as "KidRat". It is open source you can check it in the following link: https://github.com/real2412/real2412.github.io/tree/master/kidrat Greetings.
  13. I'm trying to create platforms for my player to jump onto and also make collectible stars. I can create these sprites using functions, but I don't know how to make physics work on them so that the character can jump on the platforms and overlap with the stars. The problem is that the physics portion doesn't work when I call it in the update function. I am also not using tilesprites, so it can't work that way. create: function() { addStar(star1); }, update: function() { removeStar(star1); } addStar(name) { name = game.add.sprite(1700, 550, 'star'); name.anchor.setTo(0.5, 0.5); this.game.physics.enable(name, Phaser.Physics.ARCADE); name.body.collideWorldBounds = false; name.enableBody = true; name.body.immovable = true; } removeStar(name) { if (game.physics.arcade.overlap(character, name) == true) { name.destroy(); updateScore(); } }
  14. maninduw

    Using Phaser for FB Instant Games

    Hi, I am planning to develop a game for Facebook Instant Games platform using Phaser. Should I choose Phaser 3? or should I continue with Phaser 2 ? Is there a huge difference in the APIs of both version? . I would highly appreciate your opinion on this. Best Regards
  15. Does anyone know how to pass data into the game scene in Phaser 3 as you could do in Phaser 2 when started a state? game.state.start('Game', true, true, { data: 'this is some initial config' }); Phaser 3 Scene was Phaser 2 State, which you could provide parameters, the 2-3rd was as i remember caching, the 4th could be and data, which became available in the State's init() {} method as init({data}). In Phaser 3 a Scene has a second, data param, but it is not clear how it is used, the init method is not getting it, and the documentation is not ready for that as far as i know.
  16. Hemanthraj

    how to make bingo game using phaser

    Hello everyone Im new to phaser, i need to make bingo game So please share your knowledge.
  17. As the opportunity to submit an HTML5 game to instant games is open now, I want to convert some of my most interesting HTML5 games to be played in messener. Facebook published a very good sample, I wonder, is there Phaser 3 or Phaser 2 specific instant game sample?
  18. Play Link: Pixel Memory Find all card pairs, level your profile & unlock new cards in this “Memory” classic optimized for mobile! Play Link: Pixel Memory Welcome to the "Memory" classic, expanded with new features & optimized for mobile! Game Features: Play the “Memory” classic in this mobile game. 3 Difficulties: Easy, Medium & Hard. Level up your profile & unlock more cards. Browse your collection to see which cards you’ve already unlocked. 4 card deck skins: Choose the one you like best! View your profile for your game stats & best scores in all difficulties. Gameplay: Find all the matching card pairs on the table. Find them before you run out of guesses. Unlock all the card packages in the game. Controls: The whole game requires only click inputs and is perfectly optimized for mobile! Credits: The game was developed solely by me. All assets in this game were either done by me or from the CC0 assets linked below. These sources are also credited inside the game: Play Button Name: Cartoon Mobile Rounded Icon Buttons Author: Nathan "GDquest" Lovato, https://opengameart.org/users/gdquest, http://gdquest.com/ URL: https://opengameart.org/content/cartoon-mobile-rounded-icon-buttons Explosion Sprite: Name: 2D Explosion Animations #2 | Frame by frame Author: Sinestesia, https://opengameart.org/users/sinestesia, http://www.sinestesiastudio.com/ URL: https://opengameart.org/content/2d-explosion-animations-2-frame-by-frame http://bit.ly/2C6Bi8b Audio: http://www.freesfx.co.uk/sfx/ Play Link: Pixel Memory
  19. Thomas Hunter II

    Cobalt Dungeon

    Hey there! I recently released a mobile game called Cobalt Dungeon. This game is based on Phaser 2 and uses a fullscreen canvas and basically only touches the DOM during initialization. The application itself is wrapped in Cordova 8 and runs on iPhone and Android. It's currently available for both platforms in their respective stores: Cobalt Dungeon for iOS on the App Store Cobalt Dungeon for Android on the Play Store The game took me four months to create, from start to finish. I had created games before using HTML5 / canvas, and had released one before on the app stores (I later open-sourced it as Mobile Game Skeleton, if you're curious), so the process was familiar. This game is very Indie, like most of the games on this forum, with me being the only dedicated contributor. I made the music and sound effects, sourced /remixed existing graphics, etc. One thing that might make this game a little special is that 99% of the development was done on Linux, almost entirely using open source tools, though I do have a Macbook Air I use solely for iOS builds and I did use FL Studio for music. I'd like to talk a bit about the process I went through, hopefully someone else will find it useful as well! I have been producing a series of game development videos recently and will make a high-level one soon based on this post! I also have a blog with hundreds of development posts, if you are into the whole reading thing. Development Workflow Almost all of the day-to-day game development, e.g. the actual core gameplay of moving around the dungeon and attacking enemies and picking up items, is designed and debugged using the responsive view of the web debugger in Google Chrome. Personally I prefer Firefox for web browsing but there's no beating Chrome when it comes to dev tooling. This tool is great because once you tell it to pretend to be a particular device (e.g. an Android Nexus 5x or an iPhone 6s) it'll do everything from setting the user-agent to reconfiguring the pointer to send touch events. Being able to interact, alter game state, and read console messages in real time is a total must. Very little on-device development happened for the first three months (mostly occasional performance testing). Of course, testing locally is fine for a while, but you definitely do need to test on a real device. My daily driver is a Nexus 5x which is a little over 2 years old. I used this device for most of my testing. I figure the average phone is about as powerful as this one so I would constantly make sure the game ran at 60 FPS on this device. My other test device is an iPhone 5. This phone is like 5 years old, so it's mostly safe to say that any game that'll run on this phone will run on any modern iOS device. (One caveat is the new iPhone X notch, which I still need to fix. Resolution differences are also important to consider) You may find weird edge cases which only present themselves when your game runs on a physical device. A common example is related to touch inputs. When debugging these issues you can actually use a Chrome feature called Remote Debugging, which will allow you to use Chrome installed on your computer to interact with Chrome on your Android device (I'm not sure if such a feature exists with iOS Safari, but I didn't need such a feature). Normally Chrome will even show duplicate the view of the phone on your computer screen but it doesn't seem to work with Canvas. Artwork/Aesthetics The game uses 16x16 tiles and a palette of 24 colors. If you find yourself making a pixel art game, you must pick a palette and adhere to it! I found that having such a restriction really helped with creativity, as well as getting an overall cohesive feel. The basic terrain is based on free artwork I found on OpenGameArt.org. That website is amazing for getting assets and I highly recommend you check it out (here's a bunch of music I contributed if you're into that). The players / enemies are based on another art pack which I purchased a license for (around $30 at the time, I think). I would then touch up this artwork to get everything following the same palette. I would also have to stitch the graphics together to build spritesheets and get animations going. Any time I would create new artwork I then do my best to fir the same art style. For example, the first boss Shroomzilla I put togehter. It uses the same color palette, though the visual style is definitely more complex than the simpler graphics used throughout the rest of the game. The graphics for the Ice, Moss, and Fire worlds are altered from the base terrain, but still follow the same palette. The main menu graphic of a stairway going into the dungeon is also something I had to draw based on googled reference material (also with the same palette). The graphics I use do use 1x1 pixels in their source PNG files, despite being rendered on device as some arbitrary pixel size, e.g. 6x7. I do the stretching by dynamically scaling the viewport when the game first loads (I'll make a video explaining this process at some point). This is cool because it's impossible for me to address a sub pixel. You'll see this issue in a lot of pixel-art games where there's partial pixel overlap. Rendering on Android is done with Web GL, and on iOS with software. This was necessary to get the viewport scaling to work, prevent blurry pixels on iOS, and prevent slow performance. E.g., scaling the viewport when rendering Web GL on iOS is very slow and blurry and slow, and works perfectly on Android. Music/Sound Effects The audio was all custom made for this game, both the sound effects (SFX) and the background music (BGM), though the process for making both is very different. SFX: The Sound Effects were mostly made using the wonderful as3sfxr tool. This tool, despite being super old and written in Flash, is one of the best (if not the best) tools for making 8-bit (-esque?) sound effects. The workflow I use is to first figure out what part of the game needs a sound effect, then click the category which sounds most similar, and then start randomizing the sound until it sounds similar to what I'm looking for. If a randomization goes in the wrong direction then undo and try again. Once a sound is pretty I then modify individual parameters until it sounds correct. Once it's done I generate a WAV file and load it into FL Studio. The goal with FL Studio is to create a single MP3 file with all the sound effects, e.g. the first at 0 seconds, the next at 3 seconds, etc. Once this is done I specify the sound locations using JSON. Unfortunately I kept having issues with Phaser's audio library so I chose to use a library called Howler to play the audio. The code for using Howler looks something like this: const TIME = 2999; const SFX = { damage: [0, TIME], explode: [3000, TIME], door: [6000, TIME], wait: [9000, TIME], upgrade: [12000, TIME], }; const sfx = new Howl({ src: './audio/sfx.mp3', sprite: SFX, autoplay: false, volume: 1.0, onload: finishPhaserPreloading }); sfx.play('damage'); BGM: The music was entirely composed using FL Studio (overview video, some notes on how I made the music). One of my goals was for the game to feel familiar to the generation of 8-bit / 16-bit gamers. However, making actual 8-bit / chiptune music was not a requirement by any means. So what I chose to do was keep every song simple; most have only 2 or 3 instruments. With the exception of percussion/drums, the music is entirely synthesized. Whenever possible I would use simple waveforms and simple filters (e.g. for the ice levels the lead is a sine-wave with a touch of delay and reverb). Sometimes I would use more complex instruments, like the string instruments in the main menu / fire levels. With the exception of the main menu music, each song follows the same structure, which you can download as an FLP file here. The tempo does change which is why the songs are of different lengths. Overall I like the way the music turned out. I frequently listen to it while commuting. There's a few things that annoy me, like the bridge in the ice music or the repetitiveness of the moss/jungle music, but overall it's not too bad. The music is the largest part of the application, consuming about 18MB of the overall ~24MB binary. Since most people are listening to it via crummy mobile phone speakers I've compressed the audio at 96kbps in the game (higher bitrates are available for download on my Patreon). Libraries / Code As I mentioned, this game is built using Phaser 2 (I might upgrade to Phaser 3 soon, now that the children/group feature is being added), as well as the Howler library. Code is written in mostly ES2015 syntax. I use Browserify to combine my code, traversing import/export statements. Once browserify is done I then pipe the output through Google Closure Compiler to get a single JavaScript file without any comments or whitespace, and being minified as much as possible (e.g. dead code paths are removed). I don't, however, run any of the libraries through closure compiler. So in my final HTML file I'm loading four libraries: phaser.js, howler.js, cordova.js, and my games bundle.js. Many people seem to enjoy many weeks configuring webpack and getting bleeding-edge versions of the language transpiling but I try to avoid that as much as possible. The game is wrapped in Cordova 8. This requires a whole bunch of JDK and Java build tooling be installed, as well as Xcode on my Macbook. Configuring all that tooling is a nightmare! I also make use of the following four Cordova plugins: <plugin name="cordova-plugin-vibration" spec="^3.0.1" /> <plugin name="cordova-plugin-media" spec="^5.0.2" /> <plugin name="cordova-plugin-admobpro" spec="^2.31.1" /> Vibration is required to get vibration working on iOS (it's not required for Android, it just works out of the box). The media plugin is interesting. At first I would play all the music using Howler. This means the browser itself load the audio into memory. Unfortunately I found that the browser is incapable of destroying the music, even when the appropriate methods are called to unload the audio! Using the Cordova media plugin is necessary if you want to be able to play more than a few songs and not have a mobile browser segfault without a stacktrace in sight. The admobpro plugin is used display ads in the game. Unfortunately the author skims a few percent of your proceeds off the top unless you buy a license. I'm also trying to use an IAP module but am currently having compatibility issues with that and Cordova 8. Now that the game has released I'll try to get the plugin working as I'd like to offer players the ability to give me $2 and to have ads disabled (ads also hurt performance). I do load two JavaScript libraries installed via NPM into the compiled bundle.js by way of Browserify. These are two libraries I also made and open-sourced. Neither has any dependencies so that the output bundle is as straight-forward as possible. The first one is roguelike. This library has a ton of features! All the level and room generation is done using this library. I also use it for a lot of math / random / dice roll calculations as well. The second library is autotile. I use it for taking a 2D array of booleans (representing if the ground is a floor or a hole) and converting it into a format to represent the actual spritesheet offsets. This is very handy so that you don't need to perform the calculations yourself. This allows me to represent a floor using a simple array of booleans instead of tightly coupling it with spritesheet offsets. Tools As I mentioned, I use FL Studio to do the audio work. I bought the Producer version for $200 and have been really happy with it. Since I'm running on Linux that means I need to wrap it in Wine. This experience is a little iffy, e.g. if I attempt to scroll anywhere in the UI the app completely freaks out. Other than that it's been a pretty solid experience, especially since my songs only have a few instruments. For most music, however, this won't be true. The more instruments and effects running, the higher the CPU cost. Running FL Studio directly on Windows will be much more efficient than with Wine and Linux. There are of course free alternatives, especially native Linux tools, but I had used it years ago and was comfortable with it. All coding was done using VIM. Once you get used to those keybindings you'll be trapped using this editor forever. While most of the rooms are procedurally generated, I did want to create a bunch by hand. For example, all of the tutorials and challenges are done by hand. For those I used a tool called Tiled. (At first I hand-generated JSON. This would never scale and prevented creativity). Tiled allows me to edit a visual map, with different layers, using the actual spritesheets used in my game. Tiled will output an XML file format which can even be imported into Phaser! However, passing around a file format representing rooms which is so tightly coupled to the graphics is not a route I wanted to take. So I wrote a converter tool to convert the XML files created by Tiled into a very simple JSON representation which contains only exactly what I need to represent a level. As an example, enemies can be represented as an array of objects with an X/Y coordinate, an Enemy ID, and their Phase. The Tiled representation would contain lookup information for the enemies coordinate in the spritesheet, the layer then graphic is on, and wouldn't have the metadata I need. Here's a video of my Tiled workflow if you'd like a better idea of how I make rooms. For creating the Bitmap font format used by Phaser I used a tool called BM Font. This allows me to take a TTF font and create the XML/PNG files needed for rendering on the web. The process for doing this can be super complex so I even made a video on font conversion for Phaser. Graphic editing was done using GIMP, a free image editing app originally made for Linux but is available for all platforms. Coming from a Photoshop background it can take a while to get used to the keyboard shortcuts and the weird choices GIMP made (e.g. layers have different dimensions, what's up with that?!) I created a palette using the 24 game colors and that really helped my efficiency. I also tweaked the UI to be in single window mode (ala Photoshop) and also reconfigured the tools (mostly disabling anti-aliasing, enabling a 16x16 grid). Once you dig through the menus it's possible to save the tool configuration permanently, which really helps with efficiency. Hardware I did the drawing of the main menu graphic using an old Wacom Tablet bamboo, it's older but probably cost $100. The music was made using an Akai MPK Mini (two octave MIDI controller), also for $100. Neither of these tools were required to produce this game, but they sure make it a fun process. All development was done using a Lenovo Thinkpad Carbon X1 5th generation, by far the best laptop I've ever owned! Worth the $1600 price tag. Live Ops Once a game is live you don't want to have to release a new version of the app for every little update. This is when having a CMS is really helpful. I built a Node-based CMS specifically for game development called Grille. My workflow for this is that I edit a Google Sheet, change values (for example enemy attributes, shop costs, game text, etc). Once I'm satisfied with the result I use Grille to generate a JSON file which I can upload to a CDN. Of course, it's useful to know what in the game actually needs changing! For example, do most players get to level 7 and then stop playing because they get killed by a Mage and get frustrated? For that I use a service called Mixpanel. Throughout the codebase I make analytic calls with useful data. For example, when a player dies, goes to a new floor, buys a shop item, views and ad, etc. I can then use the Mixpanel UI to view a "funnel" of users as they progress through the game. [Attached is a screenshot from Mixpanel showing the level progression funnel] Monetization I make money with ads thanks to Admob. There are two types of ads; the first one is an ad shown when the player switches between rooms. This ad is displayed at most once every five minutes. The second ad is an ad the player can choose to view. When the player dies they can choose to view an ad to respawn in the room they died in. Otherwise they can choose to respawn at an older save point. Let me know if you have any other questions about the development process, or if you'd like me to produce a video explaining any of these topics. Thanks!
  20. MrBalling

    Mr. Balling

    Hi Everyone, I just released a game made with Phaser 2 called Mr. Balling. Used cordova to deploy it to Android and iOS. It is a simple arcade game that is supposed to be a throwback/retro arcade game. You bounce around on the screen and when you hit a ball you orbit it, once you tap on the screen you fly off. The objective is to stay alive in the middle of the screen bouncing from ball to ball, while avoiding red balls and the left and right sides of the screen. Feel free to leave feedback or thoughts about the game, I'm new to game development, but hope to keep doing it. Apple iOS App Store: https://itunes.apple.com/us/app/mr-balling/id1351628591?ls=1&mt=8 Android Google Play Store: https://play.google.com/store/apps/details?id=com.ogradybj.mrballing More info on the game. I came up with this idea about 10 years ago and had actually made working copies in python a few times, using pygame and kivy, but once I got into phaser I fell in love, it was super easy to get stuff working right away. As mentioned I packaged it up with cordova. I'm a Mechanical Engineer, not a software engineer, so sites like this were instrumental in figuring out how to get phaser to do what I wanted it to do. I used Piskelapp to do all of the assets. I used beepbox to make the music. It was fun having do figure out everything that goes into releasing something like this. Obviously as you can see it is a pretty simple premise for a game. However, I plan to make a sequel extending the game mechanic more. Also tried to make a pseudo dev-log, still under construction, but you can find more info at www.mrballing.com Screenshots of the game, title screen and several screenshots during the game as well as gameover screen. I did high score tracking using firebase.
  21. Balamurugan

    Create Roulette game

    This is the Demp - http://showcase.codethislab.com/games/roulette/ Hai, Am a beginner for phaser, i want to create a phaser roulette game. it is possible to create game like us. (physics, animation, tween) These option are there in phaser. but still i don't know where to begin this game. which one is best. Please share your instruction, I need lots of instruction, for spin wheel like demo. Please share your knowledge. Thanks lot..
  22. Loonride

    Coding Slither.io in One Week

    Check out my new video about my one week Slither.io project with JavaScript and Phaser!
  23. I had a problem, wanted to ask for help here, solved it and thought to post it here for future reference and help others. I found this solution through trial and error while browsing older topics on the subject on html5gamedevs (thanks to all the guys who posted them) and some other sources. PROBLEM: How to load a custom font in Phaser without using bitmap fonts and how to make it display Cyrillic, Turkish, French and other "non-english languages". SOLUTION: 1)Create the required folders. I'm using an Assets folder next to index.html and that's where everything should be. Create a Css folder and a Fonts folder inside Assets folder (Assets/Css and Assets/Fonts). 2)Create a css file inside the Css folder called "fontLoader.css" and use the following settings (obviously use your preferred font and name it accordingly but be careful at the url path - it's one of the reasons I struggled to get it working in the first place) @font-face { font-family: "peace_sans"; font-style: normal; font-weight: 400; src: url("../Fonts/peace_sans.otf"); } 3)Place your .ttf or .otf font inside the Fonts folder. Make sure the name from the code above coresponds to the name of the font. In my case I've put the file peace_sans.otf inside the Fonts folder. 4)Open the index.html file inside your favourite text editor and add a link rel line pointing to your css file <!DOCTYPE html> <html> <head> <link rel="stylesheet" type = "text/css" href = "Assets/Css/fontLoader.css"> <title>My Game</title> <script type="text/javascript" src = "Assets/Scripts/phaser.js"></script> <script type="text/javascript" src = "Assets/Scripts/boot.js"></script> <script type="text/javascript" src = "Assets/Scripts/play.js"></script> </head> <body> </body> </html> 5)Now you're all set but if you try using the font in your game it won't work because it will have to be preloaded in some way. There are 2 well known hacks - first it's to create an html element using the custom font and put it somewhere out of sight. I do prefer the second approach because it involves less html/css tinkering. Here it is (thanks html5gamedevs user who's name I cant remember): Add text in in a game state that happens before your play game state - in my case I've used the boot game state. Notice the line containing this.game.add.text - it creates a 1px text using the custom font I need and it doesn't matter because it won't be visible and the boot phase it's very quick anyway: var bootGame = function(game){}; bootGame.prototype.create = function(){ console.log("Booting game"); game.physics.startSystem(Phaser.Physics.ARCADE); game.state.start("loadGame"); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // game.world.setBounds(0, -651, 900, 1131); game.stage.backgroundColor = "#007f5f"; //fps game.time.advancedTiming = true; //HACK TO PRELOAD A CUSTOM FONT this.game.add.text(0, 0, "hack", {font:"1px peace_sans", fill:"#FFFFFF"}); } bootGame.prototype.preload = function(){ } Now I can simply call in my play game state the following and it will work using my custom font: var style = {font: "55px peace_sans", fill: "#eeeeee"}; this.game.add.text(0,0,"My Custom Font Works", style); 6)Now the final issue - displaying characters that are not english - like cyrillic, turkish etc. First you'll have to check if the font supports them - you can see this from the website where you download it (Font Squirrel has a nice feature to search fonts by supported languages) - in my case Peace Sans (the custom font I'm using) supports russian. Let's try and change the text to "игра" - which means game in russian. var style = {font: "55px peace_sans", fill: "#eeeeee"}; this.game.add.text(0,0,"игра", style); But the text will show some mumbo jumbo characters like this: Why oh why? You won't believe it but it's because of the encoding of the .js file where you're calling your code from. On my system changing the encoding of the .js file to Unicode will display the russian text correctly There are a couple of ways to do this. First you can simply open the .js file in Notepad (yup, the good old windows notepad) and Save As - then choose an encoding from the encoding drop down menu - Unicode in my case. In case you're wondering why is it grey it's because I'm using a custom Windows Theme. The second way it's addressed specifically to Sublime Text 3 users. So sublime text will save text files by default in UTF8 which will display bad characters. To correct this you'll have to choose File > Save with Encoding > UTF 16 LE with BOM - it's the one that works and displays characters correctly.
  24. NicoA

    [WIP] Bugs with GUNS

    Hello! I want to show the first 5 lvls of my second phaser game (v2.6.2), here is a picture of it: And the link: https://sumonbugs.herokuapp.com/ It work in PC and cell phones. It is a little laggy in some android devices. I will be great if you can test it and tell my what you think. Thanks!
  25. Hello all, My name is Alexander and I am a professional HTML5 game developer from St Petersburg.I'd like to present you my new HTML5 game HyperDiver: https://playerburg.com/games/hyperdiver/ It is a dungeon crawler game in a minesweeper style with role-playing elements (collect loot and upgrades system) in a space setting. The game is also available on Google Play, in popular Russian social network and on some online games portals. The game was developed with Phaser framework. Server side was implemented as REST API with PHP+MySQL: leaderboards, ratings, registration, authorization There are lots of game-design ideas still not implemented because of the lack of resources. And I learned a lot while working on this project. I've improved my skills as a game-designer and as a programmer also. There were lots of difficulties in the working process and the current minimalistic and simple version means that more than 50% of the implemented features were removed at all. I'm novice in a game marketing and I don't exactly know how to promote my game so I don't monetize it now. If you are publisher and you think that this game has future, I will be glad if you help me to publish and promote it together as partners. I can modify the game in accordance with your request: add more features or implement any possible API. Making a game even so simple like mine is a great journey and I wish everybody to have this kind of experience! Good luck to all! Regards, Alexander