Search the Community

Hello. I have never used external fonts in phaser. I have no idea on how to use fonts I find over the internet. I would like to write with this font. I just don't get it how to do it. The file you download is a png.? Can someone help me? I searched but didn't understand what to do...

Hey, all! I am new to game development and need some fonts in bitmap form. Can anyone take me to a site or program that takes OpenType fonts and converts them to bitmap? Thanks in advance!

Hi guys, Started using phaser recently for a game I am making. The only thing is, I'm trying to use a different (custom) font, something like this: https://www.google.com/fonts/specimen/Press+Start+2P Unfortunately I cannot get the font to work. I have two font files - a .png file and a .xml file (xml with config) generated by the 'littera' font generator from a .ttf file. Here is a demo I threw together to demonstrate my issue. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create , preload: preload});function preload() { // Load the font game.load.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() { // Add a one second delay so that the font can load properly game.time.events.add(Phaser.Timer.SECOND, doSomething, this);}function doSomething() { // Render the text var text = "- phaser -\n with a sprinkle of \n pixi dust."; var style = { font: "65px Pixel", fill: "#ff0044", align: "center" }; var t = game.add.text(game.world.centerX-300, 0, text, style);}Any help appreciated, I'm sure I'm being really stupid but it's quite important to have the right font. I have attached the font files so that you can test the font with your solution if you want. Thanks, Matthew pixel.xml

Hello! I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality. I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet. Thank you!

How can i enable input for bitmap

Hi, I'm making a dismemberment function of a sprite (human) when it died. This is how i see it : Get 6 bitmap (pooled) Copy with copyRect part of the sprite's texture (legs, torso, ...) and eventually resize these bitmaps Get 6 Image (pooled) and apply theses different textures Play some tweens to make parts fly randomly When tweens finished, free the 6 bitmaps and 6 image ( return to pool queue) Do you have any advices ( performance, ...) about this way ? Thanks

Hello, please help. Can I put sprites with children in the bitmapdata? I'll attach the picture, is this possible and how? Thank you.

I have been haven some problems trying to replace a image in an existing Object. I have a example of the code I am using to do this.. The background image loads and shows on the canvas fine.. But when I call the handleReplaceImage function it doesn't replace the existing image, but adds the new image so I get the old and the new both in the same CreateJS Object.. So on the canvas I see two Slate Holes when it should be just the new one. So its overlaying.. How do I total replace SlateHole1.png with SlateHole2.png? Or remove SlateHole1.png from the CreateJS Object? I guess both would be worth knowing if anyone can help... var SlateHole=null; function init(){ stage=new createjs.Stage("Canvas"); createjs.Touch.enable(stage); var SlateHoleSrc=new Image(); SlateHoleSrc.src="images/SlateHole1.png"; SlateHoleSrc.onload=handleSlateHoleLoad; } function handleSlateHoleLoad(event){ SlateHole=new createjs.Bitmap(event.target); stage.addChild(SlateHole); stage.update(); } function handleReplaceImage(event){ var SlateHoleSrc=new Image(); SlateHoleSrc.src="images/SlateHole2.png"; SlateHoleSrc.onload=handleSlateHoleChange; } function handleSlateHoleChange(event){ SlateHole.image=event.target; stage.update(); }

Hi guys I am creating interface elements using sprite images. Not sure if this is best practice, open to suggestion. For example; at the moment a have large image for an input field which is fine and it works. ------------------------------------ | | ------------------------------------ However now i need nearly the exact same sprite just half the width for a small input field. -------------------- | | -------------------- So the middle of the sprite is actually the same but the corners can't be stretched as I would like to maintain the same corner radius I don't really want to create a seperate sprite for each of the corners unless you think that is best. So what I really want is to be able to create a very small sprite. --- | | --- And stretch the center pixel horizontally. However as I have said this may be far away from what is the best way to achieve this, so let me know! Thanks!

