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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 2,969 results

  1. I'm trying to make game resize appropriately to size of the window/screen. Everything's working out great, except for the tilemap. It seems like the rendering bounds are not updated. (typescript) onResize() {; var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3;, newHeight); = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size?, newHeight); for (var i = 0; i < this.tilemap.layer.length; i++) { this.tilemap.layer[i].width = newWidth; this.tilemap.layer[i].resizeFrame(this.tilemap, newWidth, newHeight); this.tilemap.layer[i].crop(new Phaser.Rectangle(0, 0, newWidth, newHeight), false); this.tilemap.layer[i].updateCrop(); }, Phaser.Camera.FOLLOW_TOPDOWN, 0.8, 0.8); } As you can see I've tried everything, I would've expected resizeFrame or crop to do something, but unfortunately they don't. Do note that the rest of the game updates the size correctly, as the fish get rendered in the widened area just fine. Any ideas how to update the tilemap to the new size? Thanks!
  2. Remove tile for collect coins

    Hello I want to collect coins in my platformer game, so i need to remove coin tile when my player overpap it. So, in create function i add this map.setTileIndexCallback(50, this.collectCoin, this); And create new collectCoin method map.putTile(-1, layer.getTileX(player.x), layer.getTileY(player.y)); score += 10; And thats work, but the number of points is accumulated too much, when the player is standing next to the coin itself, it does not disappear, and points are scored at a high speed I try to use new TilemapLayer , but its causes an error alpha = 0 now work or I am doing something wrong
  3. Garo Android App

    Garo is an addictive free indie game for Android devices. Garo is Make with Phaser Framework and Build with Cordova for Android Devices. The Game is Released and Published for free over Google PlayStore -> or over Try to collect as many coins as possible in 3 minutes. They have to pay attention to different points in order not to lose the game. Fog, airplanes and the time are only a few points that await you as a challenge. You need skill for the game and strong nerves! Feedback?
  4. Phaser poor performance on mobile

    Hi guys! So I am trying to create a mobile racing game in Phaser. But the game has really poor performance on mobile. I tried to reduce a lot of things in the game and test if I get a better performance, but so far no success. What I have so far after reducing everything to absolute minimum is a sprite of a car (79x160 png image), a sprite for the background (100150 png) and in the update function I only scroll the background adding to the background y some value to move it down. I am running the game in CANVAS mode. Any thoughts what might be happening, or any tips or tricks that will improve the performance? Thanks!
  5. Hi, I have a problem with a phaser android game, build with Phonegap, in the android 4.4.2 version, the canvas is showed in the middle of the phone screen, showing the rest of the screen in black. You can move this canvas to position 0,0 after the screen is showed. In other android versions this does not happen. The game is shown in landscape mode, but in portrait mode the same thing happens. I add a screenshot of the game to show this problem. I appreciate any help. The android game is published in Thanks in advance. Greetings.
  6. So I'm getting these weird collision glitches, where I get knocked back randomly. This only seems to happen when I set my sprite's body's width to 8, as opposed to the sprite's width of 16. I'm using Arcade physics, if that makes a difference.
  7. [Phaser] Football juggle

    Hello! I'd like to introduce you my first game made with Phaser - "Football juggle" The game is simple simulator of football freestyle juggling tricks Player should make different juggling tricks to draw a crowd and impress them. Advanced tricks gather more people and gives the player more applause points. Tap or click under the ball to kick it, closer click will kick the ball harder. Web version can be found here And there is an android version I would appreciate it if you provide me with the feedback, focused on the following areas: - Did you get any bugs, especially with scaling behavior? - Are controls clear? Does introduction training in the game help? - Is gameplay dull? Is it monotonous? - What could you advice to enhance the game experience? A couple of screenshots A short gameplay video The game is optimized for mobile browsers
  8. Maze generator

    Hello, ok here's my request, I am trying to create a minigame like in "The legend of zelda: phantom hourglass" multiplayer game one of the difference with this gameplay is that it will be a multidevice mobile version, another difference is that the level will be randomly generated. I have found a maze generator here: therefor i have a few questions: -how could i use this to create multiple paths like showed on this picture? -Am i able to export a phaser game to an android app with cordova? -Is is possible to put a hitbox on the randomly generated walls on the canvas and if so how? Thanks for reading this post and hopefully i'll find a solution thanks to you
  9. This is my newest project with Phaser, 2D platformer which aims to bring the best from the present and the past in one game. Curentlly it is still WIP but you can see how the development progress is moving on. Some of you may have seen it on twitter but for those who didn't here are a few gifs: As far as tools and frameworks are concerned I'm using: Phaser - for coding Aseprite - for pixel art Tiled -for level design I'm alone working on this game, graphics, programming and design, so if you see any flaws please do not hesitate to criticize me. Cool part about being solo dev beside not having anyone to mess with my ideas is that when I get bored doing programming, I draw assets for my games, when I run out of inspirations for drawing I design levels, when get tired with that I move back to programming and so on! I hope that playable demo will be available by the end of the month. Thanks everyone for taking a look. Cheers!
  10. GitHubGameOff2017

    Hello, I just have submitted a basic game around Phaser in the actual game jam Feel free to discuss it in
  11. Phaser Hex grid engine

    Hello, I'm searching for Hex grid engine to make Battle Isle (DOS) clone in Phaser.js, if somebody can help me with that I'll be very gratefull cause I've found only this link which is broken -> Maybe there is a Phaser Hex Grid addon with documentation that I can't find ?
  12. [Phaser] Lost in Jungle

    Hi! I'm releasing my new game, called Lost in Jungle! How many days can you survive in a misty jungle full of monsters? Play this turn-based game and find out in your desktop or mobile! Play it for free at:
  13. Looking for a job

    Hello, programmers, designers, game enthusiasts and work with this entertaining game! We are Vietnamese. We are young people who have enjoyed playing games since childhood. We are passionate about them and now we create them. We love the work we do. We are approaching the technology of making games with html5. And we look forward to cooperating remotely with anyone who needs us. We have been doing game projects for partners putting them on their website. We can do everything from web programming, frontend, backend, web api, payment integration to in-game client. However, we have not done much gaming projects yet. We are young and want to challenge. We will take your project and take it seriously. You will not lose money if we do not work well. We can work both weekends and even in extreme weather. Please contact us if you are interested. Our English is very low. We will improve it. Get your CV via this email: We look forward to working with you and sharing your passion for an entertaining gaming world.
  14. Hello to everyone, I'm currently developing a fan-made, retro-style and non-profit game with Phaser based on the TV show Stranger Things. The main idea is to do a Point and Click game like old classics (Monkey Island saga, Indiana Jones and the fate of atlantis, etc...) with retro pixel-art graphics and chiptune music. I'm looking for GFX and Music artists If you are interested to collaborate with this project please contact with me and I'll send you a link to see the work in progress. (Sorry if there are some grammar errors, I'm Spanish).
  15. pendingDestroy doesn't work on killed objects

    I faced the following problem. I have a sprite, which is a part of Phaser.Group. When I kill the sprite using a "kill" method and then mark it with the "pendingDestroy = true;", the sprite is not being destroyed at all. If I understand the idea of using "pendingUpdate" the game engine must destroy the object automatically in "preUpdate" method. I checked that the Phaser.Group calls for the "preUpdate" method of its children even if they are not alive. However, the "preUpdate" method of the Phaser.Sprite class seems to be very tricky. This pendignDestroy is processed only in Phaser.Component.Core.preUpdate, so if one of the functions listen in line 49139 returns false the pendingUpdate won't be processed. Unfortunately, this is exactly what the first method does (Phaser.Component.PhysicsBody.preUpdate). For non existing sprites (i.e. killed sprites) preUpdatePhysics() will always return false. Hence, the pendingDestroy flag won't be processed in Phaser.Component.Core.preUpdate. P.S. I can't use the "destroy" method directly. For example, when I check for collisions between two groups with more than one alive object in each group, destroying objects can cause some errors (still trying to find out the reason of it).
  16. [Phaser]Bubble Shooter

    One simple bubble shooter with my favorite framework - phaser. I've tried to make it as simple as possible. Link to play: Bubble Shooter Game Link to Android Play: Bubble Shooter Android
  17. hey guys, I'm making a puzzle game having some grids/tiles.It have almost 100 levels.If i make that in tiled can i store level data for those 100 levels in one json.If i manually create json leveldata and create levels ,will there be any efficiency problem.Because maximum sprites in a level may be 30 something.Which will be the Best choice? .
  18. Jet again, phaser offline

    Hi, I made some searchs, and found some stuff. However, it looks obsolete. So, my question is: With current version, can my users execute my game offline? I mean, make a zip with game files, so them can unzip and execute index.html. Obviously, without local webserver nor touching security parameters. I use sprites, sounds and/or videos. If you need more data/details, just feel free to ask.
  19. Hi there, First post so sorry if this is in the wrong place. I've been reading posts on this and docs for some time but can't really make sense of it. I starting to learn and teach phaser games to 8-12 year olds. I'm looking for the most readable way for novices to scale up a game so that an original game of 480 x 360 will be displayed as 960 x 720 by default. Any rescaling down based on restricted screen size would be an advantage too but not essential if it complicates the code too much or makes less readable. Many thanks in advance
  20. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop',''); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x =; shopBtn.y =*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main');
  21. Make Phaser.Game less accessible

    Hey there! We've established before that javascript and therefore phaser games can be manipulated via console and that this can only be prevented by double checking everything with the server. Now aside from that, I wondered if it would to a certain extend help to 'hide' BasicGame, which usually is a global variable and can therefore be accessed easily. My idea is this: (function() { var cfg = { width: 1280, height: 720, renderer: Phaser.WEBGL, antialias: true, parent: 'gameContainer', enableDebug: false }; var states = [] states.push(['Boot', BasicGame.Boot]) states.push(['Preloader', BasicGame.Preloader]) states.push(['MainMenu', BasicGame.MainMenu]) states.push(['Intro', BasicGame.Intro]) states.push(['XMode', BasicGame.XMode]) BasicGame = null; var game = new Phaser.Game(cfg); for(var i = 0; i < states.length; i++) if(isDefined(states[i]) && states[i] != null) game.state.add(states[i][0], states[i][1]); game.state.start('Boot'); })(); I've implemented that into my index.html and it works fine. I imagine it makes the game way harder to adress via console, but many some of you with a deeper understanding of javascript could tell me if there really is any use to it, since there's the small downside that when working with global functions, I always need to pass game to them. Thank you!
  22. Hi everyone im currently making a game for my project and i am a newbie to phaser and i really strugling to learn it. Can someone assist me or help me to build my game? i really appreciate it please.
  23. Hi everybody, To thank the users of this forum who helped me a lot, i put my template available to help new beginners or someone else. This template offers : correct scaling without stretching effect portrait mode (for landscape mode you must invert width and height) works with cocoon in webview+ and canvas+ mode (deviceready implemented) upload the file in and run it. NOTICE for canvas+, avoid this syntax, that don't work in canvas+, in webview and webview+ no problem let variable; const anothervariable; var myFunc=()=>{} and prefer this: var variable; var myFunc = function(){}; simple example with prototype and inheritance use the states (i personnaly put all the states in a single file but you can quite put them in separate files, it's necessary to inform them in index.html eg: <script src="src/otherfile.js"></script> This template is based on : and how to adjust the scale is based on: Now my template for the beginners , index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>example_test_scale</title> <link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> <style> body { margin: auto; display: table; position: absolute; border:0px; top: 0px; left: 0px; padding: 0; margin: 0; background: #ffff00 } </style> <!--necessary for cocoon.js--> <script src="cordova.js"></script> <script src="src/phaser.js"></script> <script src="src/main.js"></script> </head> <body> </body> <script> document.addEventListener("deviceready", function() { setTimeout(function() { navigator.splashscreen.hide(); }, 5000, false); }); (function() { //start with a game with these resolution : 1280-1920 // personnaly i find it offers the best graphics for all devices but may slow some devices. // after put a safe zone //1280+200 > 1480 //1920 +350 > 2270 (350 is 200*1.5 > ratio from 1920/1280) var safe_zone_width=1480; var safe_zone_height=2270; var w = window.innerWidth ;//* pixelRatio, var h = window.innerHeight ;//* pixelRatio; var lw, lh; if ( h > w ) { lw = h; lh = w; } else { lw = w; lh = h; } var aspect_ratio_device = lw/lh; var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width; var extra_height = 0, extra_width = 0; if (aspect_ratio_safe_zone < aspect_ratio_device) { // have to add game pixels horizontally in order to fill the device screen extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height; } else { // have to add game pixels vertically extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width; } game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game'); game.state.add('boot', boot); game.state.add('preloader', preloader); game.state.add('the_game', the_game); game.state.add('next_screen', next_screen); game.state.start('boot'); })(); </script> </html> my main.js //initialize variables here var test="1...2...3"; var text="hello from sprite"; //example of prototype => a simple sprite _sprite = function(game,posx,posy,picture){ this.picture=picture, this.posx=posx; this.posy=posy; //call the class sprite from Phaser,game,this.posx,this.posy,this.picture); this.anchor.setTo(0.5,0.5); game.add.existing(this); }; _sprite.prototype=Object.create(Phaser.Sprite.prototype); // say hello from sprite _sprite.prototype.say_hello=function(){ alert(text); }; //use another prototype but with the previous parameter from _sprite, it's inheritance _super_sprite=function(game,posx,posy,picture,super_power){ //call the first prototype,game,posx,posy,picture); this.super_power=super_power; this.scale.setTo(2,2); }; _super_sprite.prototype=Object.create(_sprite.prototype); // add a new characteritic to this prototype _super_sprite.prototype.show_super_power=function(){ alert(this.super_power); }; var boot = { preload: function() { }, create: function() { //to scale the game = Phaser.ScaleManager.SHOW_ALL; = true; = true; //red color to see the background of the game itself // you must change the background in the index.html to have the same color in the background game // > change the yellow in red it's only to see how the game is scalling = '#ff4000';;'preloader'); }, }; var preloader = { preload: function() { this.load.image('green_circle', 'img/green_circle.png'); this.load.image('white_circle', 'img/white_circle.png'); }, create: function() {'the_game'); //do not use arrow function like this var some_function=()=>{alert(test)} //it works on webview+ mode but not on canvas mode var some_function=function(){ alert(test); }; some_function(); } }; var the_game = { create: function(){ //to center an object in your game use this: this.green_circle = this.add.sprite(,,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5);;,function(){'next_screen');},this); //use prototype => sprite with white_circle this.white_circle=new _sprite(game,,1800,'white_circle');,function(){this.white_circle.say_hello();},this); //use another prototype with inheritance this.super_white_circle=new _super_sprite(game,,1500,'white_circle','i am superman');,function(){this.super_white_circle.show_super_power();},this);,function(){this.super_white_circle.say_hello();},this); }, }; //for the next screen => next state, the green_circle move to top and alpha is minder var next_screen = { create: function(){ console.log("next"); this.green_circle = this.add.sprite(,300,'green_circle'); this.green_circle.anchor.setTo(0.5,0.5); this.green_circle.alpha=0.5;; }, }; And finally you could download all the template below( To launch the app, go to template/www/index.html or upload the file in and run it. Enjoy ! ps liste of tools i use : image editor => vector image => font to image => convert music to ogg => reduce png => particle editor => text editor the best => plugin with nvim : Plug 'scrooloose/nerdtree' Plug 'morhetz/gruvbox' Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' } Plug 'Raimondi/delimitMate' Plug 'rhysd/github-complete.vim' Plug 'easymotion/vim-easymotion' Plug 'terryma/vim-multiple-cursors' Plug 'vim-syntastic/syntastic' Plug 'kien/ctrlp.vim' Plug 'majutsushi/tagbar' Plug 'pangloss/vim-javascript' Plug 'vim-scripts/indenthtml.vim' Plug 'walm/jshint.vim' syntax style correct => colorscheme => os : awesome wm on linux with zsh an interesting link to review the basis from javascript in 5 minutes >
  24. I've just tried to import phaser.js along this MDN document. But it raises errors no matter how the import statement is applied. import Phaser from './phaser.js'; => Uncaught SyntaxError: The requested module does not provide an export named 'default' import {Phaser} from './phaser.js'; => Uncaught SyntaxError: The requested module does not provide an export named 'Phaser' import * as phaser from './phaser.js'; => Uncaught TypeError: Cannot set property 'PIXI' of undefined It seems phaser.js doesn't have the export statements. So, could someone advise me how to add an export statement to phaser.js so that it can be imported by other modules?
  25. Phaser + vuejs

    Hello peeps, I've been trying for a long time now to make it work, but i can't find any new ideas to test out. My project is a vuejs webpack template project i've been able to initialize phaser make things display changing the game's background color on input etc But i can't for the life of me find the way to make sprite input detect pointer. I've followed this tutorial : Here's the code of my game vue <template> <div id="plano"></div> </template> <style> #plano { position:absolute; top:0; left:0; width:1280px; height:640px; margin: 0 auto; } #plano canvas { display: block; margin: 0 auto; } </style> <script> /* eslint-disable */ /* eslint-disable no-unused-vars */ import 'pixi' import 'p2' import Phaser from 'phaser' /* eslint-enable no-unused-vars */ export default{ name: 'phaser', data: () => ({ game: null, sprites: {}, }), mounted () { this.$on('click', function(){ console.log('click') }) let self = this if ( == null) { = new Phaser.Game({ width: 1280, height: 640, renderer: Phaser.AUTO, antialias: true, parent: this.$el, state: { preload: function preload () { self.preload(this) }, create: function create () { self.create(this) }, update: function update () { self.update(this) }, render: function render () { self.render(this) } } }) } }, methods: { preload () {'block', './static/assets/block.png') }, create (phaser) { let self = this; var sprite =,, 'block') sprite.anchor.set(0.5) sprite.inputEnabled = true sprite.input.enableDrag() { console.log('sprite down') }) }, update (phaser) { }, render() { var debug debug = debug.inputInfo(32, 32); debug.pointer( ); debug.spriteInputInfo([0], 32, 150) } }, destroyed () { // } } </script> As you can see it's pretty simple i just want to be able to drag the block, the debug.spriteInputInfo shows no signs of life. Of course the code works outside of vue ... If anyone got an idea I'll gladly take it, i'm at my wits end.