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
    • 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 121 results

  1. rageofaxe

    How tween circle or graphics?

    Snippet for phaser2: const graphics = game.add.graphics(x, y); graphics.height = 0; graphics.width = 0; alpha = 0.5; const bounce = game.add.tween(graphics); bounce.to({ height: 300, width: 300, alpha: 0 }, 300); bounce.start(); Actually, is it possible for phaser3? This snippet not resize circle: const circle = new Phaser.Geom.Circle(400, 300, 50); const graphics = this.add.graphics(); graphics.fillStyle(0x00ff00); graphics.fillCircleShape(circle); this.tweens.add({ targets: graphics, alpha: {getStart: () => 0, getEnd: () => 1}, height: 500, width: 500, // or radius duration: 1000, });
  2. jopcode

    problem with setScale on layers

    Hello, I'm trying to scale the layers of my map, but when I try it shows part of the following tiles, some idea of how to solve this ?, the map is created in tiled, the spritesheet is 16 x 16: CODE create function: map = this.make.tilemap({'key':'01'}); const TilesPacked = map.addTilesetImage('tiles_packed', 'tiles_packed'); const SnowExpansion = map.addTilesetImage('snow-expansion', 'snow-expansion'); groundLayer = map.createDynamicLayer('Wall', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Ground = map.createStaticLayer('Ground', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const OverGround = map.createDynamicLayer('OverGround', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Npc = map.createDynamicLayer('NPC', [TilesPacked,SnowExpansion], 0, 0).setScale(2); player = this.physics.add.sprite(16*3, 16*3, 'characters', 1).setBounce(0.2).setScale(2); preload function: this.load.image('tiles_packed', 'sprites/tiles_packed.png'); this.load.spritesheet('characters', 'sprites/characters.png', {frameWidth:16, framaeHeight:16}); this.load.image('snow-expansion', 'sprites/snow-expansion.png'); this.load.tilemapTiledJSON('01', 'sprites/Maps/02.json');
  3. OtoRexia

    Phaser 3 Board Plugin

    Board Plugin for Phaser 3 solves all of your board related problems. You don't have to create a single board manually ever again. Create all your boards in one single line and don't worry, it never takes controls away from you. customize your boards as much as you need or use it in any case you see fit. Some of the scenarios it can be used in but not limited to are - match3, tic tac toe, memory games, and any others board related projects. Create a full-featured game in just a couple of line of code. Visit https://otorexia.github.io/BoardPlugin/ for more information. I need your support please buy this product so, I can continue to improve this product and able to do other projects similar to this (possibly in opensource format) - Support me. Also, get $10 off by visiting this link (only for first 10 buyers). Any kind of feedback is welcome. Thank You.
  4. Hi , I prepared an yeoman generator for phaser 3. It is supporting typescript , bower and webpack by default. npm install -g yo npm install -g generator-phaser-3-ts-boilerplate Also it is available via http://yeoman.io/generators/ type to search bar phaser-3-ts-boilerplate. Best Regards
  5. Hey Folks, I hope you can help. I am fairly new to Phaser 3 and am currently working on a platformer where my character can run, jump and collect collectibles. My game is modularised through WebPack everything else is plain JS along with the Phaser 3 framework. I am using Tiled where I export my levels as json files and the initial level loads perfectly with all collision tiles in place and working as expected. I've hit a road block with loading/starting new levels. I'll try and explain with my code to clarify. I've reduce the code significantly to make it easier to read. main.js: Entry file // Main.js import 'phaser'; import { Cave } from 'scenes/cave'; import { Playground } from 'scenes/playground'; var config = {...}, scene: [Cave,Playground] }; var game = new Phaser.Game(config); Cave.js. For the sake of conciseness, I've placed the this.scene.start in the update function so the new scene initialisation happens immediately. MapSetup function is further down. // Cave.js import 'phaser'; import MapSetup from 'modules/map-setup.js'; import CollectibleSetup from 'modules/collectible-setup.js'; const mapSetup = new MapSetup(); const collectibleSetup = new CollectibleSetup(); export class Cave extends Phaser.Scene { constructor () {super('Cave')} preload() { this.load.tilemapTiledJSON('map', 'assets/levels/cave/cave.json');// map made with Tiled in JSON format this.load.spritesheet('cave', 'assets/levels/cave/cave.png', {frameWidth: 64, frameHeight: 64});// tiles in spritesheet } create() { // Setup up map for this scene/level var mapObj = mapSetup.sceneMap(this, 'map', 'cave', 'world') this.map = mapObj.map; this.physics.add.overlap(this.player, this.stars, collectibleSetup.collectStar, null, this); }// create update () { this.scene.start('Playground') } Playground.js // Playground.js export class Playground extends Phaser.Scene { constructor () {super('Playground')} preload() { this.load.tilemapTiledJSON('map', 'assets/levels/playground/map.json');// map made with Tiled in JSON format this.load.spritesheet('tiles', 'assets/levels/playground/tiles.png', {frameWidth: 70, frameHeight: 70});// tiles in spritesheet } create() { // Setup up map for this scene/level var mapObj = mapSetup.sceneMap(this, 'map', 'tiles', 'World') this.map = mapObj.map; this.physics.add.overlap(this.player, this.stars, collectibleSetup.collectStar, null, this); }// create } MapSetup.js. The issue occurs here when the PlayGround scene is initiated. import 'phaser'; export default class MapSetup { sceneMap (ctx, key, tileSetImage, dynamicLayer) { // Map var map = ctx.make.tilemap({key: key}); console.log('map',map) // tiles for the ground layer - tilesets.name` var groundTiles = map.addTilesetImage(tileSetImage); // create the ground layer - layers[i].name var groundLayer = map.createDynamicLayer(dynamicLayer, groundTiles, 0, 0); // the player will collide with this layer groundLayer.setCollisionByExclusion([-1]); // set the boundaries of our game world ctx.physics.world.bounds.width = groundLayer.width; ctx.physics.world.bounds.height = groundLayer.height; return {map:map, groundTiles:groundTiles, groundLayer:groundLayer} } } I'll try and explain the issue as I understand it. When Playground is initiated, the following error fires in the console and it's because the the groundTiles & groundLayer variables return null so the setCollisionByExclusion doesn't work. When I console.log the map variable that get's assigned in the sceneMap function it returns: The tileset name is still referencing the cave json object and not the playground one. I don't understand why that is. My understanding is that a scene is automatically stopped when a new scene is started and that each scene is it's own class so i'm a bit baffled as to why previous references are still in place. What am I missing? Any help would be much appreciated. Thanks, All Moe
  6. We are buying a couple of HTML 5 Phaser (preferably Phaser 3) games. It could be of any categories and being Mobile Friendly is a must. If you are interested, plz drop a line and I will contact. Thanks, Yan
  7. Hi sorry if this question has been asked before. I'm making a simple platform game and I want to make a scoreboard...problem is, I don't know how to transfer the scores from Phaser 3 to backend... If anyone could help me, that would be great, thanks~ ^^
  8. Hi Everyone, I've decided to open source the Mars Explorer game I've been working on in the hopes that some might learn from it or even contribute to its development. the source code is available here on github. I'd love to hear some constructive feedback from the community and contributions to the project would be more than welcome. This is my first attempt at a game using phaser so go easy on me if I've made any rookie mistakes 😊 Its loosely based on the Phaser 2 tanks demo but instead using Phaser 3 and matter.js physics.
  9. Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?
  10. Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap this.config.map = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset = this.config.map.addTilesetImage('tilemap'); // # Add Tilemap Layers this.config.layers.background = this.config.map.createDynamicLayer(0, tileset); this.config.layers.midground = this.config.map.createDynamicLayer(1, tileset) this.config.layers.ground = this.config.map.createDynamicLayer(2, tileset); this.config.layers.forground = this.config.map.createDynamicLayer(3, tileset); this.config.layers.water = this.config.map.createDynamicLayer(4, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]); this.config.map.objects[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m = this.config.map; this.physics.world.setBounds(0, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
  11. Hello everyone! I'm new here and my first question is how to make my Phaser game fill all the document? I mean, take for example Slither.io, if you resize the browser, the game view will adjust to fit the same resolution while it is ocupying all the document. I wanna do the same thing to my game. How can I achieve this? Thank you for answer me!
  12. Hi guys, in the release of phaser 3.13, the developers of phaser have said that the support of scale manager and dom elements will be available in the phaser's 3.14 release, but after release we see that these functionalities are not available for us for now ? So who can say when it will be available and is there another option to solve problems related to adding dom elements and scaling.
  13. I apologize in advance if this should be obvious... Regarding destroying / removing cameras that I don't need anymore, I came across these two descriptions in the documentation that sound a bit contradicting to me: Camera.destroy(): CameraManager.remove(camera): So for destroy() it says that I should use CameraManager.remove(). However for remove() it says that I need to call Camera.destroy() to clear all references. @rich What's the "clean" way to do it? Call remove() first and then destroy() after? Or just one of the two?
  14. Hi everyone! Before anything I wasn't sure if this was the correct place to post this, please moderators move it as you consider if this should go to some other place like Projects and Demos. https://github.com/damian-pastorini/dwdgame Also, please consider that this is my first implementation ever! I've never used neither Node.js, even less Parcel, Colyseus or Phaser, my world before this first incursion in game development was all about PHP and Magento, so that should give you an idea from where I'm coming. This quite awful but working example took me 75hs, including the time I've used for research and for decide which platform use for the server and the client. After all the research, Node + Colyseus and Phaser 3 looked as the better start point since I was familiar with JS and HTML of course but had zero knowledge about Unity (the other option I would like to use), but I've prefered make the learn curve not so slow. So.... This is a really simple base MMORPG game created based on the Colyseus samples: https://github.com/gamestdio/colyseus-examples And on the Phaser 3 implementation from Jacky Rusly: https://github.com/jackyrusly/jrgame As you will see I've considerable modified how the jrgame was interacting with Socket.io in order to make it works as how the Colyseus example was working, I've thought that was the better way to do it (follow up on server ready samples and break apart the client sorry Jacky!) The game basics are login through DB, loader, scene change, players sync, but nothing like chat, items, or attacks was implemented here (so far). Here's the link to the repo: https://github.com/damian-pastorini/dwdgame Please feel free to create any tickets or pull requests for questions, fixes or improvements, I would love to get good feedback! I don't have a public link to show it yet but I'm planning to create a dev server soon (for now you will need to install it and run it to see it), at the end it will look like: https://jrgame.herokuapp.com But you will see the login screen first which in the server side will connect to the DB and all the players sync was done with Colyseus. I saw comments from people looking for Colyseus integrated with a DB engine (in this case I've chosen MySQL), so at least that part should be useful. I really hope this help more than one person, maybe someone like me who would love to get this as starting point. Best, Damian Reply
  15. Hi all, I am trying to display a character(an extended container) by grouping a collection of body parts(extended Sprites). I have also created a plugin based of of this example to simplify the process. I have traced out the scene, the container, and all of the sprites, and all seems like it should display properly. Everything is properly childed, and everything has the proper texture and frame, but nothing appears on screen. Somewhere between the plugin and my custom classes, something has stopped it from being displayed properly. Does anyone know of something that may be undocumented about any of the thing's I've done that would break what I'm trying to do, maybe about extending classes?
  16. I'm attempting to clear the path within the update function, you can see below: But for some reason, the path won't clear class Gun extends Phaser.Physics.Matter.Image { constructor(config, scene) { super(config.world, config.x, config.y, null, null, config.options); this.scene = scene; this.ship = this.scene.player this.graphics = this.scene.add.graphics(); this.path = new Phaser.Curves.Path(0, 0); } update() { this.graphics.clear() this.graphics.lineStyle(1, 0xcccccc, 1); this.path.lineTo(this.ship.x, this.ship.y); this.path.lineTo(this.scene.input.mousePointer.x, this.scene.input.mousePointer.y); this.path.draw(this.graphics) } } export default Gun; Here's the live demo - https://codepen.io/jurbank/project/live/AmPBBN/ And the project - https://codepen.io/jurbank/project/editor/AmPBBN Any thoughts? Thanks!
  17. andrei.nicolae

    Open url in a new new tab Safari

    Hi guys, I've tried multiple solutions found online opening a new tab when a button is hit. buyBtn.on('pointerdown', function (event){ openWindow(myurl); }, this); function openWindow(url) { var result = window.open(url, "_blank") } function openWindow(url) { document.getElementById('newlink').href = url; document.getElementById('newlink').click(); } function openWindow(url) { window.location.assign(url); } This are some of them. All of these solutions work on other browsers, but not on Safari. Does anyone have a working solution for Phaser3? Thank you.
  18. here's the GitHub repo. Highlights dev server with live-reload and auto port finder simple SHOW_ALL style stretch mode Auto spritesheet with spritesmith Image optimization on build streamlined assets loading modular development setup Inside full Making your first Phaser 3 game made into modular code. All feedbacks are welcome.
  19. I am attempting to 'animate' the throwing of a tetromino sprite. The animation is simply the tetromino following a Curve while rotating. Once the 'animation' is done (after the tetromino reaches the end of the Curve) I would like to destroy the tetromino. However, looking at the API documentation for PathFollower, it is not clear to me how to detect when the sprite reaches the end of the Curve. I see a lot of event-related methods, but those seem to be for defining your own custom events rather than detecting set events like doneFollowing or something. For the rotation, I would like to set a callback to rotate the sprite at every point along the curve, but that doesn't seem possible either. Am I missing something in the API doc, or is a Curve/PathFollower approach not ideal for this scenario to begin with? Here is my code so far: const points = [ START_X, START_Y, variableX, variableY, END_X, END_Y ]; export default function ThrowAnimator(args) { let {gameObjectFactory, duration} = args; let curve = new Phaser.Curves.Spline(points); this.animateThrow = function(tetrominoShape) { points; let follower = gameObjectFactory.follower(curve, START_X, START_Y, tetrominoShape + 'Whole'); follower.setRotateToPath(true, 90); follower.startFollow({ duration: duration, yoyo: false, ease: 'Sine.easeInOut', repeat: 0 }); } };
  20. David81

    Help with masks

    Hello everyone, I have a project with Phaser and I'm stuck. I need your help. I have two layers (images) and I want to erase the first layer with the user's action (I do not want to destroy it). I have tried this with the masks but I do not know how to make the mask dynamically drawn by the player. I do not know if you understand me. I'm not good at English. Any clue how can I do this effect? I included an image.
  21. I've created a template to illustrate the concept of levels generated from dynamically loaded tilemaps from a single level scene. Phaser 3 Tilemap & File Pack Project Template Demo Questions and feedback are welcome!
  22. andrei.nicolae

    Zoom in on phone browsers

    Hi guys, I'm new to this and I have an issue in my current working project(it's first in phaser). I want to know how can I zoom in the game when it's opened in a mobile browser? The game is too small and I want to zoom and slide the whole canvas in the browser window. I can do this from outside the canvas but I cannot drag then from the canvas itself. Please help! Thank you.
  23. adeptnix

    Identify objects in collisionstart

    Hi guys, I have different objects in my game, something like this scene.matter.add.image(x, y, 'car'); scene.matter.add.image(x, y, 'cone1'); scene.matter.add.image(x, y, 'man'); And I try identify what kind of objects collides this.matter.world.on('collisionstart', (event, bodyA, bodyB) => { if (bodyA.label === 'car' && bodyB.label === 'cone') { bodyB.cone.body.setTexture('cone2'); } if (bodyA.label === 'cone' && bodyB.label === 'car') { bodyA.cone.body.setTexture('cone2'); } if (bodyA.label === 'man' && bodyB.label === 'cone') { bodyB.cone.body.setTexture('cone1'); } if (bodyA.label === 'cone' && bodyB.label === 'man') { bodyA.cone.body.setTexture('cone1'); } }); But sometimes cone object don't change his texture despite I hit it by a car. If it can help, full code there - https://gitlab.com/grigoriytretyakov/phaser3-racing-car/blob/master/src/Game.js#L172
  24. Titos

    CocoBombo(Android game)

    My first simple and amusing game using phaser framework! Available at google playstore here: https://play.google.com/store/apps/details?id=com.chrisboursis Collect the cocos and avoid the bombs. Use your finger speed and perform all the available combos! Collect the yellow candy to be aggresive --move quicker-- and the blue candy to fly! Can you score 20?
  25. ChrisB

    AtlasXML Problem

    Hi all, since yesterday i am trying to animate my player. Below is the code: preload{ ...... this.load.atlasXML("player", "assets/sprites.png", "assets/sprites.xml"); this.anims.create({ key: "moving", frames: this.anims.generateFrameNames("monkey", { start: 0, end: 9, prefix: "idle", suffix: '.png' }), frameRate: 15, repeat: -1 }); } At create: var player = this.add.sprite(400, 285, "player", "idle0.png").setDisplaySize(55, 55); which works great! But on update where i want to animate my player i am getting this error: Uncaught TypeError: Cannot read property 'frame' of undefined It is like the frames array is not populated when i am creating anims on preload. frames:Array(0) i get at: console.log(this.anims.get("moving")); Any help would be appreciated! Thank you