Hello, I just want to share with you my solution to process some image operation on a sprite with animation. Note that I am working on Typescript so, you maybe have to transpile this code in pure javascript. I created a class that extend Phaser.Sprite. In this class after initializing the sprite : - i create a bitmap, that will not be added to the world, a the size of the spritesheet image and load the spritesheet image in the bitmap - i load this bitmap as a textureAtlas then I load the texture. To change color I modify the bitmap, then reload the terxture as Atlas an reload texture. (it is possible to set a different texture key in order to keep old state) As operating transformation on bitmap may be costly, it may be preferable to pre-run these transformations. class PlayerSprite extends Phaser.Sprite { private frameData: any; private bitmapBrother: Phaser.BitmapData constructor(key: string, position: Phaser.Point, game: Phaser.Game) { super(game, position.x, position.y - 32, null); this.createBitMap() .loadBitmapAsTextureAtlas() .loadTexture('heroes-sprites'); this.animations.add("down", ["sprite1", "sprite2", "sprite3"], 5, true); this.animations.add("left", ["sprite13", "sprite14", "sprite15"], 5, true); this.animations.add("right", ["sprite25", "sprite26", "sprite27"], 5, true); this.animations.add("up", ["sprite37", "sprite38", "sprite39"], 5, true); this.animations.add("stand-down", ["sprite2"], 5, true); this.play("stand-down"); } createBitMap() { let game = this.game; let cache = game.cache; let cacheSpriteSheet: any = cache.getImage('heroes-sprites', true); let bitmapBrother = game.add.bitmapData(cacheSpriteSheet.width, cacheSpriteSheet.height); this.bitmapBrother = bitmapBrother; this.frameData = cache.getJSON('heroes-sprites-atlas'); bitmapBrother.load('heroes-sprites'); return this; } loadBitmapAsTextureAtlas(prefix?) { this.game.cache.addTextureAtlas('heroes-sprites' + prefix, '', this.bitmapBrother.canvas, this.frameData, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); return this; } modifiyBitmap() { this.bitmapBrother.shiftHSL(0.1); return this; } changeColor() { this.modifiyBitmap() .loadBitmapAsTextureAtlas('changed') .loadTexture('heroes-sprites' + 'changed'); } }

We adapted some code we found for a "pie progress" tracker found on these forums. It works great in Chrome, but on Safari (both desktop and mobile), if you try to force Phaser.CANVAS mode, the bitmap data is not drawn. Is there something we are doing wrong? Or is this a bug? Check out our fiddle below: http://jsfiddle.net/mnj0vteL/1/ - Canvas mode - it doesn't draw the circle (in Safari) http://jsfiddle.net/uxujy4pu/ - WebGL mode - it draws the circle everywhere We cannot use WebGL because on mobile safari it is not performant (avg 15fps vs canvas which gets 60fps)

Hi all, I'm trying to create a coin counter in my game, using a bitmap font. Everything displays fine, and the counter works, however when a player collects a new coin, rather than replacing the '0' with a '1', it shows a '1', but underneath you can still see a '0' visibly. I've tried several work around methods, including even doing an if statement checking how many coins and replacing it with plain text rather than replying on the var count, and using coinText.updateText();. Does anyone have any ideas? I'll leave my code sample below. var crystalCount = 0; var coinText; //Skip down to the update section coinText = this.game.add.bitmapText(20, 10, 'carrier_command', "Crystals:" + crystalCount, 12); coinText.updateText();

Greetings. I am working on a game where the player needs to able to collide with a bitmap. The way to check for collision would be using the bmd method "getPixel()". To simplify things lets imagine the player as a 2d square. I think the best approach would be to create 4 collision rects around the player that would constantly check for a pixel inside of them that has certain properties. In that case activate collision. However I don't know how I can implement this in a good way. Do I need to check for every pixel between rect.X + rect.width for example?

