All Activity

This stream auto-updates     

  1. Today
  2. I'm making small turn based game tic-tac-toe using phaser 3. Is it possible to cache assets and all the files needed to run game so that game can be played offline so that no internet connection is needed and every file is loaded from cache (providing native like experience)? Does service worker would do the trick? What are the common approaches to speed up the loading process and caching in HTML5 games?
  3. depth sorting of entities from layer from tiled

    Hey @aylictal Dynamic Tile Layer is basically static layer with more features (like tint/alpha of individual sprites) https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.DynamicTilemapLayer.html It seems like there's currently no support for this feature (dynamic tile depth) so sprites seems to be the only way right now. Hopefully it will be added in the future.
  4. Please find my webpack.production.config.js and my package.json attached. webpack.production.config.js package.json
  5. Audio Format Compatibility

    I know we can pass different sound formats in phaser3 to let browser choose the compatible format. 1. According to this this and this mp3 is supported in most of the major browsers. So is it wise choice to use only mp3 format? if not then which format should be used with mp3 to support wide range of browsers? 2. Does this issue with ios 9 that required user engagement to start audio playback is handled by Phaser 3? From documentation it looks like WebAudioSoundManager has unlock method to resolve this issue but I'm not quite sure.
  6. Howdy, I will check that. Using the UMD package, the global object (in your case the window) has BABYLON assigned. Actually, especially for that. Would you be able to explain how you build and execute your code? I am especially interested in the VM135 to VM138 that are presented next to the inspector, but not next to vendor.js . Another solution should also be to include the inspector package.
  7. Hi @RaananW I do have the following packages installed "dependencies": { "babylonjs": "^3.2.0-rc.1", "babylonjs-gui": "^3.2.0-rc.1", "babylonjs-loaders": "^3.2.0-rc.1", "handjs": "^1.3.11" }, If i try to show the debugLayer with scene.debugLayer.show() i do get several errors: (this is just an excerpt of my errors) As described above - adding the following lines solved my issue: declare var window: { [key:string]: any; prototype: Window; new(): Window; } window['BABYLON'] = BABYLON; Tell me if you need further information.
  8. I have Phaser Box2D plugin version 1.0.2. When I bought it it free updates will be given, but I never received any updated version since. Furthermore, I don't know a way to check the latest version. 1. Is version 1.0.2 the most recent version? 2. How do I check which version is the most recent? 3. Is the most recent version verified compatible with Phaser 3?
  9. My calendar's starting to free up, so I'm ready to take on new projects! Here's a recent track for piano, synth and typewriter: Listen to As If In A Dream on Soundcloud. Hear more and get in touch at http://geoffmoore.co.uk, thanks for listening!
  10. Spawning sprites randomly for endless runner

    Hi @laduree77, I have tested the code I showed you before and it works for me (Phaser 2.10.1). Here is the problem in your new code: this.world.bounds.height = this.height - 50; "this.height" is undefined. You have to use "this.game.height" or "game.height". After that, you don't need apply physics to the ground. Right now, the call to makeObstacles in the update method isn't doing anything because it needs a parameter (number of obstacles to generate). But if you generate obstacles in the update () (it is executed 30/60 times per second), you must implement a method to destroy the obstacles that you don't need or in a few seconds you will have thousands, with which you will have performance problems and the game will be unplayable. The main idea of the code that I showed you is the reuse of the obstacles (I created 4, but obviously you can put the ones you want) to avoid to collapse the resources and the creation of new objects (slower than reusing existing ones). Greetings.
  11. rendering objects from tile map

    'characters' refers to a spritesheet that I created in preload(): this.load.spritesheet('characters', '/maps/characters.png', { frameWidth: 32, frameHeight: 32 }); m.gid is the gid of the object from the object layer, you've got one in your posted JSON and I would guess there is always one (or at least for tile-based objects). I parseInt() these gids, you may want/need to also. charTilesetRaw.firstgid comes from the tileset, that I have previously added to the tilemap as a dynamic layer: var charTilesetRaw = map.tilesets.filter(t => t.name === 'characters')[0]; The firstgid property comes from Tiled, I didn't do anything special to add it or make it accessible.
  12. Car game project

    This is cool. I created a multiplayer car game using CannonJS and BabylonJS as well, although I took it down as I didn't quite like the way I used PHP to handle sessions, unlocks, stats etc. I'm working on another game right now, but I'll have to find a way better way of using Javascript instead. By the looks of it, you interpolate the states from the server as well? It does produce some weirdness sometimes, but I chose that way as it was easy.
  13. If I get time this weekend Ill dive in and see what I can find Dad. This has been hindering me as well.
  14. Blender Exporter Version 5.6

    @Deltakosh I saw https://github.com/BabylonJS/Babylon.js/blob/master/Playground/scenes/dummy3.babylon was exported from Unity. Is it because Blender exporter still have problem with armature scale/rotation? https://github.com/BabylonJS/Exporters/issues/125
  15. Camera offset not working

    That is Phaser 2 api. Please use the Phaser 3 api. You can use scrollY to offset the camera A bit, something like: this.cameras.main.scrollY = gamecentery + someoffsetY
  16. Spawning sprites randomly for endless runner

    @onlycape Wow! Thank you so much for the detailed explanation! I also noticed the drop in FPS as I was testing it aha. I gave your solution a try, but the obstacles still seem to be falling through the ground However, the FPS does seem to be better than before! I'll post my code below: var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets this.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(-400, 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 obstacle; var timer = 0; var score = 0; var scoreText; var gamePlay = function(game) {}; gamePlay.prototype = { preload: function() { //preloading assets game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json'); }, create: function () { //making a world bounds rectangle this.world.bounds.x = -100; this.world.bounds.width = game.width + 100 + (1700 - 820); this.world.bounds.height = this.height - 50; // physics engine this.physics.startSystem(Phaser.Physics.ARCADE); //this.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(-400, 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.physics.arcade.enable([this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; //this.player.body.collideWorldBounds = true; //give player slight bounce this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 1000; this.player.body.collideWorldBounds = true; //create group for obstacles obstacle = this.add.group(); obstacle.enableBody = true; obstacle.physicsBodyType = Phaser.Physics.ARCADE; //create the hill obstacle //var hill = obstacle.create(((Math.random() * 800) + 550), (Math.random() * 700), 'sprites', 'obstacle'); //hill.body.gravity.y = 0; //displays score text on screen scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#FFFFFF'}); //spawn obstacles this.makeObstacles(4); }, makeObstacles: function (numberOfHills) { for (var i = 0; i < numberOfHills; i++) { var hill = obstacle.create(((Math.random() * 900) + 800), ((Math.random() * 250) - 20), 'sprites', 'obstacle'); hill.body.gravity.y = 200; hill.body.velocity.x = ((Math.random() * -200) - 100); hill.body.collideWorldBounds = true; } }, //makeObstacles: function () { //for (var i = 0; i < ((Math.random() * 3) + 1); i++) { //var hill = obstacle.create(((Math.random() * 900) + 800), ((Math.random() * 500) + 20), 'sprites', 'obstacle'); //var hill = obstacle.create(((Math.random() * 900) + 800), 230, 'sprites', 'obstacle'); //hill.body.immovable = true; //hill.scale.x *= -1; //hill.body.gravity.y = 0; //hill.body.velocity.x = ((Math.random() * -200) - 100); //} //}, update: function () { //look for hills off screen to recycle obstacle.forEach(function(item) { if (item.x < -60) { item.reset(((Math.random() * 900) + 750), ((Math.random() * 250) - 20)); item.body.gravity.y = 200; item.body.velocity.x = ((Math.random() * -200) - 100); item.body.collideWorldBounds = true; } }) //spawn more hills if (timer % 100 == 0) { this.makeObstacles(); } if (timer % 1000 == 0) { score += 1; scoreText.text = 'Score: ' + score; } //look for collisions between sprites this.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 player if (cursors.up.isDown && (this.player.body.touching.down)) { this.player.body.velocity.y = -850; } else if (cursors.right.isDown) { this.player.body.velocity.x = 60; this.player.animations.play('right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90; this.player.animations.play('right'); } } }; 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');
  17. I think I have more to close all my projects that does not work anymore and where everything depends on CustomMaterial. Unless Nasimi can do something, but I have the impression that it will still take several weeks or months before this is fixed and in the meantime my projects are out of order, I can not do anything and I pass for that who does not care about its users, but hey I think there are more users, so more problem.
  18. Best way to render graphics

    1: 2: use graphics.clear() inside update.
  19. http://www.babylonjs-playground.com/#BC4W77 comparing the two methods.
  20. Hi @ziguri, would be great to know your setup and what error you see, in order to understand if the problem returned or not.
  21. Ok cool, the other one I was thinking about was doing like: var start = Date.now(); var time = 0; loop{ var now = Date.now(); time = now - start; setTime... } but if the getAnimationRatio works then Ill go with that!
  22. you should use scene.getAnimationRatio() * TheOffsetIWantToUse to get a value synchronized with timing
  23. So would there be any benefits or cons to doing something like this: var time = 0; engine.runRenderLoop(function(){ scene.render(); var d = engine._deltaTime; time+=d*0.0001; shader.setFloat('time', time); }); as opposed to: var time = 0; engine.runRenderLoop(function(){ scene.render(); time+=0.01; shader.setFloat('time', time); }); Is there a way to guarantee clients will get the same time 'coordinates' on a shader even with different io speeds?
  24. Big Bubble Pop

    No sounds on my browser (chrome)
  25. Spawning sprites randomly for endless runner

    Hi @laduree77 , Some points that I think can help you to optimize your code: 1) In your current code you are continuously creating elements of the "obstacle" group, which causes a significant drop in the fps. The best option in your case is to recycle the obstacles when they leave the screen. 2) For collisions with the ground you can redefine the world bounds and use bottom bound as a floor. 3) When you load an asset of the game, it does not disappear when changing to another state. Here you only need the first preload(). 4) The creation of objects or variables that are not going to change is better done in the create () method, since it only runs one time. This is the case of "cursors". Here a possible solution to your problem of collisions with the ground and the fall of the fps: var game = new Phaser.Game(820, 360, Phaser.AUTO); var mainMenu = function(game) {}; mainMenu.prototype = { preload: function() { //preloading assets this.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', 'bunny0000'); 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 obstacle; var gamePlay = function(game) {}; gamePlay.prototype = { create: function () { //world bounds rectangle ******************************************************** game.world.bounds.x = -100; game.world.bounds.width = game.width + 100 + (1700-820); game.world.bounds.height = game.height-50; // physics engine game.physics.startSystem(Phaser.Physics.ARCADE); // 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(-300, 0); // player this.player = this.add.sprite(30, 253, 'sprites', 'bunny0000'); this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true); this.player.animations.play('right', 10, true); // physics on sprites game.physics.arcade.enable([this.player, this.ground]); this.ground.body.immovable = true; this.ground.body.allowGravity = false; //give player slight bounce this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 1000; this.player.body.collideWorldBounds = true; //create group for obstacles obstacle = this.add.group(); obstacle.enableBody = true; obstacle.physicsBodyType=Phaser.Physics.ARCADE; //spawn obstacles this.makeObstacles(4); }, makeObstacles: function (numberOfHills) { for (var i = 0; i < numberOfHills; i++) { var hill = obstacle.create(((Math.random() * 900) + 800), ((Math.random() * 250) -20), 'sprites', 'obstacle'); //hill.body.immovable = true; //hill.scale.x *= -1; hill.body.gravity.y = 200; hill.body.velocity.x = ((Math.random() * -200) - 100); hill.body.collideWorldBounds = true; } }, update: function () { //look for hills out of screen to recycle obstacle.forEach(function(item){ if(item.x < -60){ item.reset(((Math.random() * 900) + 750), ((Math.random() * 250) - 20)); item.body.gravity.y = 200; item.body.velocity.x = ((Math.random() * -200) - 100); item.body.collideWorldBounds = true; } }) //add arrow keys for movement var cursors = this.input.keyboard.createCursorKeys(); //reset player velocity this.player.body.velocity.x = 0; //moving player if (cursors.up.isDown && this.player.body.onFloor()) { this.player.body.velocity.y = -850; } else if (cursors.right.isDown) { this.player.body.velocity.x = 60; this.player.animations.play('right'); } else if (cursors.left.isDown) { this.player.body.velocity.x = -90; this.player.animations.play('right'); } } }; var gameOver = function(game) {}; gameOver.prototype = { 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'); Greetings and good luck!!
  1. Load more activity