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
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 3,332 results

  1. kenneth12

    [WIP] Phaser Puzzle Bobble

    Hello everyone this is my first post on this forum. I wanted to share the Puzzle Bobble clone (gameboy version) I made with Phaser, ES6, and webpack. I tried to make the stages similar to the original series. Currently there is a total of 50 stages but I plan to add the rest of the stages if I can find them on the internet. I also drew all the sprites in photoshop. Hope you guys enjoy it! https://html5bubbleshooter.co/
  2. Titus

    Emitter Rotation Question

    Hi, I'm having some trouble with my emitter that is used as spray particles for a fire extinguisher. I've set the emitX and emitY to position relative to the player's front arm and set the emitter.rotation = frontArm.rotation. The problem I'm having is that when the arm rotates the particle's emit location is moved. I've attached some screenshots and code to show what I mean. I'm sure it is something simple that I'm missing but I've searched on the forums for quite a while and can't seem to find a solution. Any help would be appreciated. FireSim.test = { create: function() { this.game.stage.backgroundColor = "#d36a6a"; this.waterSpray = this.game.add.emitter(0, 0);// (x, y, max particles) this.waterSpray.makeParticles('whiteParticle', '', 5000, true, false); this.waterSpray.maxParticleScale = 5; this.waterSpray.minParticleScale = 1; this.waterSpray.flow(1000, 100, 50, -1, false); this.waterSpray.minParticleSpeed.setTo(400); this.waterSpray.maxParticleSpeed.setTo(800); this.waterSpray.setYSpeed(-30, 30); this.waterSpray.gravity = 0; this.frontArm = this.game.add.sprite(150, 100, 'frontArm5'); }, update: function() { if(this.game.physics.arcade.angleToPointer(this.frontArm.world) < 1) //only move the arms towards the mouse angle if it is less than 1. This prevents erratic movement when the mouse pointer is positioned behind the player { this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm.world); } this.waterSpray.emitX = this.frontArm.world.x + 270; this.waterSpray.emitY = this.frontArm.world.y + 160; this.waterSpray.rotation = this.frontArm.rotation; if (this.game.input.activePointer.isDown) { this.waterSpray.on = true; } else { this.waterSpray.on = false; } }, };
  3. Play Cool Math

    Math Number Challenge

    Math Number Challenge In this game, you need be finding figures for speed. It looks quite easy for the first time. However, at every level new tasks appear complicating the search for numbers. In the game, you will learn figures in the decimal system. You will find out how to count to 10 with Roman figures. Moreover, you are going to learn to quickly search for figures matching the sides of the dice. Some figures (in complex levels) are represented as arithmetic expressions and you will have to calculate the amount or difference before to choose the right number. Play Online Version Play iOS Version Play Android Version
  4. PIXIEDUST CATBOX

    [Phaser] Mondo Hop

    Introducing Mondo Hop, a bouncing side-scrolling platformer. Please try it out. GAME FEATURES: Addictive quick-paced gameplay, beautiful 3d modeled graphics, original sounds and music, and smooth performance on both mobile and desktop. TO PLAY: Use the bottom on-screen buttons or the arrow keys to move. Bounce from platform to platform (some of which are moving) without falling. Jump on the springs for a boost. Make it to the end before time runs out and try to collect all the coins along the way. There are 64 progressively harder levels in all. PLAY AT: http://pixiedustcatbox.likesyou.org/mondo_hop.html All feedback is welcome. Developed with Phaser.
  5. 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!
  6. I have an idea of how I want to spawn obstacles for my endless runner game; what I want to do is spawn them randomly on the right and move them towards the left hand side of the screen. And once they are out of bounds of the screen, I want to kill them. But I need some help figuring out how to write the function that would do this. So far I've made a title screen, and the basic "treadmill" structure of the endless runner with player movement. var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // background this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.background = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground'); this.background.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('run', Phaser.Animation.generateFrameNames('bunny', 4, 5, "", 4), 10, true); this.player.animations.play('run', 10, true); // logo this.splash = this.add.sprite(this.game.world.centerX, this.game.world.centerY - 40, 'sprites', 'logo'); this.splash.anchor.setTo(0.5); }, update: function () { if (this.game.input.activePointer.justPressed()) { this.game.state.start('gamePlay'); } } }; var gamePlay = function(game) {}; gamePlay.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { // physics engine this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = 2000; // background this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background'); this.background.autoScroll(-100, 0); // ground this.ground = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground'); this.ground.autoScroll(-200, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny'); this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true); this.player.animations.play('right', 10, true); // physics on sprites this.game.physics.arcade.enable([this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; this.player.body.collideWorldBounds = true; //add spacebar for jump this.jumpButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update: function () { // look for collisions between sprites this.game.physics.arcade.collide(this.player, this.ground); //add arrow keys for movement var cursors = this.input.keyboard.createCursorKeys(); //reset player velocity this.player.body.velocity.x = 0; //moving right if (cursors.right.isDown) { this.player.body.velocity.x = 90; this.player.animations.play('right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90; this.player.animations.play('right'); } // jump if (this.jumpButton.isDown && (this.player.body.touching.down)) { this.player.body.velocity.y = -800; } } }; var gameOver = function(game) {}; gameOver.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { console.log('create'); game.stage.backgroundColor = '#4488AA'; //click to start text this.game.add.text(this.game.world.centerX - 100, this.game.world.centerY + 80, 'Click to return to main menu', { font: "30px Raleway"} ); }, update: function () { if (this.game.input.activePointer.justPressed()) { this.game.state.start('mainMenu'); } } } game.state.add('mainMenu', mainMenu); game.state.add('gamePlay', gamePlay); game.state.add('gameOver', gameOver); game.state.start('mainMenu'); sprites.json
  7. Hello! I'm glad to present you our new game called "ChopChop" - link It was never published before, so both exclusive and non-exclusive licenses are available.
  8. smdool

    init parameters is undefined

    In Phaser 2.7.5 I'm trying to pass an object as a parameter from one state to another but the object is showing as undefined. Below is the code from GameState whereby I'm looking to pass an object containing a score, time and seconds. this.game.state.start( "Congratulations", true, false, { score: this.killedGerms, time: this.timeLabel.text, seconds: this.remainingSeconds }); Below is the CongratulationsState where the parameter, "data", is coming through as "undefined". init: function(data) { console.log('data', data); data = data || { score: 0, time: "00:00", seconds: 0 }; } Any ideas on where I have gone wrong would be greatly appreciated.
  9. I recently finished my first game with Phaser in just under 2 months. Its a 2D action / bullet-hell style shooter with a story, made using Phaser. You can play it here: SUPER STARKILLER 3000 I also wrote about what I learned in a retrospective you can read here: https://github.com/fahseltc/SUPER-STARKILLER-3000/blob/master/docs/article/postmortem.md Or check out the source GitHub: https://github.com/fahseltc/SUPER-STARKILLER-3000 Thanks for taking a look!
  10. mazoku

    Big Bubble Pop

    Phaser bubble shooter game with specials. Small simple game made in my free time. Play Game: Big Bubble Pop
  11. PIXIEDUST CATBOX

    [Phaser] Cubxer

    Hello everyone. I'd like to introduce Cubxer, a cube stacking match-3 puzzle game. Please check it out at the link below. GAME FEATURES: Beautiful 3D modeled graphics and animations, cool music and voice effects, and endless ever-challenging levels. Works well on both desktop and mobile. HOW TO PLAY: At each turn you control a dropping column of colored cubes. You can move and reorder the column using either the mouse or keyboard: LEFT/RIGHT-A/D keys or left/right swipe to move cubes left/right UP-W key or up swipe to reorder cubes DOWN-S key or down swipe to move down fast Make color matches with cubes at the bottom. Matches are made when 3 or more colors line up vertically, horizontally or diagonally. Make enough matches and you advance to the next level. Let the cubes stack to the top and the game is over. Try to match as many cubes as possible each turn. PLAY AT: http://pixiedustcatbox.likesyou.org/cubxer.html Feedback is greatly appreciated. Developed with Phaser. Music by Eric Matyas.
  12. GideonSam

    Box2D FPS drop in Mobiles

    Hi All, I have been developing a box2D game in Phaser 2, it works fine in the Desktop browsers. When comes to the Mobiles the FPS drops. There are only three sprites in the stage, one static body and a dynamic body. Please kindly help. Thanks, Gideon
  13. Since Phaser is a web framework, we the developers, have a choice between drawing GUI (Menus, inventory screens, buttons etc) on the canvas or use built in browser elements with all the functionality and response and just connecting it to the game engine. What would you recommend? Drawing and handling clicks on canvas is a little harder, but if there are any sound benefits to that I would love to know. Thanks
  14. GideonSam

    Brush tool in Phaser

    Hi All, I have been working on a Simple paint app for kids. I have a problem in implementing the simple brush tool. Im getting small dots and line here there in the screen Unable to draw on free hand movement like a brush. kindly help. playGame.prototype = { preload: function () { }, create: function () { game.stage.backgroundColor = '#222222'; game.input.onDown.add(this.onStageDOwn, this); game.input.onUp.add(this.onStageUP, this); }, onStageUP: function () { game.input.deleteMoveCallback(this.paints, this); }, onStageDOwn: function (pointer, x, y) { graphicsMC = this.game.add.graphics(); graphicsMC.lineStyle(2, 0xffd900, 1); graphicsMC.moveTo(pointer.x, pointer.y); game.input.addMoveCallback(this.paints, this); }, paints: function (pointer, x, y) { graphicsMC.lineTo(pointer.x, pointer.y); } };
  15. At the moment I'm just trying to switch in between game states by having the user press the spacebar. However, when the user holds down the spacebar, it continues to change. Is there a simple way to have the state change only once even when the spacebar is held down? I came across something called JustPressed, but it seems to be behaving in the same fashion as isDown. (rather than cycling through them infinitely when the spacebar is held down) I am brand new to Phaser and Javascript so a simple solution that's easy to understand would be amazing! // define game var game = new Phaser.Game(900, 500, Phaser.AUTO); // define MainMenu state and methods var MainMenu = function(game) {}; MainMenu.prototype = { preload: function() { console.log('MainMenu: preload'); }, create: function() { console.log('MainMenu: create'); game.stage.backgroundColor = "#facade"; }, update: function() { // main menu logic if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { game.state.start('GamePlay'); } } } // define GamePlay state and methods var GamePlay = function(game) {}; GamePlay.prototype = { preload: function() { console.log('GamePlay: preload'); }, create: function() { console.log('GamePlay: create'); game.stage.backgroundColor = "#ccddaa"; }, update: function() { // GamePlay logic if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { game.state.start('GameOver'); } } } // define GameOver state and methods var GameOver = function(game) {}; GameOver.prototype = { preload: function() { console.log('GameOver: preload'); }, create: function() { console.log('GameOver: create'); game.stage.backgroundColor = "#bb11ee"; }, update: function() { // GameOver logic if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { game.state.start('MainMenu'); } } } // add states to StateManager and start MainMenu game.state.add('MainMenu', MainMenu); game.state.add('GamePlay', GamePlay); game.state.add('GameOver', GameOver); game.state.start('MainMenu');
  16. matias_ini

    How to know if a device is muted

    Hi, Does anyone know how to know if a device is muted? If it can not be done in Phaser how can I do it using javascript? Cheers, Matias Ini
  17. Hi, I am trying to use a FB Share Dialog in my Phaser 3 game, but i assume since the pointerdown does not just get called directly on mouse click, the Dialog gets blocked by the browser: let someButton= this.add.sprite(200, 500, 'someButton', 0).setInteractive(); buttonLeaderboard.on('pointerdown', () => { FB.ui({ method: 'share', href: 'https://mydomain.com' }); }, this); Does anyone have a solution for this, or for popups in general? Opening a new window would also be fine (using sharer.php instead), but that one gets blocked too: window.open(url, windowName, [windowFeatures])
  18. Hello everyone! TLDR; I'm trying to get the plugin 'phaser-input' (made by Orange Games) to be loaded and running properly in a webpack + ES6 style environment. I'm fairly new to the phaser game dev environment, and I really like how someone has created a boilerplate project that has ES6 style coding enabled [ phaser-es6-webpack]. But I think phaser2 by default was never meant to be coded in this style, with importing dependencies from a package manager; you are suppose to load the library and any plugins in the index.html's header area via script tags, so that it can do it's thing with the global namespace. (I didn't realize this until I got too far ahead in development) In my project, I have added to the webpack.config.js file to make the plugin 'phaser-input' ES6 compatible, and importable into my project. // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // Phaser webpack config const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/'); const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'); const pixi = path.join(phaserModule, 'build/custom/pixi.js'); const p2 = path.join(phaserModule, 'build/custom/p2.js'); const phaserInput = path.join(__dirname, '/node_modules/@orange-games/phaser-input/build/phaser-input.js'); module.exports = { mode: 'development', entry: { app: ['babel-polyfill', path.resolve(__dirname, 'client/src/main.js')], vendor: ['pixi', 'p2', 'phaser', 'phaser-input', 'webfontloader'], }, output: { pathinfo: true, path: path.resolve(__dirname, 'client/build/js'), publicPath: './js', filename: '[name].js', }, devServer: { contentBase: path.resolve(__dirname, 'client'), }, watch: true, plugins: [ new HtmlWebpackPlugin({ filename: '../index.html', template: './client/src/index.html', chunks: ['vendor', 'app'], chunksSortMode: 'manual', minify: { removeAttributeQuotes: false, collapseWhitespace: false, html5: false, minifyCSS: false, minifyJS: false, minifyURLs: false, removeComments: false, removeEmptyAttributes: false, }, // hash: false, }), ], module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client/src') }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] }, { test: /phaser-input\.js$/, use: ['exports-loader?PhaserInput=true'] }, ], }, node: { fs: 'empty', net: 'empty', tls: 'empty', }, resolve: { alias: { phaser, pixi, p2, 'phaser-input': phaserInput, }, }, }; The documentation recommends that the plugin be added using [ game.add.plugin(PhaserInput.Plugin); ] But I've seen other plugins use [ game.plugins.add(PhaserInput.Plugin) ]. I have this snipped added to my game state file. (the other code has been removed for clarity) import Phaser from 'phaser-ce'; import PhaserInput from '@orange-games/phaser-input/build/phaser-input'; export default class Game extends Phaser.State { preload() { this.game.plugins.add(PhaserInput.Plugin); } } The documentation simply shows the use of the plugin using the snipped [ var input = game.add.inputField(10, 90); ]. Where the function 'inputField' has been added to the framework. This is where I get stuck, the plugin function (inputField) that is suppose to be added never actually gets added at all to [ game.add ]. This in results in an error. import Phaser from 'phaser-ce'; export default class FormOverlay extends Phaser.Group { constructor({ game }) { super(game); this.testInput = game.add.inputField(10, 90); } } Is there a proper way of loading plugins in this webpack + ES6 style? I've wasted an afternoon trying to figure out how to get this plugin to work, I must be missing something here. If you know the answer to this issues, I would greatly appreciate if you can share the answer. Thanks for reading!
  19. Hi, I have built a mini games app in Adobe Air (in iOS and Android). It features lots of swf animations and lots of games. Now since the future of Adobe Air is circumspect. I want to hedge my bets by rebuilding the games in another platform which has a better future outlook. I had a few questions: 1) Which platform is better for building an app- OpenFL or Phaser ? I found OpenFL online which seems to be the best way to port flash games into html5. 2) Can I have a multi platform app in which suppose 100 games are there - 50 made in Phaser and 50 made in OpenFL? 3) I had read in one website that Phaser is not good for resolutions above 600x400 px. Is this true? 4) Since we want to support all resolutions in Android and iOS- we need vector graphics (the core strength of AIR). Do Phaser/CoreFL support Vector? Thanks, Nish
  20. ddabrahim

    Hosting multiplayer games?

    Hi. I'm currently developing a single player game in Phaser and occurred to me to make it online multiplayer instead but I would prefer not to run my own server and wondering what solutions are out there for hosting online multiplayer games? I searched the web and did come across 4 solutions. PlayerIO, AppWarp, Photon and using platforms like Heroku and Amazon.... At the moment I'm more likely go with PlayerIO because the pricing is better, the free package allow me to get started with no obligations and the paid packages also seems cheap compared to other hosts but I would like to get some feedback if it any good or not, should I consider using something else? I would be grateful for any opinion on this or even links to articles I could learn something from. Thank you.
  21. laduree77

    Sprite keeps spawning in same place

    var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; //creating random spawning place for diamond var diamondX = game.world.randomX(); var diamondY = game.world.randomY(); function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.image('diamond', 'assets/img/diamond.png'); game.load.spritesheet('baddie', 'assets/img/dude.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms = game.add.group(); //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, game.world.height - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, game.world.height - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); //create group for stars stars = game.add.group(); stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 20; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } //create diamond and apply physics diamond = game.add.sprite(diamondX, diamondY, 'diamond'); game.physics.enable(diamond, Phaser.Physics.ARCADE); diamond.body.gravity.y = 25; diamond.body.bounce.y = 0.7 + Math.random() * 0.2; //displays score text on screen scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150; player.animations.play('right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); //checking for collision with diamond and platforms game.physics.arcade.collide(diamond, platforms); //checking if player overlaps with diamond game.physics.arcade.overlap(player, diamond, collectDiamond, null, this); } function collectStar (player,star) { //function for updating score for collecting stars //removes star from screen star.kill(); //add and update score for stars score += 10; scoreText.text = 'Score: ' + score; } function collectDiamond (player, diamond) { //function for updating score for collecting diamond //remove diamond from screen diamond.kill(); //add and update score for diamond score += 25; scoreText.text = 'Score: ' + score; } It's my first time trying out Phaser and what I want to do is have the 'diamond' spawn at random locations on the screen. I've managed to get the diamond to spawn on screen, but it doesn't seem to be spawning in different locations when I reload the game each time. I'm assuming that I'd need to put something in the update function, but I need a little help with that part!
  22. var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.spritesheet('baddie', 'assets/img/baddie.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms = game.add.group(); //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, game.world.height - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, game.world.height - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1], 10, true); player.animations.add('right', [2, 3], 10, true); //create group for stars stars = game.add.group(); stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 6; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and stars with platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150; player.animations.play('right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); } function collectStar (player,star) { //removes star from screen star.kill(); //add and update score score += 10; scoreText.text = 'Score: ' + score; } I can't seem to figure out why, but once I changed the sprite (which has fewer animation frames than the original), some strange errors popped up. The two error messages say: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null Uncaught ReferenceError: stars is not defined The animation frame ranges don't seem to go out of bounds and I've already defined my 'stars' variable in the create function. Any ideas on why I'm getting these weird error messages? (the spirtesheet of the player is attached below)
  23. Good afternoon, I was hoping that the community could look over my code and see if something needs to be adjusted. I recently started learning Javascript and I just started learning Phaser and easystar yesterday so this might all look ridiculous. At the moment all I am trying to accomplish is pathfinding the way it is done in a point and click adventure game such as Monkey Island or Day of the Tentacle from Lucasarts. I am trying to achieve it much how AGS(Adventure Game Studio) allows the user to set it up. Basically, you import a room image and then you draw over the room with a chosen color(Sort of like drawing a mask) all the area's that a character can walk and find a path to and from. What I am trying to achieve in my code is the same principle above and I am trying to use easystar and Phaser to accomplish this. Let me explain my code: I have three images: the 'background' image which will load up the image of the room the character will be in. 'walkablepath' will be the image that contains the image mask. Anything that is hot pink is where the character can walk. 'maincharacter' is the player character that will find the path when we click on a part of the screen we want the player to go to. At start we will create a 'bmd' object, create the walkable grid and then destroy the bmd object. The 'bmd' object is what will hold the walkable mask information. It will match the same size as the room image. It will have complete transparency and will be overlaid over the background image, but not visible to the user. 'walkableGrid' will be the grid data that easystar will use to calculate the walkable paths. 'walkableRGB' will contain the RGB value of Hot Pink so that we can find the hot pink pixels. 'gridCollection' will collect the X and Y pixel data in the 'bmd' object and push it to the 'walkableGrid' as it goes through each pixel line from top to bottom. The code will do this by iterating through each X and Y pixel in a loop. After that is completed, the mask will be destroyed, easystar will have a setup to determine the acceptable tiles in the grid. Function calculateWalkPath() will be called each time the user clicks on the screen and the game will try and calculate the path for the user to walk and move him to his destination. Please see the code below: //Set the initial game paramters - Will start with 800x600 resolution and will use WebGL as a renderer and default back to Canvas if WebGL is not present. var game = new Phaser.Game(800,600, Phaser.AUTO, '', { preload: preload, create: create, update: update}); var easystar = new EasyStar.js(); //Lets get easy star in here. var bmd; //This will be the object that will take the pixel data of the scene. //Assets that will be preloaded at start function preload(){ game.load.image('background', 'assets/room1.png'); //The game room background that will be loaded. game.load.image('walkablepath', 'assets/walkablepath.png'); //The room's walkable area. game.load.image('maincharacter', 'assets/character.png', 32, 48); //The main characters animated spritesheet who will be walking around the room. } //The first function called when we start our game function create(){ //We are going to obtain the width and height of the background room. var backWidth = game.cache.getImage("background").width;var backHeight = game.cache.getImage("background").height; bmd = game.make.bitmapData(backWidth, backHeight); //Getting ready to determine the room size and get the pixel data of the walkable path. game.add.sprite(0,0,'background'); // Will add the room background to the desktop. It will place the upper left part of the image to the upper left part of the screen. bmd.alpha = 0; //Let's make sure the image is completely invisible to the users eyes. bmd.draw('walkablepath', 0, 0); //Will overlay the transparent walkable path over the background image. var walkableGrid = new Array(); //Lets make the grid that easy star will define as the walkable points. var gridCollection; //This will collect the 2 dimensional array grids and push it to the walkableGrid. var walkableRGB = "255105180"; //This is the RGB value of the area's the user can walk on. - Hot Pink is the RGB Color //Following code will begin at the top left corner of the walkable area and check each pixel for the hot pink color. If it finds it, it will add a 0. If not, 1. for (i = 0; i < backWidth; i++) { gridCollection = "["; for (j = 0; j < backWidth; j++) { if (bmd.getPixelRGB(i, j) == "255105180"){ gridCollection = gridCollection + "0"; } else { gridCollection = gridCollection + "1"; } //If there is still more width in the image, it will add a comma. Otherwise it won't and the array can be closed off. if (j != backWidth) { gridCollection = gridCollection + ","; } } //Close up and then Push the Array to the walkable grid gridCollection = gridCollection + "]"; walkableGrid.push(gridCollection); } bmd.kill(); //let's destroy the walkable area path we created from view - we need to find a better way to do this process. easystar.setGrid(walkableGrid); //Let's add the 2 dimensional grid array we just created to Easy star's pathfinding grid. easystar.setAcceptableTiles([0]); //Let's also make sure that easy star is aware that the 0 tiles are the tiles that the player can walk on. } function update(){ } function calculateWalkPath() { //This function will be called every time the user clicks on a path to walk to. //Now let's calculate the path and presumably use tweening to move the character from it's current x and y position to it's next calculated position easystar.findPath(xClickDest, yClickDest, playerXpos, playerYpos, function( path ) { if (path === null) { //Do something like a shrug animation from the character for not being able to find a path. } else { game.add.tween(maincharacter).to( { x: path[0].x }, 2000, Phaser.Easing.Linear.None, true); game.add.tween(maincharacter).to( { y: path[0].y }, 2000, Phaser.Easing.Linear.None, true); } }); //Let's get this party started. easystar.setIterationsPerCalculation(1000); easystar.calculate(); } I have to admit, I did not test this code yet. I rather have a fresh pair of eyes on this as I spent a good half hour trying to figure this out today and feel rather brain dead. Now, my questions are these: Will this code operate correctly? Did I use Phaser and Easystar correctly? What about memory management and speed and what is a better way to manage this? How would you improve it? Also, can I set more than one acceptable tile for easystar and how? Thanks for looking and for your assistance.
  24. rafaeldelboni

    Phaser3 Es6 Webpack4 Boilerplate

    Hi guys I spent some time creating a small boilerplate to use the new Phaser 3 with ES6 and Webpack 4. Plain webpack 4 Boilerplate with Babel, SASS and Phaser3 on board Some cool features: webpack 4, chunks and minifies; webpack-dev-server, development server that provides live reloading and fast in-memory access to assets; @babel/core and @babel/preset-env; eslint; updated, tried to use the latest version of everything (until this post ). I hope it helps, any sugestions, feedbacks or pull requests would be amazing!
  25. Hello, is there any way to complete current tween in the timeline and then remove following tweens? I'm inserting tweens like this: tweens.push({ targets: this.sprite, x: { value: 50, duration: 1000 }, y: { value: 50, duration: 1000 } }); this.tweens.timeline({ tweens }); Then after some event I need to finish current tween and clear all following (if any). This seems to stop tweens: this.tweens.killAll(); but I can't find anything to finish current tween at first. Thanks