Linzeestomp

Members
  • Content Count

    18
  • Joined

  • Last visited

About Linzeestomp

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Couldn't find this on my own anywhere else--so I'm asking you lovely people! I am doing some testing between Phaser and Tiled and recently tried using an "Infinite" map from Tiled in Phaser 3. After some tinkering around I think I need to ask the obvious question--can Phaser 3 even support infinite tiles? I keep getting DomExeptions like this: "Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded." Thanks for any and all help in advance!
  2. Hey all, Trying to get animated tiles from the Phaser 3 animated tiles plugin but whenever I create an animation export it and go to test it I get a reference error--can not read 'type' of null. Any help appreciated.
  3. Hi all! I was wondering if anyone could assist me with how to apply physics to a geometric object? I'm trying to have 4 squares 'rain down' from their currently fixed positions at the top of the canvas (think StepMania). Any and all help is appreciated. My code so far: var config = { width: 800, height: 600, renderer: Phaser.AUTO, antialias: true, multiTexture: true, state: { preload: create, render: render }, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 500 } } } } let game = new Phaser.Game(config); function create () { this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.refresh(); this.rect = new Phaser.Rectangle(100, 0, 600, 600); this.sqFall = []; this.sqFall[0] = new Phaser.Rectangle(150,10, 50, 50); this.sqFall[1] = new Phaser.Rectangle(300.5,10, 50, 50); this.sqFall[2] = new Phaser.Rectangle(450,10, 50, 50); this.sqFall[3] = new Phaser.Rectangle(600,10, 50, 50); } function render () { game.debug.geom(this.rect,'#ffffff'); for (a = 0; a <= 4; a++) { game.debug.geom(this.sqFall[a],'#00ff00'); } }
  4. Just toying around in Phaser 3 tonight and I got this to render totally fine without breaking any kind of scopes. sceneName = new Phaser.Scene({ key: 'sceneName', active: true, visible: true, }); /** * sceneA functions */ sceneName.preload = function () { /** * Preload things here */ console.log('Preloading scene...'); this.load.image('logo', 'assets/logo.png'); sceneName.create = function () { /** * Create things here */ console.log(this.sys.settings.key, 'is alive and fine!'); this.add.image(400, 300, 'logo'); sceneName.update = function () { /** * Update things here * * CAREFUL: TOO MUCH CODE HERE = LAG! */ console.log("Looping!"); } }; }; I was a little surprised this worked without anything breaking--can anyone tell me if there is any inherent benefit of structuring my scenes like this ?
  5. Thank you for replying! Trying your first example in my create function, I seem to be having a scope issue with this.sound.play inside the callback function. Says can't call play of undefined. Gonna keep playing with it. //scene always extends Phaser.Scene class sceneA extends Phaser.Scene { constructor() { super({ key: 'sceneA', active: true, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 500 } } }, }); } init() { } preload() { //////////////////////// // Begin Progress Bar // //////////////////////// let progressBar = this.add.graphics(); let progressBox = this.add.graphics(); progressBox.fillStyle(0x222222, 0.8); progressBox.fillRect(240, 270, 320, 50); let width = this.cameras.main.width; let height = this.cameras.main.height; // Displays 'Loading...' Text let loadingText = this.make.text({ x: width / 2, y: height / 2 - 50, text: 'Loading...', style: { font: '20px monospace', fill: '#ffffff' } }); loadingText.setOrigin(0.5, 0.5); // Displays progress percentage let percentText = this.make.text({ x: width / 2, y: height / 2 - 5, text: '0%', style: { font: '18px monospace', fill: '#ffffff' } }); percentText.setOrigin(0.5, 0.5); // Display assets being loaded let assetText = this.make.text({ x: width / 2, y: height / 2 + 50, text: '', style: { font: '18px monospace', fill: '#ffffff' } }); assetText.setOrigin(0.5, 0.5); ////////////////////// // End Progress Bar // ////////////////////// // 'progress' event listener this.load.on('progress', function (value) { //console.log(value); progressBar.clear(); progressBar.fillStyle(0xffffff, 1); progressBar.fillRect(250, 280, 300 * value, 30); percentText.setText(parseInt(value * 100) + '%'); }); // 'file progress' event listener this.load.on('fileprogress', function (file) { //console.log(file.src); assetText.setText('Loading asset: ' + file.src + " [ " + file.key + " ]"); }); // 'complete' event listener this.load.on('complete', function () { //console.log('complete'); progressBar.destroy(); progressBox.destroy(); loadingText.destroy(); percentText.destroy(); assetText.destroy(); }); // grabs JSON file with tilemap data. tilemapTiledJSON(key, src) this.load.tilemapTiledJSON('atlas', 'assets/tiles/Level 1/Level1.json'); // grabs tilesheet and sets tile size for the sheet this.load.spritesheet({ key: 'tiles', url: 'assets/tiles/Level 1/spritesheet.png', frameConfig: { frameWidth: 32, frameHeight: 32, spacing: 0, margin: 0 } }); // grabs background tilesheet and sets tile size for the sheet this.load.spritesheet({ key: 'bg', url: 'assets/tiles/Level 1/bg.png', frameConfig: { frameWidth: 32, frameHeight: 32, spacing: 0, margin: 0 } }); this.load.spritesheet('playerAnimations', 'assets/sprites/movePerson.png', { frameWidth: 600, frameHeight: 600 } ); /*this.load.image({ key: 'target', url: 'assets/tiles/Level 1/reticle.png' });*/ this.load.audio('playerStep', 'assets/audio/steps/playerStep2.mp3'); ///////////////////// // Start Plugins // ///////////////////// } create() { // place camera in the sceen and set bounds this.cameras.main.setBounds(0, 0, 1920 * 2, 1080 * 2); // make a tilemap with id or key 'atlas' let map = this.make.tilemap({ key: 'atlas' }); // create variables to hold the tileset images we preloaded earlier let groundTiles = map.addTilesetImage('tiles', 'tiles'); let bgTiles = map.addTilesetImage('bg', 'bg'); // place a static layer in the scene for our background map.createStaticLayer('bg', bgTiles, 0, 0); // place a dynamic layer in the scene for the platform let platform = map.createDynamicLayer('platform', groundTiles, 0, 0); // let physics engine know in the above layer only tiles with a value in them will have collision platform.setCollisionByExclusion([-1]); // set physics world bounds (keeps player on screen) this.physics.world.bounds.width = platform.width; this.physics.world.bounds.height = platform.height; // place more dynamic layers in the scene (however many we need) map.createDynamicLayer('layerOne', groundTiles, 17, 0); map.createDynamicLayer('layerTwo', groundTiles, 0, 0); map.createDynamicLayer('layerThree', groundTiles, 0, 0); //create the animations using our spritesheet this.anims.create({ key: 'idle', frames: this.anims.generateFrameNumbers('playerAnimations', { start: 0, end: 9, first: 9 }), frameRate: 9, repeat: -1 }); this.anims.create({ key: 'move', frames: this.anims.generateFrameNumbers('playerAnimations', { start: 10, end: 19, first: 19 }), frameRate: 20, repeat: -1 }); this.anims.create({ key: 'attack', frames: this.anims.generateFrameNumbers('playerAnimations', { start: 20, end: 29, first: 29 }), frameRate: 20, repeat: -1 }); this.anims.create({ key: 'dead', frames: this.anims.generateFrameNumbers('playerAnimations', { start: 30, end: 39 }), frameRate: 20 }); // place the player sprite in the scene this.player = this.physics.add.sprite(300, 68, 'playerAnimations', 0); // scale player sprite size this.player.setScale(0.35, 0.35); // set player bounce factor this.player.setBounce(0.0); // set collision against canvas borders to keep player on screen this.player.setCollideWorldBounds(true); // set camera to follow the player this.cameras.main.startFollow(this.player, true, 0.05, 0.05); // let physics engine know which layer we want the player to collide with this.physics.add.collider(platform, this.player); // load sound manager this.sound.add('playerStep'); } update(time, delta) { //this.player.rotation = Phaser.Math.Angle.Between(this.player.x, this.player.y, this.reticle.x, this.reticle.y); //this.reticle.body.velocity.x = this.player.body.velocity.x; //this.reticle.body.velocity.y = this.player.body.velocity.y; this.player.setVelocityX(0); let cursors = this.input.keyboard.createCursorKeys(); if (cursors.left.isDown && this.player.body.onFloor()) { this.player.setVelocityX(-300); this.player.flipX = true; this.player.anims.play('move', true); this.player.on('animationrepeat', function () { if(this.anims.currentAnim.key === 'move') { this.sound.play('playerStep'); } }); } else if (cursors.right.isDown && this.player.body.onFloor()) { this.player.setVelocityX(300); if (this.player.flipX === true) { this.player.flipX = false; } this.player.anims.play('move', true); } else if (cursors.space.isDown && this.player.body.onFloor()) { //this.player.setVelocityY(-100); //this.player.anims.play('attack', true); this.player.anims.play('dead', true); } else { this.player.anims.play('idle', true); } } }
  6. Thank you for getting back to me on this!
  7. So, I've been playing with the audio manager a bit. I've tried to add footstep sounds for when my player moves but if I put it in the update function it literally just plays the first half a second maybe? Over and over again--it sounds awful. I finally figured out it's because the update scene literally runs so many times a second and it's just request a new play on every update hence why the sound is so awful. Does anyone have any suggestions on how I can add a conditional play on event that won't result in a lawn mower sound? Code below illustrates what I've been trying to do: function preload () { this.load.audio('playerStep', 'assets/audio/steps/playerStep2.mp3', { instances: 1 }); } function create () { this.sound.add('playerStep'); } function update (time, delta) { let cursors = this.input.keyboard.createCursorKeys(); if (cursors.right.isDown && this.player.body.onFloor()) { this.sound.play('playerStep'); } } Any and all help appreciated--thanks!
  8. Just a quick curiosity post. I've seen tutorials with two different styles of building a phaser game and I was curious if either had pros/cons over the other method. The first method usually involves invoking Phaser at the top of your script and then adding 3 functions [preload, create, update] as below let gObject = {} || gObject; const config = { type : Phaser.AUTO, width : 1000, height : 750, autoFocus: true, backgroundColor: '#000000', parent : 'gameDiv', url : 'http//url.to.game', title : 'Title Goes Here', version : '0.0.1', scene : { preload: preload, create: create, update: update }, physics: { default: 'arcade', arcade: { gravity: { y: 800 }, debug: false } } }; gObject.game = new Phaser.Game(config); function preload () { } function create () { } function update () { } Below is the second method which involves extending the scene class. let gObject = {} || gObject; const config = { type : Phaser.AUTO, width : 1000, height : 750, autoFocus: true, backgroundColor: '#000000', parent : 'gameDiv', url : 'http//url.to.game', title : 'Title Goes Here', version : '0.0.1', scene : [ sceneA ] }; gObject.game = new Phaser.Game(config); class sceneA extends Phaser.Scene { constructor() { super({ key: 'sceneA', active: true, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 800 } } }, }); } preload () { } create () { } update () { } } I've personally been learning Phaser 3 using the second method. However, I'm no JS pro and even less of one where OOP is concerned. I just don't know if there is a benefit to how I've been doing it, and am curious if things are easier the other way -- or if it even matters! I haven't looked into using TypeScript yet with Phaser (seems silly to invest in TypeScript when most of the synactical sugar is already there with ES6--but again I'm not an expert.)
  9. It looks like Phaser doesn't currently support multiple tilesets PER LAYER. The current type accepted by the create layer methods are string only it looks like. You can however use multiple tilesets on different layers in the same map atlas. You could just use one layer with one tileset in mind and another with a different set in mind?
  10. Been testing Phaser 3 with TexturePacker recently (says it supports Phaser 3 which supports multi-packing and rotation). Some issues I've seen so far: When rendering spritesheets and JSON files generated by TexturePacker for Phaser 3 I learned the following things: 1.) Rotation MUST be set to true when using Multi-packs---Maybe I'm still too noob to understand why this is a thing but is there currently no way for us to use a JSON file with a spritesheet without setting rotation to true when using multi-packs? 1.a) When multi-packing and rotation are enabled all sprites that were rotated to generate the sheet are ignored in the animation that fires--literally there's jumps in the animations. The fix I found for this is to simply pack all the sprites into a massive spritesheet and just ignore atlas' with multi-packing. Help would be appreciated if I'm doing something wrong here. 2) The "repeat" attribute from the AnimationConfig does not function as indicated in the documentation--in fact it doesn't seem to do really anything? I've been trying to get a death animation to play and simply stop, once the animation has finished firing one time. Can't seem to do this...with ANY animations. It just loops endlessly regardless of it's value. See: https://photonstorm.github.io/phaser3-docs/global.html#AnimationConfig 3) Also, the "paused" attribute does nothing when set to "true". Nor does the "pauseAll" method? 4) Is there a hard limit to how many frames can be used for an animation or a maximum spritesheet size that engine will take? I noticed the closer I got to a 4000x4000 spritesheet it seemed like the engine was just like "WHOA--THAT'S TOO MUCH!" and I started getting errors regarding frame generation by the engine. P.S. The new documentation manager is super awesome appreciated! Finding what I'm searching for doesn't feel like such a lost cause anymore. Thanks!
  11. Check out this link from the Phaser 3 Examples: https://labs.phaser.io/view.html?src=src\animation\animation from png sequence.js This example does exactly what your trying to do. If you hit back, you'll be taken to all the animation examples and see a variety of methods for firing off animations. Be aware if you look to the documentation for detailed explanations of what your trying to do the AnimationManager documentation is lacking atm. I'd contribute documentation to this since I've been living in it lately but I don't trust my ability to accurately translate Phaser 3 code into understandable English lol
  12. Anyone know where I can find third party documentation or tutorials for Phaser 3 animations while the official documentation is being filled out? I'm new to Phaser in general so any help is appreciated. THANKS!
  13. Hi all, Need a little help--I'm trying to build a side scrolling platformer with a tank as the player and the player controls forward and backwards motions of the hull with the keyboard and aim/shoot with the mouse. I figured out how to lock to pointer and rotate the tank as a whole -- what I need is to append a seperate image to roughly the top of the tank and allow it to rotate toward where the cursor is as the player is driving or aiming. Current source below. //scene always extends Phaser.Scene class sceneA extends Phaser.Scene { constructor() { super({ key: 'sceneA', active: true, physics: { default: 'arcade', arcade: { debug: true, gravity: { y: 500 } } }, }); } init() { } preload() { //////////////////////// // Begin Progress Bar // //////////////////////// let progressBar = this.add.graphics(); let progressBox = this.add.graphics(); progressBox.fillStyle(0x222222, 0.8); progressBox.fillRect(240, 270, 320, 50); let width = this.cameras.main.width; let height = this.cameras.main.height; // Displays 'Loading...' Text let loadingText = this.make.text({ x: width / 2, y: height / 2 - 50, text: 'Loading...', style: { font: '20px monospace', fill: '#ffffff' } }); loadingText.setOrigin(0.5, 0.5); // Displays progress percentage let percentText = this.make.text({ x: width / 2, y: height / 2 - 5, text: '0%', style: { font: '18px monospace', fill: '#ffffff' } }); percentText.setOrigin(0.5, 0.5); // Display assets being loaded let assetText = this.make.text({ x: width / 2, y: height / 2 + 50, text: '', style: { font: '18px monospace', fill: '#ffffff' } }); assetText.setOrigin(0.5, 0.5); ////////////////////// // End Progress Bar // ////////////////////// // 'progress' event listener this.load.on('progress', function (value) { //console.log(value); progressBar.clear(); progressBar.fillStyle(0xffffff, 1); progressBar.fillRect(250, 280, 300 * value, 30); percentText.setText(parseInt(value * 100) + '%'); }); // 'file progress' event listener this.load.on('fileprogress', function (file) { //console.log(file.src); assetText.setText('Loading asset: ' + file.src + " [ " + file.key + " ]"); }); // 'complete' event listener this.load.on('complete', function () { //console.log('complete'); progressBar.destroy(); progressBox.destroy(); loadingText.destroy(); percentText.destroy(); assetText.destroy(); }); // grabs JSON file with tilemap data. tilemapTiledJSON(key, src) this.load.tilemapTiledJSON('atlas', 'assets/tiles/Level 1/Level1.json'); // grabs tilesheet and sets tile size for the sheet this.load.spritesheet({ key: 'tiles', url: 'assets/tiles/Level 1/spritesheet.png', frameConfig: { frameWidth: 32, frameHeight: 32, spacing: 0, margin: 0 } }); // grabs background tilesheet and sets tile size for the sheet this.load.spritesheet({ key: 'bg', url: 'assets/tiles/Level 1/bg.png', frameConfig: { frameWidth: 32, frameHeight: 32, spacing: 0, margin: 0 } }); // grabs player spritesheet this.load.spritesheet({ key: 'player', url: 'assets/tiles/Level 1/moveAnimation.png', frameConfig: { frameWidth: 86, frameHeight: 68, spacing: 0, margin: 0 } }); this.load.image({ key: 'target', url: 'assets/tiles/Level 1/reticle.png' }); ///////////////////// // Start Plugins // ///////////////////// } create() { // place camera in the sceen and set bounds this.cameras.main.setBounds(0, 0, 1920 * 2, 1080 * 2); // make a tilemap with id or key 'atlas' let map = this.make.tilemap({ key: 'atlas' }); // create variables to hold the tileset images we preloaded earlier let groundTiles = map.addTilesetImage('tiles', 'tiles'); let bgTiles = map.addTilesetImage('bg', 'bg'); // place a static layer in the scene for our background map.createStaticLayer('bg', bgTiles, 0, 0); // place a dynamic layer in the scene for the platform let platform = map.createDynamicLayer('platform', groundTiles, 0, 0); // let physics engine know in the above layer only tiles with a value in them will have collision platform.setCollisionByExclusion([-1]); // set physics world bounds (keeps player on screen) this.physics.world.bounds.width = platform.width; this.physics.world.bounds.height = platform.height; // place more dynamic layers in the scene (however many we need) map.createDynamicLayer('layerOne', groundTiles, 17, 0); map.createDynamicLayer('layerTwo', groundTiles, 0, 0); map.createDynamicLayer('layerThree', groundTiles, 0, 0); // place the player sprite in the scene this.player = this.physics.add.sprite(75, 75, 'player'); // set player bounce factor this.player.setBounce(0.5); // set collision against canvas borders to keep player on screen this.player.setCollideWorldBounds(true); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('player', { start: 0, end: 4 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('player', { start: 5, end: 9 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'stop', frames: [ { key: 'player', frame: 4 } ], frameRate: 10, repeat: -1 }); // set camera to follow the player this.cameras.main.startFollow(this.player, true, 0.05, 0.05); // let physics engine know which layer we want the player to collide with this.physics.add.collider(platform, this.player); // insert reticle into scene this.reticle = this.physics.add.sprite(800, 700, 'target'); this.reticle.setOrigin(0.5, 0.5).setDisplaySize(25, 25).setCollideWorldBounds(true); // Pointer lock will only work after mousedown gObject.game.canvas.addEventListener('mousedown', function () { gObject.game.input.mouse.requestPointerLock(); }); // Exit pointer lock when Q or escape (by default) is pressed. this.input.keyboard.on('keydown_Q', function (event) { if (gObject.game.input.mouse.locked) gObject.game.input.mouse.releasePointerLock(); }, 0, this); // Move reticle upon locked pointer move this.input.on('pointermove', function (pointer) { if (this.input.mouse.locked) { this.reticle.x += pointer.movementX; this.reticle.y += pointer.movementY; } }, this); } update(time, delta) { this.player.rotation = Phaser.Math.Angle.Between(this.player.x, this.player.y, this.reticle.x, this.reticle.y); this.reticle.body.velocity.x = this.player.body.velocity.x; this.reticle.body.velocity.y = this.player.body.velocity.y; this.player.setVelocityX(0); let cursors = this.input.keyboard.createCursorKeys(); if (cursors.left.isDown) { this.player.setVelocityX(-160); this.player.anims.play('left', true); } else if (cursors.right.isDown) { this.player.setVelocityX(160); this.player.anims.play('right', true); } else { this.player.anims.play('stop', true); } if (cursors.up.isDown && player.body.onFloor()) { //up key related } if (cursors.space.isDown) { //spacebar key related } } }