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,970 results

  1. 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 >
  2. 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?
  3. 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.
  4. Game list of phaser games

    Edit by Rich (September 2016): Back in 2013 Mike created a web site (below) that allowed Phaser devs to list the games they'd made. You'll find over 400 games created with some of the earliest versions of Phaser. Lots of the links don't work any more, but some do, and it's a really interesting archive. It's not worth submitting your games to the list any longer, however I'm keeping it, and this thread, because people still post new games to this thread even today. If you do this, it's highly likely I'll see it, and add it to the Phaser web site. Mike's original message follows: ------------------------------------------------------------------------------------------------------------------- What I did started from personal need, but decided to share it and maybe improve it if it went bigger. Well since the engine is still new but there is quite a moving and I check every topic, and game that is made I have a phaser game list:
  5. [Phaser] Jelly Haven

    Hey guys, I just wanted to let you know about my first HTML5 game made with Phaser! It is an action-arcade game in which you control a jellyfish going through the space gathering shiny gems and avoid being hit by dangerous obstacles like meteors and rockets. Link to game: Quick Gameplay: The game starts off slowly but it gets really fast paced as you purchase upgrades from the store which helps you survive much longer. Endless fun game with great performance. Optimized for mobile devices but fully playable in desktop as well. Audio support for all mobile operating systems. Easily localized as the texts are stored in a .json file. Saving/loading game with cookies system. Translated in 9 languages: English, Russian, French, German, Italian, Spanish, Portuguese, Turkish and Romanian. The game is currently looking for sponsorship and has not yet been published before. Let me know what you guys think! Enjoy!
  6. [Phaser] ADsteroids

    Finished my mobile game I've been working on for quite awhile. It's called ADsteroids and is available for free on Android/iOS or through a desktop browser. Android/iOS app store links are at the above link as well. This is my first commercial project with Phaser. Looking forward to many more!
  7. I'm working on an action game where the player can touch certain switch tiles to turn other enemies off and back on. So the way it is supposed to work is like this: 1. The player overlaps a switch tile 2. Execute the switch action only once 3. Ignore further overlapping with that tile until player moves off 4. When player moves off the switch should wait for the next overlap 5. Repeat from step 1 when player overlaps again I'm using arcade physics and the overlap function and it's working.. sort of. The problem is, the overlap keeps firing over and over again. What would be the best way in Phaser to get the desired result? See screenshot below of what I mean, and I've created a sandox of my code example here:
  8. I'm trying to create a sprite with two animations. The first animation play constantly, and the second one after some events, then stop and the first keep playing. I'm loading an atlas like this game.load.atlas('girl', '../../spritesheet.png', '../../sprites.json') where game is my Phaser.Game instance. Then I'm creating animations like this girlSprite.animations.add('idle', window.Phaser.Animation.generateFrameNames('idle', 1, 16), 5, true) girlSprite.animations.add('walk', window.Phaser.Animation.generateFrameNames('walk', 1, 20), 20, false) where girlSprite is my character sprite. My animations run like this'idle', 16, true) // some events later var idleAnimation = girlSprite.animations.getAnimation('idle') var walkAnimation = girlSprite.animations.getAnimation('walk') idleAnimation.paused = true //'walk', 20, true) girlSprite.animations.currentAnim = walkAnimation'walk', 20, true) This only pause my first animation and then throw an exception saying currentFrame is undefined. After that I debugged a little and found out that my girlSprite had the second animation with wrong frames defined, because when I created the second animations it used the frameData from the first animation and the currentFrame get never defined. So, I'm a little lost. I'm doing it right? is there a better method to define multiple animations on the same sprite? Any help would be appreciated
  9. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  10. Phaser on Linux & Rasberry Pi

    Hey, I'm currently rebuilding some old arcade games in phaser and I'm planning to build a cool old arcade cabinet that is essentially a custom PC with the monitor built in and some usb supported arcade controllers. I'm not sure if this is the right place to ask this kind of question but I was wondering if phaser or JS web based games in general would run well on a Linux OS or a rasberry pi? I'm mainly asking because I'd like to make a few of them so I don't really want to spend heaps of money on custom PC parts and something like a rasberry Pi is pretty cheap so I could replicate it rather cheaply. Any information would be helpful. Thanks! Dan.
  11. After long development time we finally released our game "Pirates! - the match 3". It is full blown match 3 game with many levels in two worlds. Players are given various tasks like dig treasures, fight enemies, open chests, cut through jungle and others. It also features many gem combinations - not only you can create classic row/column destroyer and bomb, but you can try to combine these to create much stronger effects. Game has great music, lot of animations and speaking parrot! You can play it here at Famobi: Or you can get iOS version at iTunes: (iOS version is Cordova wrap) For Android we rewrote whole game into Unity - it is identical: Why we did so? There is limited amount of iOS devices, but all have today enough performance to run game smooth. On Android, there is wide range of devices and some are really low level. Unity version allows us to bring smooth experience even to those devices (and the same is for low end Windows Phone devices) And of course, we are still licensing it! If you are sponsor and you like it, do not hesitate to contact us.
  12. Destroying coins in collision

    Hi guys! I am newbie to phaser and i would like to ask question and guide me in my project. I am currently developing a game for my project. My game will collect coins and coins that have question to be answered and will be evaluated if the user can play next level. Im using Tiled. And i am having trouble when the collision on the coins it increase the score multiple times before it will gone. Here is my code. Hope you guys help me. getCoin:function(){ map.putTile(-1,layer.getTileX(player.x), layer.getTileY(player.y)); score += 10; scoreText.text = 'Score: ' + score; } It replaces the tile with a tile that didnt exist so i appears to be gone.
  13. HTML5 Ads Solution

    I know that this topis has been already discussed, but I wasn't been able to find workable solution for our company. We need simple solution to monetize our game via ads (adsense videos). I have already tried phaser-ads plugin (samples are running but unable to display anything else), a4g plugin (samples running but whe I have provided our ZONE_IDs, and nothing). So are there any other solutions, or can you navigate me thre doubleclick configuration?
  14. Hi, I am trying to make a game for mobile, how can I test my game in terms of its performance, I am trying on devices but it takes my time a lot, testing the game every time. And one other question is what do you think about the phaser's future? I mean, nowadays I read about some performance issues when running phaser games on mobile. Should I choose any other programming language to make mobile games? I like phaser but if it will not good for mobile, I will have to pass any other programming language like java, instead of javascript.
  15. Phaser Combobox

    Hi all: I'm trying to integrate a register form into my phaser game. I have no problem with text input, radio or checkbox, but i have no idea of how implementing a combobox. Someone has implemented this succesfully? I need to show a country combobox. Thanks all!
  16. [Phaser] Brick Break

    Just converted one old flash game to html. Feedback is appreciated.
  17. Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src=""></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(,, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'});, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  18. I'm still in the early prototyping phase so I suspect (hope?) my issue is one of overlooking a core tenant of Phaser... Also, I'm coding with Phaser CE 2.8.7 using Typescript/ES6. My primary game state is comprised of two classes: A combat class extending Phaser.Sprite which serves as a container for the 4 character atlases within, and, beneath, a UI Class extending Group which contains a few buttons and, to the right, a mini-map group comprised of a Tilemap and its lone TilemapLayer. (The star icon is a simple sprite on top of the tilemap layer which will later represent the player, but that is currently inactive.) The problem: as the characters advance to the right there's no problem until the camera kicks in. It "follows" the sprites just fine... BUT while advancing the camera seems to erase the tilemap layer as it goes, removing it entirely. When the characters return to the start position, however, the mini-map is restored as the camera passes from right to left. If I remove the camera altogether this never occurs, so it seems I've mismanaged the camera or the mini-map somehow. I've attached two screenshots: the first displaying the mini-map before the camera begins to erase it, the second as the camera begins to pass above the mini-map, erasing the image as it passes. I'll gladly provide any relevant code if needed...
  19. [Phaser] Dragon Buster Mini

    Hi, Dragon Buster Mini is another remake of Namco classic ( from best decade for arcade games - from 80's! Go through rooms full of traps, creatures and dragons and get as far as you can: press Z or tap left half of the screen to change walk direction, press X or tap right half of the screen to jump ... and double jump! Dragon Buster was first game that featured double jump and one of the first that used visual health meter - both things so common nowadays. Play the game here:
  20. 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
  21. [Phaser] Infinite Chinese

    Hi all, I’ve been working on a mobile game that teaches you basic vocabulary. I released 2 languages a few months back and have got a lot of positive feedback, so I have just recently added more languages, including Chinese! What this game does that separates it from other educational games is that it’s built from the ground up as a game first, meaning that it plays just like a fun and quick mobile game. Another goal I had is that when you close it, you will actually remember the words that you learned outside of it’s context. It seems obvious that an educational app would have this “feature” but I’ve had issues with a lot of apps that I’ve used before where if someone quizzes me on the content within the app when I’m not playing it, I can barely recall anything. Check it out and let me know what you think! Chinese: Spanish: French: German: iOS versions will be released next month
  22. [Phaser] Zombie Cannon Attack!

    Zombie Cannon Attack! is a zombie-themed endless runner, with cannons! Cannon-fire test zombies to infect the local populace and create your very own rampaging zombie horde. Gather data and use it to upgrade your zombies and build the perfect undead army. Available now on Play Store, download FREE here: Created using Phaser, and packaged for Android with Cordova. For further details see this blog post. I'd appreciate any comments or feedback, and a download and rating on the Play Store would be fantastic. I'm also happy to answer any questions anyone might have. UPDATE: I've recently released a Halloween update to the Android version. There's also now a web demo on Kongregate and Gamejolt, Gamejolt also has a downloadable desktop version.
  23. Hello! In Phaser ( particularly Phaser CE ) I can't find something like Wind Resistance for objects. And start thinking how to implement my own version: create(){ game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 100; = game.add.sprite(32, 32, "car"); game.physics.p2.enable(,false); = 0.4; } update(){ if( && > ){; } } With this I can't use big numbers for windResistance, only between 0 and 1. What do you guys think??
  24. A.I Egg

    So, just a little project created while building a few functions and stuff I'll need for later projects. Turned out pretty good for what I wanted, but later I'll go back to improve a few more things. A bit too plain right now, but gets the job done. Play in the browser, mobile or desktop:
  25. This is my latest game - Dreams vs Nightmares . Nightmares are attacking fluffy Catnap and dreams defend it. The game is in Plants vs Zombies style with 6 levels of gameplay. I'm planing to add more levels and introduce some new defenders or attackers each level. Any ideas are welcome Dreams vs Nightmares are build with Phaser. And I used online collaboration tool MyGameBuilder. Also there is a community contributing with pixelart and music which was quite handy for me. Btw, link to a project if you find it interesting vs Nightmares?_fp=chat.P_fSriL4uw2W4kY8Liu_ Printscreen from intro animation Some action in last levels