Search the Community

Showing results for tags 'bitmap'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 30 results

  1. Stretch the center of a sprite

    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!
  2. Change sprite animation color

    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);"stand-down"); } createBitMap() { let 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?) {'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'); } }
  3. 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: - Canvas mode - it doesn't draw the circle (in Safari) - 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)
  4. 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 =, 10, 'carrier_command', "Crystals:" + crystalCount, 12); coinText.updateText();
  5. How to use bitmap fonts in phaser?

    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...
  6. Check collision with bitmap?

    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?
  7. 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 : 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 =,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 =,0,this.landBmp); //enable physics on land sprite this.physics.arcade.enable(; = true; = true; } createWorms() createWorms: function(){ this.worms =; 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'); = team; = name; = 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,; //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.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 },
  8. I'm new with Phaser wanting to make a simple games with geometries like this one: 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?
  9. Bitmap on mobile / Lighting effects

    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: 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?
  10. Save bitmap to disk

    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
  11. How to change the Bitmap text color?

    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?
  12. 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 =; 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 =, 0); me.mask.alpha = 0; me.mask.beginFill(0xFFFFFF); me.mask.drawEllipse(,, 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.bmd) me.mirror.anchor.setTo(0.5, 0.5); me.frame = me.add.image(,, 'frame') me.frame.anchor.setTo(0.5, 0.5); me.mirror.mask = me.mask;, 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); } }
  13. 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
  14. erase bitmap using the mouse

    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?
  15. 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
  16. 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!!!
  17. touch based bitmap data collision

    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(); }}
  18. Royalty-free 2D graphics

    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!
  19. Bitmap fonts not loading

    Hi, Just started using phaser for a little game I am making. I am most of the way through production but I can't seem to get a different font to load. I have two files - a png containing the actual images, and an xml file with their locations. I used the littera tool online to convert a .ttf file I found into these two files, but I'm not too attached to that specific font - something like this is what I am aiming for: Anyway, here's a little demo I threw together to showcase this, so here is the code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create , preload: preload});function preload() { // Load the font from 'assets' folder. game.load.bitmapFont('Pixel','assets/pixel.png', 'assets/pixel.xml');}function create() { // So that the font can load properly., doSomething, this);}function doSomething() { // Create 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(, 0, text, style);}I'd appreciate any help you can give, I'm sure I'm not doing something properly. Thanks, Matthew
  20. Fonts not working properly

    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: 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, 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(, 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
  21. How to get color in a tilemap.

    I have the following code. var color = bitmap.getPixel32(Math.round(nodes.x),Math.round(nodes.y)); Now I want to implement the same thing in Tilemap instead of bitmap! I tried var color = tilemap.getPixel32(Math.round(nodes.x),Math.round(nodes.y)); but didn't work. Any idea?
  22. Container problem with bitmapped text

    Hi, this is the code: Score = game.Class.extend({ init : function() { this.container = new game.Container(); this.container.position.x = 0; this.container.position.y = 4 * game.system.height / 5; this.img = new game.Sprite('hit', 0, 0, { anchor : { x : 0.5, y : 0.5, } }); this.img.position.x = game.system.width / 2 - this.img.width / 2; this.img.position.y = 140; this.textBox = new ScoreText('0', 0, 0, 1); this.container.addChild(this.textBox); this.container.addChild(this.img); game.scene.stage.addChild(this.container); }, }); This gives me following errors: TypeError: child.setStageReference is not a function child.setStageReference(stage); TypeError: this.children.updateTransform is not a function this.children.updateTransform(); (repeatedly) What have I done wrong? Regards!
  23. I'm trying to make it to where the user can draw lines on the screen, with a bitmapData object. When I try to draw on the screen, I get a 404 error, and I'm not sure why. Any help is appreciated! Here's my code: var game= new Phaser.Game(720,1000,Phaser.CANVAS, 'game_div');var play={ preload: function() { = Phaser.ScaleManager.SHOW_ALL;; game.scale.refresh();'nope','assets/wrong.png'); }, create: function() {,1000); this.ctx=this.bmd.context; this.ctx.setLineWidth(5.0); this.ctx.setFillColor(255,0,0,0);,0,this.bmd);'#ab54c1';, true, 'nope'); }, update: function() { if( { this.ctx.lineTo(,; } }}game.state.add('play', play);game.state.start('play');
  24. Probelm with bitmap

    Below there is my code, 'where' gesture is an instance of a class that contain a bitmap. <html> <head> <title>Game</title> <script type="text/javascript" src="js/dollar.js"></script> <script type="text/javascript" src="js/phaser.min.js"></script> <script src=""></script> <script src="js/gesture.js"></script> </head> <body> <script> var w = window.innerWidth * window.devicePixelRatio,h = window.innerHeight * window.devicePixelRatio; var game = new Phaser.Game(w, h, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); var platforms,gesture,ground; var solidH = 100,solidW = 100; var bmd; function preload() { /*Imposta limiti di risoluzione 2048x1536 retina display */ game.scale.maxWidth = 1920; game.scale.maxHeight = 1080; /*Vogliamo scalare fino a quando possibile, ma proporzionalmente*/ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setScreenSize(); game.load.image('forest', 'assets/bksprite.png'); game.load.image('ground', 'assets/solid.jpg'); } function create() { platforms =; platforms.enableBody = true; ground = platforms.create(0, - solidH, 'ground'); //adesso creiamo il ground ground.body.immovable = true; // questo impedisce la caduta del ground ground.body.collideWorldBounds=true; bmd = game.add.bitmapData(w,h); bmd.context.fillStyle = '#00CCFF'; bmd.context.fillRect(0,0,w,h); bmd.context.fillStyle = '#FFFFFF'; background = game.add.tileSprite(0, 0,w,h,bmd); } var k=10; function update() { bmd.context.fillStyle = '#FFFFFF'; bmd.context.fillRect(k,10, 10, 10); k=k+10; } function render(){ } </script> </body> </html> I don't understand because the square is drawn once. I obtain one white square at position x=10 y=10 and not a line.
  25. Pixelate Bitmap Text

    I am using a low-res bitmap font and I want to have it pixelated. Is it possible to change the scalemode from the font atlas to nearest scaling? Thanks in advance, Josh