Search the Community

Showing results for tags 'phaser'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 3,283 results

  1. 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 - 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; //, -651, 900, 1131); game.stage.backgroundColor = "#007f5f"; //fps game.time.advancedTiming = true; //HACK TO PRELOAD A CUSTOM FONT, 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"};,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"};,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.
  2. 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: 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!
  3. 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: 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
  4. Am using phaser 3 es6. i don't know how to use smartfox server api. How to import sfs api. Please share your knowledge. Thank you..
  5. rhysperry111

    Destroying characters

    I have a game and am trying to destroy a character. When I use it just says
  6. Amberalex

    Fire weapon via loop

    Hello. I am using phaser weapon plugin and want fire in forEach loop: var weapon = game.add.weapon(10, 'bullet'); enemies.forEachAlive(function(enemy){ if( == 'p1'){ player.rotation = game.physics.arcade.angleBetween(player, ednemy); weapon.fireAtSprite(enemy); } }); If I have 5 enemies in a row, and only 3 if them have name = p1, after executing this code, player sprite is rotate to the last enemy, but there is only one bullet. What can I do here?
  7. Amberalex

    Set bullet property

    Hello. I am using function and I want to set special property for bullet, that apear after calling this function. I tried to use forEach: weapon.bullets.forEach(function(bullet){ if( == undefined){ bullet.taget = 'prop1'; return; } });; but this does not work.
  8. I started working on game, which I would like to publish on Android and ios market. How I can set resolution or scale game to most popular devices? I found on google that the most popular resolution is (480, 320) var game = new Phaser.Game(480, 320, Phaser.CANVAS); I test my game (sample asstes) on Asus Zenphone GO (resolution: 720 x 1280 pixels) and this is how it looks (white space on top and sides). How developers scale their games to fit all phones?
  9. I've used a Tiled Map with my project before and it worked perfect, however the second map I made has a black bar on the right and top. I can move into the black space but the Camera will not allow me to move left off screen. My canvas is set to this resoltuion var game = new Phaser.Game(640, 480, null, 'gameDiv'); This is how I load my assets preload: function() { game.stage.backgroundColor = '#000000'; game.load.tilemap('level0', 'assets/map/Level0.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles0', 'assets/map/[TILESET]Dirt-City.png'); } This is the code in my play.js create function. create: function () { var map = game.add.tilemap('level0'); map.addTilesetImage('[TILESET]Country', 'tiles0'); this.layer = map.createLayer('Tile Layer 1');, 0, 640, 4800); this.player = new Player(300, 4700); } My camera updates it's location based on that of the player like so player.update = function() { = this.x - 150; = this.y - 300; } I have been trying to figure out this problem for quite some time, any help is greatly appreciated. Thank you.
  10. Del Piero

    Learn: Phaser 2 or Phaser 3?

    Hi guys! I need some help. I want to begin to learn phaser , but I don't know if I study the 2 or 3 version , I'm completely newbie. sorry for question.
  11. luisb

    Phaser 2.10 game responsive

    Hello everyone, I have been trying different solutions to make my game full responsive, without success, the solutions I found are very old and not with the new versions of Phaser CE. Please, I need help with this urgently. Can someone tell me how to make full responsive my game both at the beginning and when the resolution changes? I work with angular 5 like container and Phaser CE 2.10.....
  12. whalleyrulz

    Resize method not firing? At all?

    Hey, I'm kind of stuck trying to work out what's happening with my game. I've been having issues getting my game responsive, so I tried... well, everything I can think of, really. I've brought my game all the way down to four near-empty files; boot.js, preload.js, menu.js and app.js, and I'm getting nothing on resize events. I'm using Phaser 2.6.2, I've got "this.scale.setMode = Phaser.ScaleManager.RESIZE" in my boot.js's init function, I've got a resize handler in my menu just titled 'resize' with nothing but "console.log('resize')" inside of it, and nothing happens on resize. I don't understand at all. I found a guide someone put together that has really similar architecture to my project ( and even looking at that person's game.js in dev tools and comparing against my game, I can't see how we differ (outside of me keeping my various methods in separate files) or how I've screwed up. Resize just plain doesn't fire on my project, even when it's as simple as logging something to console. Note: I'm able to get other things to log to console just fine, it's just that the resize method doesn't do what it's supposed to do. I'd like to be able to show the whole code for my project if possible, but I fully understand why that's not - if it helps, I can stick all my barebones stuff into a single file and huck it up on jsbin or something similar. Still - does anyone have any clue where I could start looking as to why setting my ScaleManager to RESIZE doesn't fire my resize command?
  13. newbie11

    problem about my html game

    Good day! Hi sir! i know its a bit weird messaging you directly but i really seeking for some help about the game that i create i am new to this kind of thing so i really need your help. The problem is my game didnt run when i add a sequence like boot>preload>game>end, but before it is running completely fine but only does is the game like when you run it it directs to the game so i thought off adding those states. I know it is not that kind of serious like the others but i really need your help Thank you! ps : my grammar and english is not that good bec im from ph hehe.. index.html phaser.min.js boot.js game.js load.js menu.js play.js win.js
  14. This is my first Phaser game. I have used Phaser with Cordova to build it for Android. Find the link to Playstore below: Can share some code if anyone needs some help with their game development.
  15. Marcelo Lv Cabral

    Phaser sprite sheets unpacker

    I'm porting a game developed using Phaser to Roku (streaming box) and I needed to change some of the sprite sheets, so I got TexturePacker but was surprised that it does not have an option to read the json file and split back the sheet into all the separate frames. Then I decided to create a quick app to do that, get the json and the png and unpack the frames png files into a folder. It was very useful to me so I decided to open it to the community:
  16. hcakar

    fullScreenScaleMode on IOS

    Hello Everyone, I'm currently using Phaser and first of all Thanks for all developers for Phaser. I've got a problem and wanna share with you guys. I wrote a game and using ScaleManager for full screen. var playScreen = function(game){}; playScreen.prototype = { init: function(){ game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.state.start('TitleScreen'); }, create: function(){ game.add.image(1830, 16, 'fullScreenExit'); this.fullScreenButton = game.add.button(1830, 16, 'fullScreen', changeFullScreen, this); } } function changeFullScreen(){ if(game.scale.isFullScreen == false){ this.fullScreenButton.alpha = 0; game.scale.startFullScreen(false); } else { game.scale.stopFullScreen(); this.fullScreenButton.alpha = 1; } } This works fine on desktop and android but however on IOS it's not working. Please let me know if you have any advance. Thanks.
  17. Thunderfist

    I can't find the bugs in my code

    I have a problem: I'm making an RPG and it's not working. I just keep getting a green bar on a white screen. I have multiple .js files, and I can't figure out which file might be it.
  18. onlycape

    Flappy Tours (my first game)

    Hi all, This is my first html5 game and my first contact with Phaser (2.10) and javascript, and I must say that this framework has left me pleasantly surprised. I'm a hobbyist with some experience in libgdx(java) and monogame(c#). Screenshots: Desciption: Simple endless game based on the original Flappy Bird. We must prevent the bird from colliding with obstacles. I know it is not the most original, but it is a simple way to quickly test the possibilities of Phaser. Link: Flappy Tours Target platform: The game is designed to play in portrait mode on a mobile with an aspect ratio equal to or narrower than a 3: 4. Of course, the game is playable in desktop browser. Credits: -Bird (duck) designed by Source: . License: OGA-BY-3.0 . -Music "Pleasant Creek" by Matthew Pablo . Source: License: CC-BY-3.0. - Everything else by me. Notes: At least in this case and after some compatibility and performance issues, I take the following options (I'm newbie, I have probably done some things wrong ): - Do not use webgl. Still supporting webgl, some browsers have a low performance with WebGl. - Disable sounds when webAudio is not available. - Make the UI in the DOM. - I just found a little problem with phaser. When I turn 180 degrees a sprite using "sprite.scale.y = -1" the bottom and top properties of the sprite change (anchor is set to the center). This forum has helped me a lot in the development of the game when I was stuck with some problem. I hope to be able to return the help received. Best Regards and thanks for your time.
  19. Hi erveryone ! I'm trying to make some notes appearing when the music hits a certain time in Phaser, but when I log the "hit times" in the console, it only show up sometimes. I have an object of "notes", the key being the time I expect the note to show : { 1371: { jam: 1, duration: 0.40 } } But, in the update loop, if I do something like this : update () { if (music && music.currentTime) { if (notes[music.currentTime]) { console.log('notes[music.currentTime].jam', notes[music.currentTime].jam) } } } It logs only some of the notes, randomly. Even something like this : if (music && music.currentTime) { var time = Math.floor(music.currentTime) if (time === 1371) { console.log('time', time) } } never trigger the log Do you have any idea why ?
  20. Play Cool Math

    Math Tower of Hanoi

    Based on this classic puzzle, we created a game called Math Tower of Hanoi. The game contains of 18 levels - from simple ones to complex ones. The smallest disk has number 1 on it, the next disk is larger and has number 2 and so on up to the largest disk that has number 8, accordingly. The main goal of this game is to move the disks so that the amount of the digits on all the disks in the bars would match the target. The fewer steps you make during the game, the more points you will get for the puzzle. You are allowed to move only one disk at a time. You cannot put a larger disk on a smaller one. You will get other math tasks between the levels. Play and improve your skills in mental counting. Online Version Android Version iOS Version
  21. ST4H

    Please help ;__;

    Please, can someone tell me how to import framework Phaser3 or other framework to Ionic? (for reference, i want to use phaser only) When i simply run html file in browser it works, but in ionic lab i can see white screen
  22. brainbass

    Firefox Slow FPS

    Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you
  23. Hemanthraj

    Phaser Code standard

    Hi Iam new to phaser development i need the code standard please help me.
  24. Hello, i am new to using Phaser, and i would love to know if i am able to use DOM elements within my Phaser stage (canvas). I have a div which is styled to look like a ball and i would like to use this ball in the phaser game to physicly bounce on any of the ledges i will define in the future. My question: can i use this DOM element to do so? Or should i use a sprite/image? Because whenever the ball hits any of the ledges, i want it to change color. (I know this is possible with sprites and sprite recoloring) Greetings, Regentix
  25. I have 2 files as below: file 1- var deck = 0; var game = { fun: function() { statements; } } file 2 - var game1 = { I need to call file 1function. I dont know how to call. } i am beginner for phaser 3. i dont know how to call..