Search the Community

Showing results for tags 'phaser3'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 7 results

  1. Phaser 3 BOILERPLATES | STARTERS Unify, upgrade, use. Last updated: February 13 Table of contents: 1. Intro 2. List of existing boilerplates 3. What kind of features we need/want 4. What's the point Intro: Hello there everyone! As Phaser 3 came out I immediately started to look after some Boilerplate which would take care of basic stuff and speed up the development. If you don't know what I am talking about, think of create-react-app, but for Phaser. There are a few already, however I think that is one of the things that shouldn't be re-created every time, but I'd rather see one, powerful, generator that is community driven, updated, and has many options. Richard has mentioned that he prefers this to be created by community, and just highlighted on the Phaser website. I am aware that sometimes you need something really different and boilerplate X won't suit your needs, but that's where configuration comes in (for example question at the beginning which physics you want to use). Unless even that can help you - get a different boilerplate/create new one. I want to help and in my opinion boilerplates are great way to unify the community, show out the best practices and speed up the development. Let me know what do you think about it. Existing boilerplates list: https://github.com/oliverbenns/phaser-starter - https://github.com/rblopes/generator-phaser-plus - by @rblopes https://github.com/lean/phaser-es6-webpack/tree/phaser3 - (phaser 3 on different branch, i think it's still in development for p3) by @leandro Boilerplates/examples (things that fall in into example category, but still can be a good foundation) https://github.com/nkholski/phaser3-es6-webpack - generic platformer template (mario in this case) and it's based on phaser-es6-webpack by @nkholski I'll keep the list updated, you can give links in the comments too! Features: What should the perfect boilerplate have Recognizable name ES6 transpilation with babel Webpack Images compress JS minify Standard folder structure with basic scenes like preload screen, game Config file for game configuration with all possible options Maybe something that will make sprite bundles ES lint configuration? (not quite sure as many people have different ways of writing code, however maybe just a small base for further configuration?) Typescript option! Popular building integrations (Cordova, Cocoon etc) at least on some level Configurable at the start: Provide bigger example? or just standard template (for example do you want only one example asset, or whole game generated) Physics selection List of some basic useful plugins? That's all coming to my mind for now, leave the comments what would you like to see in a boilerplate! The point?: I know this may be not immediately clear "what the hell this guy want to do with this topic". I think it would be nice if community choose one boilerplate that already is in a good shape and drop all the focus on it. I don't think that this will be better if every person creates a new boilerplate for no good reason and reinvents the wheel. So to summarize: Create a list of boilerplates to have it in one place Let's choose together a boilerplate which community would accept to take care of, becoming a kind of "official" boilerplate (again think of create-react-app that is used by most of the people). (and yes, I am aware that not everybody will want that, but in most cases unified standard is a good thing, I guess?) List of features that this boilerplate would ideally have. I want to hear your feedback about the whole concept, maybe I am dreaming too much. From my side: https://github.com/lean/phaser-es6-webpack/tree/phaser3 seems to be the most popular, however don't think it's phaser 3 ready yet? Haven't looked at it yet. https://github.com/rblopes/generator-phaser-plus is also looking great, I've used it at it seems it has most of the features. What would I like to hear from you guys: Do you like the idea? If yes, would you like to prefer to choose an existing boilerplate or create a new one How would you name it if new one? If new one, clean start or forked from other project? What features would you add to the list Do you know any other generators that should be on the list? So let me know what do you think about it, let the discussion begin. Yey. Best regards.
  2. I've started writing a generator for Phaser 3 typescript definitions using Richard's JSDoc annotations. If anyone is interested in helping: https://github.com/troyedwardsjr/phaser3-tsd
  3. Play Link: Pixel Memory Find all card pairs, level your profile & unlock new cards in this “Memory” classic optimized for mobile! Play Link: Pixel Memory Welcome to the "Memory" classic, expanded with new features & optimized for mobile! Game Features: Play the “Memory” classic in this mobile game. 3 Difficulties: Easy, Medium & Hard. Level up your profile & unlock more cards. Browse your collection to see which cards you’ve already unlocked. 4 card deck skins: Choose the one you like best! View your profile for your game stats & best scores in all difficulties. Gameplay: Find all the matching card pairs on the table. Find them before you run out of guesses. Unlock all the card packages in the game. Controls: The whole game requires only click inputs and is perfectly optimized for mobile! Credits: The game was developed solely by me. All assets in this game were either done by me or from the CC0 assets linked below. These sources are also credited inside the game: Play Button Name: Cartoon Mobile Rounded Icon Buttons Author: Nathan "GDquest" Lovato, https://opengameart.org/users/gdquest, http://gdquest.com/ URL: https://opengameart.org/content/cartoon-mobile-rounded-icon-buttons Explosion Sprite: Name: 2D Explosion Animations #2 | Frame by frame Author: Sinestesia, https://opengameart.org/users/sinestesia, http://www.sinestesiastudio.com/ URL: https://opengameart.org/content/2d-explosion-animations-2-frame-by-frame http://bit.ly/2C6Bi8b Audio: http://www.freesfx.co.uk/sfx/ Play Link: Pixel Memory
  4. Hi all I'm using Angular4 with Phaser 3 beta 20. I need to have separate classes for the Game Scenes so that I can use different game scenes any time I wish. I need to be able to call a function in the parent component that affects the parent component variables. This is probably a totally newbie question so please forgive me, but it's stumped me for the moment on how the scope works. Please see the following code: import { Component } from '@angular/core'; import Phaser from 'phaser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { phaserGame: Phaser.Game; carrot: any; preloadStatus: string = "Preloading"; config: any; gameScene: Phaser.Class; getScene() : any{ return { Extends: Phaser.Scene, initialize: function GameScene(config) { Phaser.Scene.call(this, config); }, preload: function () { this.load.image('carrot', 'assets/carrot.png'); console.log("Phaser game loading done"); this.FromInGame(); }, create: function () { this.carrot = this.add.image(400, 300, 'carrot'); }, update: function () { this.carrot.x += .2; } } } constructor() { let theScene = this.getScene(); theScene.FromInGame = this.FromInGame; this.gameScene = new Phaser.Class(theScene); this.config = { type: Phaser.CANVAS, parent: 'phaser-example', scene: this.gameScene }; this.phaserGame = new Phaser.Game(this.config); } FromInGame() : void{ console.log("called from in game"); this.preloadStatus = "Preload DONE!"; } } I need the FromInGame() function to be fired from the Scene's preload() function, which it is. However, in the FromInGame() function "this" clearly references the Scene because "theScene.FromInGame = this.FromInGame;" is setting it as a function on the Scene. Therefore when executing "this.preloadStatus = "Preload DONE!";" it adds a property preloadStatus with a value "Preload DONE!" to the Scene and rather than updating the this.preloadStatus in the Angular component. Any ideas how I would achieve this please? Thank you very much in advance. D
  5. Hello everyone, I just upgraded my project from Phaser CE to Phaser 3 (latest beta) and I noticed that framerate has dropped down dramatically. I know that version 3 is using custom renderer and not Pixi, but as I understand, the WebGL version should have similar performance as the original Pixi renderer. I have just a single isometric scene with 64x64 tile sprites, every sprite is 80x40 and there are 128 single textures. Before upgrade, I got solid 50-60 FPS, now I can barely move the camera without FPS dropping under 15 FPS. Has anyone actually tested the rendering performance of Phaser 3? Thank you for any hint, Have a nice day, Max.
  6. Hi there, I'm playing around with the v3 API and wondered how to collide with a layer of a tilemap. Here is what I've already tried: 1) Get tiles data (there is probably a better way / API helper for that like forEachTile) and then use setCollision. let tilesData = (this.platformLayer.data.gameObject.map.tiles) this.map.setCollision(tilesData, true, false, this.platformLayer) 2) Do the opposite by excluding an empty array. this.map.setCollisionByExclusion([], true, false, this.platformLayer) 3) API v2 style. this.physics.arcade.collide(this.player, this.platformLayer); Here is my game config, if someone have the time to spot what I'm doing wrong. Thanks! let config = { type: Phaser.AUTO, parent: 'content', width: 800, height: 600, pixelArt: true, backgroundColor: '#2d2d2d', physics: { default: 'impact', impact: { setBounds: true, debug: true }, }, scene: [ Boot, Preload, TileMapTest ] } let game = new Phaser.Game(config) And here is my Scene /* globals __DEV__ */ class TileMapTest extends Phaser.Scene { constructor () { super({ key: 'TileMapTest' }) if (__DEV__) { console.log('TileMapTest scene created.') } this.map = null this.player = null this.cursors = null this.rockLayer = null this.waterLayer = null this.platformLayer = null this.stuffLayer = null } preload () { // Hero this.load.image('hero', './assets/sprites/hero.png') // Tilemap this.load.image('kenny_platformer_64x64', './assets/tilemaps/tiles/kenny_platformer_64x64.png') this.load.tilemapJSON('multiple-layers-map', './assets/tilemaps/maps/multiple-layers.json') } create () { if (__DEV__) { console.log('TileMapTest scene entered.') } this.createTileMapLayers() this.createPlayer() this.cameras.main.startFollow(this.player) this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels) this.physics.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels) // ---> @todo collide with platformLayer } update (time, delta) { this.updatePlayer(time, delta) } createPlayer () { this.player = this.physics.add.sprite(200, 200, 'hero', 4).setOrigin(0, 0.15) this.player.setActive() this.player.setMaxVelocity(500) this.player.setFriction(1000, 100) this.player.body.accelGround = 1200 this.player.body.accelAir = 600 this.player.body.jumpSpeed = 500 // this.player.body.collideWorldBounds = true this.cursors = this.input.keyboard.createCursorKeys() } createTileMapLayers () { this.map = this.make.tilemap({ key: 'multiple-layers-map' }) let tiles = this.map.addTilesetImage('kenny_platformer_64x64') this.rockLayer = this.map.createStaticLayer('Rock Layer', tiles, 0, 0) this.waterLayer = this.map.createStaticLayer('Water Layer', tiles, 0, 0) this.platformLayer = this.map.createStaticLayer('Platform Layer', tiles, 0, 0) this.stuffLayer = this.map.createStaticLayer('Stuff Layer', tiles, 0, 0) } updatePlayer (time, delta) { let accel = this.player.body.standing ? this.player.body.accelGround : this.player.body.accelAir if (this.cursors.left.isDown) { this.player.setAccelerationX(-accel) } else if (this.cursors.right.isDown) { this.player.setAccelerationX(accel) } else { this.player.setAccelerationX(0) } // Jump if (this.cursors.up.isDown && this.player.body.standing) { this.player.setVelocityY(-this.player.body.jumpSpeed) } } } export default TileMapTest
  7. var graphics = this.add.graphics(); var color = 0xffff00; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256);