Search the Community

I'm attempting to keep my animated tiles in phaser, but it don't seem to work by default. Does anyone know of a work around? I've included an image of the animated tile map.

Hello everyone, So I've discovered this lib recently and I'm quickly becoming a great fan of it. But I need help with something. I am working in a project that we use http://leafletjs.com/ to create something similar to a boardgame but with very large images (i.e 10000x6000), the good part of leaflet is that he uses the large image cropped in smaller tiles to make it more fast in the browser, very similar to what is used in Google Maps. It also have the possibility to zoom the image. My question is, if it is possible to do something like that in Phaser? Or if Phaser has some kind of solution? Phaser has lots of stuff that we like to use in our project, our only problem is the images, because it might cause some performance issues in mobile devices and slow internet connections. Thanks in advance, and keep the good work in this great lib, I am started to became in love with it

Hello everyone! I am new to HTML5 game development and I'm determined to get my first game completed. I've been very impressed with Phaser and all the hard work being put into it. I chose to develop with this game engine because I feel the community is very active and supportive. At this time, I'd really appreciate some help. I was able to get my Typescript project up and running by following Rich's two new tutorials and I'm using his game template to guide me through my project. When it comes to loading a sprite, I have no issues. However, I wanted a level larger than just the canvas size, so I felt I needed to create a tiled map and add platforms through a tilesheet. I haven't had too much experience with Tiled but I followed a simple tutorial to help me position the platforms and level. I created a map size of 75 x 19 tiles with their tile sizes being 32px x 32px. I have 3 layers consisting of an image layer with the background, tile layer for my platforms, and object layer for collisions (not sure if its needed). Here is a link to my set up on Tiled: http://s11.postimg.org/48n8ag91v/tiled.png Tilesheet link: http://s21.postimg.org/9yicpanpf/tilesheet_platforms.png Background link: http://s28.postimg.org/3xcz956ql/background.png I exported the tiled map into a JSON file and loaded it into my preloader state. I've noticed that many people load their tilesets with a load tileset function, but I noticed the Typescript definitions file doesn't support it (I obtained mine from the dev branch). So I've explored other ways through the examples and forums, and I'm having trouble loading my tiledmap. My game and player loads normally, but my background results in a black screen. I've spent hours trying to get it working. I'll share my code below and you'll notice the different ways I tried to go about it. Based on my set up, can someone suggest the best way to approach this problem? export class Preloader extends Phaser.State { preloadBar: Phaser.Sprite; background: Phaser.Sprite; ready: boolean; preload() { this.background = this.add.sprite(0, 0, 'preloaderBackground'); // Set-up our preloader sprite this.preloadBar = this.add.sprite(150, 370, 'preloadBar'); this.load.setPreloadSprite(this.preloadBar); // Load our level1 assets //character and enemy spritesheets this.load.spritesheet('dog', 'images/dog.png', 48, 32, 28); this.load.spritesheet('loca', 'images/locaspritesheet.png', 48, 48, 3); // First we load our map data (a json file exported from the map editor Tiled) this.load.tilemap('example', 'images/tilesheet_platforms.png', 'maps/level1.json', Phaser.Tilemap.JSON, null); //this.load.text('level1data', 'images/level1.json'); //this.load.tileset() isn't in the phaser.d.ts file // Then we load the actual tile sheet image this.load.image('levelspritesheet', 'images/tilesheet_platforms.png'); //background for level1 this.load.image('background', 'images/background.png'); //mostly menu and music this.load.image('jalepenos', 'images/jalepenos.png'); this.load.image('titlepage', 'assets/titlepage.jpg'); this.load.image('logo', 'images/logo.png'); this.load.audio('music', ['audio/level1music.mp3'], true); this.load.spritesheet('simon', 'assets/simon.png', 58, 96, 5); this.load.image('titleScreen', 'images/titlescreen.png'); this.load.spritesheet('play', 'images/play.png', 150, 100, 3); this.load.audio('titleMusic', ['audio/salsa.wav'], true); this.load.bitmapFont('desyrel', 'fonts/desyrel.png', 'fonts/desyrel.xml'); }export class Level1 extends Phaser.State { background: Phaser.TileSprite; bg: Phaser.Tilemap; examplebg: Phaser.Sprite; layer: Phaser.TilemapLayer; music: Phaser.Sound; player: ChihuahuaWars.Player; state: Phaser.StateManager; create() { //this.bg = this.add.tilemap(0, 0, 'level1', true, 32, 32); // this.background = this.add.tileSprite(0, 0, 2400, 608, 'background'); //this.layer = this.add.tileLayer(not sure if I'm heading in the right direction); this.examplebg = this.add.sprite(0, 0, 'background'); this.world.bounds.setTo(0, 0, 2400, 608); this.music = this.add.audio('music', 1, false); this.music.play('', 0, 1, true); this.player = new Player(this.game, 130, 465); this.camera.follow(this.player); } update() { } }export class Game extends Phaser.Game { constructor() { super(800, 608, Phaser.AUTO, 'content', null); this.state.add('Boot', Boot, false); this.state.add('Preloader', Preloader, false); this.state.add('MainMenu', MainMenu, false); this.state.add('Level1', Level1, false); //this.state.add('Level2', Level2, false); //this.state.add('Congrats', Congrats, false); // this.state.add('GameOver', GameOver, false); this.state.start('Boot'); } }