jdeagle

Members
  • Content Count

    5
  • Joined

  • Last visited

About jdeagle

  • Rank
    Newbie

Contact Methods

  • Twitter
    jdeagle

Profile Information

  • Gender
    Male
  1. jdeagle

    game.debug.body issues.

    I'm using game.debug.body in my update() to debug the bounding box for sprites in my game. It draws the bounding box but doesn't clear the previous drawn box so I am left with a trail of boxes across the screen. This seems to effect all sprites. game.debug.body(this.masterSprite, 'rgba(255, 255, 0, 0.1)');I looked into the source and apparently there is a preUpdate function that is supposed to get called but it seems to only get called when game.debug.dirty === false yet only clears the canvas if dirty === true. preUpdate: function () { if (this.dirty && this.sprite) { this.context.clearRect(0, 0, this.game.width, this.game.height); this.dirty = false; } }, Is this a known issue? Is there something I need to do to force clearing the canvas for the debug? Update: Looks like manually clearing the canvas does the trick. I did the following: game.debug.context.clearRect(0, 0, this.game.width, this.game.height);game.debug.body(this.masterSprite, 'rgba(0, 255, 255, 0.5)');Having to do this manually works but phaser should do this by default. What good is it to NOT clear the previous debug graphics?
  2. I am loading a small tile map (created in tiled) and scaling it to be double the size to fill the screen. The scaling works but something is off with the tile layer scrolling. The tile layers scroll on the x axis as the player moves to the right but it stops short of the end of the level (meaning the player continues on but the tile layers stop scrolling short of the boundry). I suspect this is something with my bounds settings but I'm not getting anywhere adjusting settings. Even worse, the tile layers do not scroll at all on the Y axis. Has anyone had a similar issue or a possible fix? I figure its something with the world bounds, camera bounds and tile layer bounds but I'm not getting anywhere on my own. Any help would be appreciated. Canvas settings: width: 1024 height: 768 TileMap settings: Tile size: 32x32 height: 15 (480px) width: 468 (14976px) Screen settings game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.minWidth = 480;game.scale.minHeight = 260;game.scale.maxWidth = 768;game.scale.maxHeight = 576;game.scale.pageAlignHorizontally = false;game.scale.pageAlignVertically = false;game.scale.setScreenSize(true);Level Loader createMap : function (game) { // adding the "level" tilemap loaded it preloader state var map = game.add.tilemap("level"); $.each(map.tilesets, function (index, tileset) { map.addTilesetImage(tileset.name, tileset.name); }); // create tilemap layers var that = this, entitiesScale = 2, levelScale = 2, platformScale = 2; game.scaleFactor = { level : levelScale, platforms : platformScale }; $.each(map.layers, function (index, layer) { var mapLayer = map.createLayer(layer.name), speed = mapLayer.layer.properties.parallaxSpeed || 1; mapLayer.scrollFactorX = 0.5; mapLayer.name = layer.name; mapLayer.scale.setTo(levelScale, levelScale); //mapLayer.height = 1536; // doesn't seem to make a diff that.layers[layer.name] = mapLayer; if (layer.name === "ground") { mapLayer.resizeWorld(); } }); map.currentLayer = 2; map.widthInPixels = 32 * (468 * 2); map.heightInPixels = map.heightInPixels * 2; //game.camera.setBoundsToWorld(); game.camera.bounds.height = 1536; game.world.bounds.height = 1536; console.log("cam", game.camera.bounds.width, game.camera.bounds.height, game.world); return map;},Camera follow in player update function. game.camera.focusOnXY(this.masterSprite.x + offsetX, this.masterSprite.y + offsetY);
  3. jdeagle

    alphaMask from bitmapData

    Thanks for the tip with bitmapData.canvas. I think there is a issue with bitmapData.alphaMask. The masking works but it also shows the mask image where it should be transparent. I mocked a example based on the phaser example(http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask) and here is what I get. It looks like alphaMask doesn't understand how to display transparent pixels from the masked element. I'm going to try masking the mask with the src png but that seems like a costly/backward fix. Edit: Using Phaser 2.0.4 var testBMD = game.make.bitmapData(w, h);// "preloaderRingLoaded is the orange ring png// "test" is the example mask pngtestBMD.alphaMask('preloaderRingLoaded', "test");var sp = game.add.sprite(348, 221, testBMD);sp.width = w;sp.height = h;
  4. jdeagle

    alphaMask from bitmapData

    Does this only work if you are using the Canvas renderer?
  5. jdeagle

    alphaMask from bitmapData

    Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated. createPie : function (game, w, h) { console.log("create pie", w, h, this); var mask = game.add.bitmapData(w, w), bmd = game.add.bitmapData(w, w), canvas = bmd.canvas, context = bmd.ctx, size = 270, degreesToRadians = function (degrees) { return (degrees * Math.PI) / 180; }; var drawPie = function () { bmd.clear(); context.save(); var centerX = Math.floor(w / 2); var centerY = Math.floor(w / 2); var radius = Math.floor(w / 2); var startingAngle = degreesToRadians(270); var arcSize = degreesToRadians(size); var endingAngle = startingAngle + arcSize; context.beginPath(); context.moveTo(centerX, centerY); context.arc(centerX, centerY, radius, startingAngle, endingAngle, false); context.closePath(); context.fillStyle = 'rgba(0, 0, 0, 1)'; context.fill(); context.restore(); bmd.render(); }; drawPie(); game.cache.addBitmapData("loaderMaskBMD", bmd); var maskImage = game.add.image(348, 221, bmd); console.log("maskImage", maskImage); // doesn't work //game.cache.addImage("loaderMaskImage", maskImage); game.load.onFileComplete.add(function (progress) { console.log("load", progress); size = (360 / 100) * progress; drawPie(); }); // doesn't work //mask.alphaMask('preloaderRingLoaded', maskImage); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); var sp = game.add.sprite(348, 221, mask); sp.width = w; sp.height = h; console.log("sp", sp);},