piotr

Members
  • Content Count

    90
  • Joined

  • Last visited

About piotr

  • Rank
    Advanced Member

Contact Methods

  • Website URL
    www.piotr.one

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

1392 profile views
  1. Solved. The issue was the game's low resolution (400x300). I was trying to make my 16x16 sprites to look sharp and big enough and therefore the bitmap fonts where crunched. On top of that I wasn't using .setScale to set the font's size. So to this is the current set up I'm using to get a retro pixel looking game: 1. Don't set a too low resolution and set zoom to 1 var config = { scale: { width: 1600, height: 1200 }, pixelArt: true, roundPixels: false, antialias: false, zoom: 1 }; 2. Use .setScale(); for bitmap fonts this.add.bitmapText(0, 0, '8bit', 'Game Title').setScale(1); 3. If you have small sprites, 16x16, then change the scale of all sprites to blew them up and show those nice pixel var player = this.add.sprite(x, y, "player"); player.setScale(4);
  2. I've also added these lines, without any improvements: To the config file mode: Phaser.Scale.NONE, To the scene this.cameras.main.setRoundPixels(true);
  3. Here's a post that explains how to call a function on the last frame of an animation. For your specific case you could start with a disabled collider (say on a sword) and then once the attack animation is complete, enable it.
  4. Hi all, Bitmap fonts don't display correctly on both Chrome and Safari (both on Mac), but sprites render correctly (green gradient on the side of the attached images) I've tried with different fonts and this is my configuration. This happens with both zoom:1 and zoom: 2 and larger canvases (e.g 800x600) var config = { type: Phaser.AUTO, scale: { parent: 'gameDiv', autoCenter: Phaser.Scale.CENTER_BOTH, width: 400, height: 300, }, pixelArt: true, roundPixels: false, antialias: false, backgroundColor: '#000000', scene: [ Boot, Preload, Title, Options, Credits, Play, End ], physics: { default: 'arcade', arcade: { debug: false } }, zoom: 2, }; This is how I load and use the fonts. I've tried using both .xml and .fnt //load this.load.bitmapFont('pinscher', 'assets/fonts/pinscher-hd.png', 'assets/fonts/pinscher-hd.xml'); //use var title = this.add.bitmapText(0, 0, 'pinscher', 'Game Title', 30); Thanks for any help in fixing this
  5. Yay! Thank you Rich, I'm very happy that I can start with Phaser again. Yes, the bit about the tag's order was wrong; the order was dictated by how the states where added to the main game. For others that may see this thread, in addition to Rich's example, here's a step by step tutorial (I just found) for putting together a template. Also the code to add 'main.js' in the html as a module would be (also in the tutorial above) <body> <script type="module" src="main.js"></script> </body> Rich, I saw that in the Germs game example, there's a boot.json file. Do I need that one too? What is it for?
  6. hi all, Is there a way to break a Phaser 3 project down into multiple files for objects (Player.js, Enemy,js) and scenes (Boot.js, Game.js...) while using ES6 classes but without Node.js, Webpack and so on? All the templates I found rely on some additional app and I'd like to avoid using them. Starting with Phaser 3 has been way more complicated than starting with Phaser 2 years ago. Setting up all those dependencies and debugging them has been a huge time sink and they still don't work to my great frustration. In Phaser 2 it was a matter of linking all the files in the main HTML file via the <script src="..."></script> tag in the right order, and adding all the states to the global game object. I appreciate it wasn't ideal but it was simple. Thanks for any help!
  7. Thanks, that helped! Here's the code that is working for me var distanceFromTarget = 10; var targetVelocity; var pointBehindTarget = new Phaser.Point(); targetVelocity = new Phaser.Point(target.body.velocity.x, target.body.velocity.y); //make a copy of the velocity vector targetVelocity.multiply(-1,-1); //invert its direction targetVelocity.normalize(); //set its length to 1 targetVelocity.multiply(distanceFromTarget,distanceFromTarget); //scale it to the desired length pointBehindTarget = Phaser.Point.add(target.position,targetVelocity); //create a new point
  8. Hi, how do you get the velocity vector of a sprite? sprite.body.velocity is phaser point or as a vector, going from the 0,0 to the sprite. What I need is a velocity vector going from the sprite onward. I need then to multiply by -1 and add it to the sprite position to get a point behind it like this image Thanks
  9. Hi all, If I set tiles to collide only on top, then when I swap tiles with "putTile", "removeTile" or "replace", any collision data previously set is lost. Is this working as intended? (Assuming that all tiles are in the "blocksArray" array) var playState = { create: function() { //create and save all Tiled layers into an array this.allLayers = []; for(var i = 0; i < this.map.layers.length; i++) { //crate all layers var layer = this.map.createLayer(''+ this.map.layers[i].name +''); //save all created layers this.allLayers.push(layer); } //search all layers for(var i = 0; i < this.allLayers.length; i++) { //set special collision for all tiles in the blocksArray if(blocksArray.length > 0) { this.setBlockCollision(this.allLayers[i], blocksArray, { top: true, bottom: false, left: false, right: false }); } } } update: function() { for(var i = 0; i < this.allLayers.length; i++) { game.physics.arcade.collide(this.player, this.allLayers[i], function(player, block){ this.contactWithPlatform(player, block, this.allLayers[i]);}, null, this); } } //------- ISSUES START HERE -------- // contactWithPlatform: function (player, block, platformLayer) { //method 1 //this.map.removeTile(block.index); //this.map.putTile(block.index, block.x, block.y); //method2 this.map.replace(block.index,block.index++, 1, 1, 1, 1); } //------- ISSUES EDS HERE -------- // //http://thoughts.amphibian.com/2015/11/single-direction-collision-for-your.html setBlockCollision: function (mapLayer, idxOrArray, dirs) { var mFunc; // tile index matching function if (idxOrArray.length) { // if idxOrArray is an array, use a function with a loop mFunc = function(inp) { for (var i = 0; i < idxOrArray.length; i++) { if (idxOrArray[i] === inp) { return true; } } return false; }; } else { // if idxOrArray is a single number, use a simple function mFunc = function(inp) { return inp === idxOrArray; }; } // get the 2-dimensional tiles array for this layer var d = mapLayer.map.layers[mapLayer.index].data; for (var i = 0; i < d.length; i++) { for (var j = 0; j < d[i].length; j++) { var t = d[i][j]; if (mFunc(t.index)) { t.collideUp = dirs.top; t.collideDown = dirs.bottom; t.collideLeft = dirs.left; t.collideRight = dirs.right; t.faceTop = dirs.top; t.faceBottom = dirs.bottom; t.faceLeft = dirs.left; t.faceRight = dirs.right; } } } },
  10. Thanks Casey. I've tried the first options, and it works. 1. Tiled setup Put each platform on a separate Tiled layer. The layer should have a custom boolean property called "complete" Every tile should have a boolean custom property called "touched" 2. The code create: function() { //create and save all Tiled layers this.allLayers = []; for(var i = 0; i < this.map.layers.length; i++) { //crate all layers var layer = this.map.createLayer(''+ this.map.layers[i].name +''); //save all created layers this.allLayers.push(layer); } //set collision for the layers created for(var i = 0; i < this.allLayers.length; i++) { this.map.setCollisionBetween(0,1000, true, this.allLayers[i]); } }, update: function() { for(var i = 0; i < this.allLayers.length; i++) { //pass the actual layer as an extra argument, because the first accourance is a tile game.physics.arcade.collide(this.player, this.allLayers[i], function(player, tile){ this.touchTile(player, tile, this.allLayers[i]);}, null, this); } }, touchTile: function(player,tile,layer) { if(tile.properties.touched == false) { tile.properties.touched == true; } this.checkPlatform(player,tile,layer); }, checkPlatform: function (player,tile,layer) { //if not all tiles have been touched if(tile.layer.properties.complete == false) { //get all tiles in the layer var platformTiles = layer.getTiles(layer.x,layer.y,layer.width, layer.height,true,true); var touchedTiles = []; //look for touched tiles in the layers and save them in an array for(var i = 0; i < platformTiles.length; i++) { if(platformTiles[i].properties.touched == true) { touchedTiles.push(platformTiles[i]); } } //check if the all tiles have been touched if(touchedTiles.length === platformTiles.length) { for(var i = 0; i < platformTiles.length; i++) { platformTiles[i].index++; } //all tiles have been touched tile.layer.properties.complete = true; } } },
  11. Hi all, I need advice on which approach is best for my problem: Setup: 1. I'm using Tiled and tiles sets to create platforms for the player to jump on 2. Each platform is made of 32x32 tiles and can have any shape, like in tetris. (line-shaped, "L"-shaped, 2x2 block, and so on) 3. A level can have up to 50 platforms Desired outcome: I want is to know when the player has touched every tile of a platform. E.g. a platform has 5 tiles and after the player collided with all of them I want to call a function. What would be the best way of doing this? Solutions considered: 1. Have one layer per platform and get all tiles in each layer once the player touches the first tile. Then have a boolean on each tile, and substract the total touched tiles from the total tiles in the layer. When zero, call the function 2. Have some function that looks for adjacent tiles to the one touched by the player. Are there any better solutions? Thanks
  12. @fedora any success with this problem?
  13. Anyone has been successful with any of those implementations and can post some code, please?
  14. Thanks! I didn't know about onComplete.addOnce. Now it works. Here's the full working code: Enemy.Shaker = function (game,player) { game.time.events.add(1000, this.show, this); }; Enemy.Shaker.prototype = Object.create(Phaser.Sprite.prototype); Enemy.Shaker.prototype.constructor = Enemy.Shaker; Enemy.Shaker.prototype.show = function() { this.visible = true; this.animations.play('isEnemy').onComplete.addOnce(function() { this.game.camera.shake(0.05, 1000); game.time.events.add(1200, this.hide, this); }, this); console.log('show'); }; Enemy.Shaker.prototype.hide = function() { this.visible = false; game.time.events.add(2000, this.show, this); console.log('hide'); };