I'm relatively new to Phaser, but up until now I have found everything to work as expected. I'm trying to develop a Worms clone (just for fun) and i'm basing most of my code on the following tutorial :http://phaser.io/tutorials/coding-tips-001 The problem is, I can't get my worms (group) to collide with the land (bitmapdata converted into a sprite) Here is my create() create: function() { //create background first this.background = this.game.add.sprite(0,0,'background'); //start the physics system this.physics.startSystem(Phaser.Physics.ARCADE); //create land this.createLand(); //create worms this.createWorms(); } and createLand() createLand: function(){ //create the land bitmap data this.landBmp = this.add.bitmapData(1500,1000); this.landBmp.draw('land1'); this.landBmp.update(); //convert to sprite landBmp -> land this.land = this.game.add.sprite(0,0,this.landBmp); //enable physics on land sprite this.physics.arcade.enable(this.land); this.land.body.allowGravity = true; this.land.body.immovable = true; } createWorms() createWorms: function(){ this.worms = this.game.add.group(); this.physics.enable(this.worms,Phaser.Physics.ARCADE); for (var i = 0; i < 10; i++) { //calculate team and select name var team = i % 2; var name = names[Math.floor((Math.random() * names.length -1))]; //create a worm var worm = this.worms.create(land1SpawnPoints[i].x,land1SpawnPoints[i].y,'sprites'); worm.team = team; worm.name = name; worm.health = 100; //enable physics for the worm this.physics.arcade.enable(worm); worm.body.gravity.y = 200; worm.body.bounce = 0.3; worm.body.velocity.x = 1; //animations worm.animations.add('idle' , Phaser.Animation.generateFrameNames('worm_idle',1,1),5,true); worm.animations.add('move' , Phaser.Animation.generateFrameNames('worm_walk',1,3),5,true); //add the worm to worms group this.worms.add(worm); } }, and in my update function i'm calling this.physics.arcade.collide(this.worms,this.land); //NOTE: this function works , and by works, I mean - // //The function this.test will be called when a worm overlaps with the land sprite //this.physics.arcade.overlap(this.worms, this.land, this.test, null, this); When I run my code with physics.arcade.collide it doesn't trigger any callback function and the worms just fall through the ground. However if I use the overlap function , a callback function is triggered. If anyone could point me in the right direction as to what is going wrong I would be very grateful. Edit: Even if you could tell me how I can programmatically stop my worms from falling through the ground . For example, the following function would be called when a worm overlaps with the ground. test : function(worm, land) { //code goes here to prevent worm falling further },

I'm new with Phaser wanting to make a simple games with geometries like this one: http://shape.enclavegames.com I see the `.graphics()` and `bitmapData` are the ways to create vector geometries what's different between them? How about the performance comparing to using image?

Hi everyone, I am making an app with Phaser and the Intel XDK. I tried to implement some simple lighting and found a simple example online. As a reference: https://jsfiddle.net/dceq2vsu/1/ It works as expected on desktop, it also works in the mobile browser, but the shadow overlay does not show, if I compile it as an app. Is bitmap not working well on mobile phones?

I have a simple coloring book app, and I want to give the user the option to save what they've drawn to their computer. Within the app, the drawing is done on a bitmapData object. Is this at all possible? Thanks, Sam

How to change the Bitmap text color? this.text = new PIXI.BitmapText('example', {font: "16px nbp", align: "left"});We need to use any filters? Or use a mask?

Demo I made a small example for the use BitmapData to smoke animation... preload: function () { var me = this; me.load.image('face', 'assets/face.png'); me.load.image('frame', 'assets/frame.png'); me.load.image('smoke', 'assets/smoke.png'); } create: function () { var me = this; me.sizeX = 198; me.sizeY = 249; me.particleCount = 30; me.seed = Date.now(); me.random = new Phaser.RandomDataGenerator([me.seed]); me.bmd = me.make.bitmapData(me.sizeX, me.sizeY); me.bmd.smoothed = false; me.face = me.make.image(0, 0, 'face'); me.mask = me.add.graphics(0, 0); me.mask.alpha = 0; me.mask.beginFill(0xFFFFFF); me.mask.drawEllipse(me.world.centerX, me.world.centerY, 120,140); me.particle = me.make.image(0, 0,'smoke'); me.particle.anchor.setTo(0.5,0.5); me.particles = []; for (j = 0; j < me.particleCount; j++){ me.particles [j] = { x: me.random.integerInRange(0,me.sizeX), y: me.random.integerInRange(0,me.sizeY), velocityX: me.random.realInRange(-2,2), velocityY: me.random.realInRange(-2,2) } } me.mirror = me.add.image(me.world.centerX, me.world.centerY, me.bmd) me.mirror.anchor.setTo(0.5, 0.5); me.frame = me.add.image(me.world.centerX, me.world.centerY, 'frame') me.frame.anchor.setTo(0.5, 0.5); me.mirror.mask = me.mask; me.time.events.loop(Phaser.Timer.SECOND/24, me.updateSmoke, me); }, updateSmoke: function() { var me = this; var rect = new Phaser.Rectangle(0,0,me.sizeX, me.sizeY); me.bmd.copyRect(me.face, rect, 0, 0, 0.5); for (j = 0; j < me.particleCount; j++){ me.particles[j].x += me.particles[j].velocityX; me.particles[j].y += me.particles[j].velocityY; if (me.particles[j].x >= me.sizeX) { me.particles[j].velocityX = -me.particles[j].velocityX; me.particles [j].x = me.sizeX; } else if (me.particles[j].x <= 0) { me.particles[j].velocityX = -me.particles[j].velocityX; me.particles[j].x = 0; } if (me.particles[j].y >= me.sizeY) { me.particles[j].velocityY = -me.particles[j].velocityY; me.particles[j].y = me.sizeY; } else if (me.particles[j].y <= 0) { me.particles[j].velocityY = -me.particles[j].velocityY; me.particles[j].y = 0; } me.bmd.draw(me.particle, me.particles[j].x, me.particles[j].y); } }

hi guys i want to know if there is a way in phaser to know if the mouse pointer is over a sprite/bitmap? i have a bitmapdata containing a sprite on it, it is rotating and moving in the screen this is the hardest part!! thanks in advance

hi there i got an idea for a game, but i need to figure it out how to program it. what if i have a window asset and i want to clean it using the mouse? it is possible using phaser? how i can clean it and know how mmany percentage of the window is clean?

We have an immediate requirement for an animator/artist to repurpose a large amount of flash vector graphics and animations into bitmap animations for use in HTML5 (spritesheets/texture atlases) There’s a lot of min-games that need converting – approximately 300 (TBC). The original flash anims were authored over a period of about 10 years or so and there’s multiple authors, so styles vary a lot. The activities/games are all very simple, but because of the nature of the players they tend to have large graphics. Some things we’re particularly looking for: Essential skills:FlashPhotoshopDesirable skills:dragon bones/spriter/other skeletal animation system experienceZoeTexture PackerGit/BitbucketNice to have CreateJSPixi.jsunderstanding of HTML5 game development processesexcellent knowledge of creating artwork in Flashmust be able to create optimised sprite sheets from existing flash assets within tight specificationsknowledge of mobile and html5 restrictions

hi, sorry, but I'm really frustated, at least I know, it's possible to make a batching of your sprites, if you make from the same texture, this will can count as one single draw call, but how you can do that?, (I don't mean to convert all tiles to bitmap), I mean for example, I have an spritesheet of four objetcs, it;s same texture, so I can draw four and count only as a one draw call, or more simple, just draw the same object, don't be count as only one draw call?, someone know something about this?? i'm really need to know this thanks!!!

I'm drawing a line from one game pointer to another using bitmap data and it works pretty well, however I'm trying to enable a body and have it collide with another object. The bitmap line immediately takes up the entire screen, allowing no space for anything else to move. Using overlap instead of collide doesn't help either. Is there a better way to approach this, where only the drawn pixels are treated as the body? Thanks for any help! draw(){ let gameX = game.globals.SAFE_ZONE_WIDTH * 0.5 let gameY = game.globals.SAFE_ZONE_HEIGHT * 0.5 this.line = game.add.bitmapData(gameX*2 ,gameY*2); this.spriteLine = game.add.sprite(0, 0, this.line); game.physics.enable(this.spriteLine, Phaser.Physics.ARCADE);},drawLine(){ this.line.clear(); this.line.ctx.beginPath(); this.line.ctx.strokeStyle = "white"; this.line.ctx.lineCap = 'round'; this.line.ctx.moveTo(10, 10); this.line.ctx.lineTo(game.input.x , game.input.y); this.line.ctx.lineWidth = 12; this.line.dirty = true; this.line.ctx.stroke(); this.line.ctx.closePath(); this.line.render();},update(){ game.physics.arcade.collide(createBall.ball, createLine.spriteLine, this.gameFail, null, this); if (game.input.pointer1.isDown && game.input.pointer2.isDown) { createLine.drawLine(); } else { createLine.destroyLine(); }}

Hi game devs! I produce 2d graphics and sell it on microstocks. If you need 2d assets for really small money please check my folio here or my facebook page here Thanks!