dnassler

Members
  • Content Count

    24
  • Joined

  • Last visited

About dnassler

  • Rank
    Member

Contact Methods

  • Twitter
    @dnassler

Recent Profile Visitors

1027 profile views
  1. It is unavoidable to have extra space on some sides of some devices when your "safe zone" (expected/designed-for game size) aspect ratio differs from the device's. You could handle it by changing the background color of the HTML so that it isn't white (maybe some other color that would be less of a problem?)... The way that I handled it was to in addition to using a "safe zone" to also detect that actual device's aspect ratio in javascript and then programmatically add in extra game space to the safe zone width OR height and had to alter the game to not put anything important in the space outside of the safe space. But to put something there if the game detects that there is more space on the sides or top/bottom than was primarily designed for. I know it a bit tricky. var w = window.innerWidth ;//* pixelRatio, h = window.innerHeight ;//* pixelRatio;var lw, lh; //landscape width/height in pixelsif ( h > w ) {lw = h;lh = w;} else {lw = w;lh = h;}var aspectRatioDevice = lw/lh; var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;var extraWidth = 0, extraHeight = 0;if (aspectRatioSafeZone < aspectRatioDevice) {// have to add game pixels horizontally in order to fill the device screenextraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;} else {// have to add game pixels verticallyextraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;} //var game = new Phaser.Game( (h > w) ? h : w, (h > w) ? w : h, Phaser.CANVAS, 'game_div');//var game = new Phaser.Game( SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.AUTO, 'game_div');var game = new Phaser.Game( SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game_div');
  2. I just found a way! Thought I would share... With help from another post related to dynamic image creation I was successful by doing the following: in the game loader I created a bitmapData object and drew to it using the bitmap context drawing methods then got the bitmap data's canvas and from that did a toDataURL... then did a game.load.spritesheet with the dataURL as if it was an image file. var dataURL, bmd, ctx, width, height;width = 100;height = 100;bmd = game.add.bitmapData( width * 2, height );ctx = bmd.context;bmd.clear();ctx.fillStyle = "#2E8B57";ctx.fillRect(0,0,width,height);ctx.fillStyle = "#FFFFFF";ctx.fillRect(0,0,width/2,height/2);ctx.fillRect(width/2,height/2,width/2,height/2);ctx.fillStyle = "#2E8B57";ctx.fillRect(width,0,width,height);ctx.fillStyle = "#FFFFFF";ctx.fillRect(width+width/2,0,width/2,height/2);ctx.fillRect(width,height/2,width/2,height/2);dataURL = bmd.canvas.toDataURL();game.load.spritesheet('myDynamicSpritesheet', dataURL, width, height);The above creates a spritesheet of 2 frames dynamically... of a box composed of smaller green and white boxes.
  3. Hi, I'd like to programmatically create a sprite animation rather than have to create a spritesheet and load it. Is there a way of doing that? Basically I want to be able to create a bitmap data object and draw to it then have it treated as a set of frames that I could use to play animations from.
  4. I wonder what I could be doing wrong... I just tried going to a different computer and doing a git clone of phaser-examples: git clone https://github.com/photonstorm/phaser-examples.git then running the example for scale a sprite. Confirmed that it worked. Then modified it by starting the ARCADE system and enabling it for the sprite in the example and setting the scale of the sprite to something other than 1,1. I see different behaviour depending on if I do a sprite.scale.setTo(2,2) or .setTo(1,2) for example. The .setTo(1,2) causes the sprites to all move up whereas the .setTo(2,2) causes the sprites to move up and to the left. I will paste the exact code below... I wonder what is wrong? At the top of the example page it shows that it is using Phaser Version: 2.0.2 var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create});function preload() { game.load.image('disk', 'assets/sprites/darkwing_crazy.png');}function create() { game.physics.startSystem(Phaser.Physics.ARCADE); for (var i = 0; i < 15; i++) { // Create 15 sprites at random x/y locations var sprite = game.add.sprite(game.world.randomX, game.world.randomY, 'disk'); // Pick a random number between -2 and 6 var rand = game.rnd.realInRange(-2, 6); // Set the scale of the sprite to the random value game.physics.enable(sprite,Phaser.Physics.ARCADE); sprite.anchor.setTo(0.5,0.5); sprite.scale.setTo(1, 2); // You can also scale sprites like this: // sprite.scale.x = value; // sprite.scale.y = value; } }
  5. I'm getting problems with sprite scaling as well... Problems that did not exist in older versions (prior to 2.0). Create a sprite like so: var s = game.add.sprite(x,y,"mysprite");s.scale.setTo(2,2);... the above works and does what the Phaser example does (the example called "Scale A Sprite") which also works. However, there are issues if you scale it when the sprite has a non-default anchor and is part of the ARCADE physics: game.physics.startSystem(Phaser.Physics.ARCADE);var s = game.add.sprite(x,y,"mysprite");game.physics.enable(s, Phaser.Physics.ARCADE);s.anchor.setTo(0.5,0.5);s.scale.setTo(2,2);Apart from the above, I've tried and succeeded in showing a problem with scale just by modifying the "Scale A Sprite" Phaser example by adding the physics engine and anchor and sprite scaling. Unless I'm insane that is!
  6. dnassler

    Center BitmapText

    I really hope that anchor comes back to bitmap text
  7. Try changing: rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', function() {this.light_click(i, j)}, this));...to: rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', (function(x,y) {this.light_click(x, y)})(i,j), this));and you can refer to this site (look for the part that discusses "Closures Inside Loops"): http://bonsaiden.github.io/JavaScript-Garden/
  8. See my post at the bottom of this link: http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/ You just can choose your resolution then set Phaser to Scale show all basically. The only thing is that there will be black bars on devices that have different aspect ratios from your chosen game ratio. There are ways around that. I'm not sure of the best way to solve the black bar issue is though. But you can have a look at the link to see how to query for the device size. There are a few ways but in the index.html you can just ask for: window.innerWidth window.innerHeight and multiply these numbers by: window.devicePixelRatio
  9. I would be interested in seeing an example of exactly how you did it when you do...
  10. Fullscreen behaviour .... I don't think I'm an expert but have figured out a few things in the last month... see: http://www.html5gamedevs.com/topic/4462-full-screen-confusion/#entry27686 I tried calling game.stage.scale.startFullScreen() in the game create method and it didn't work (phaser 1.6). But it does work (on desktop/laptop browsers) if it is done afterwords like from a callback from a keyboard event. Maybe a timer callback would work too although I have not yet tried that. But it has no effect for mobile as far as I see (just look at the link above for mobile suggestion at least for iOS). As far as forcing orientation goes I cannot help you with that yet as I've not been too worried about that for webApps at least. I figured I'd let the user flip the phone until it looks good! But I did try to create a Phonegap APP from my game and when doing that used Apple's XCode environment to set the orientation as one of the build settings.
  11. I don't think that whether Phaser supports multi-cameras or not has any relevance to your question. And I don't understand what relevance the reference above to "render texture" has to your question (sorry if I'm just too dumb). But I think some others above have said (i.e. Mariusz) that it is possible and I would agree. Because: Each player is on a seperate computer on a seperate browser using it's own Phaser environment, right? Each of those browsers has a Phaser.Game (and camera with it). Each browser uses sockets or whatever to send messages back and forth to communicate the locations of the players (or whatever other states are needed to be shared). It is only the messaging between the seperate browsers (players) that makes it become multiplayer.
  12. The javascript error reported when the call to game.add.bitmapText is made was: Uncaught TypeError: Cannot read property 'size' of undefined Which probably just means that the font was not really loaded by my game.load.bitmapFont command... Unfortunately without reporting an error at that point as I would hope. Anyways! After trial and error, exhaustively, wasting too much time doing so... I have figured out the problem(s)... First of all that Bitmap font creation tool from the link given above exports the XML file with a ".fnt" file extension. Which is not good. So I modified the file extension to be ".xml" since it was an XML file. Second of all as was stated by others above, the "key" specified in the game.load.bitmapFont method is not used for anything else... (i.e. not to be used when specifying the font style) Thirdly, the font that I was creating a bitmap for had a name of "Press Start 2P". Notice the spaces in the name? Well that turned out to be another issue. I had to manually change the font name as specified in the font.xml file so that it was "PressStart2P". Fourthly, I had to make sure that the font style used when calling the "game.add.bitmapText" method referred to the font as "PressStart2P" which matched exactly the name of the font that is in the xml and which is what I had to change it to (after removing the spaces in the name). Wow. I knew it would be a hassle and it was! But at least I've got it finally!!!!! This should be in the example documentation comments. EDIT: Another issue or at least difference between setting the value of the text when the text is bitmap text vs. non-bitmap text is: When calling: textGameObject.setText( value )where "textGameObject" is a bitmapText object created with something like: textGameObject = game.add.bitmapText(x,y,"",style);Make sure that the "value" is a string otherwise the setText method does not seem to work. So if for example your setText method was updating a bitmapText object that holds the player's score (i.e. a number) convert the score to text before passing it to the setText method. Note that this differs from the behaviour of setText when the textGameObject is a non-bitmapText object.
  13. Hi, I tried using the tool above to create a bitmap font from a downloaded web font from google. The tool allows you to export the resulting bitmap font as a zip file. I unzipped the zip file which resulted in 2 files. One of them is font.png and the other is font.fnt. I tried to load the bitmap font using the appropriate command in the preload function of the game as follows: game.load.bitmapFont('PressStart2P','assets/fonts/fontBitmap_Press_Start_2P/font.png', 'assets/fonts/fontBitmap_Press_Start_2P/font.fnt');then in the create part of the game I tried to create a style var: var style = { font: "50px PressStart2P", fill: "#ff0044", align: "center" };gameOverlayText = game.add.bitmapText( game.world.centerX, game.world.centerY, "test", style );When I run it I get a browser error at the line that is adding the bitmapText... So how did you guys get it to work? What commands am I not doing properly?
  14. I read somewhere recently that suggested there would be a way to invoke proper full screen using a browser in iOS but not until iOS 7.1 is released... But here's the good news... I too read that it was not possible but look right here folks!!!! http://stackoverflow.com/questions/19710014/ios-7-go-into-full-screen-mode-add-to-home-screen-button It is NOT ideal but it provides a way to make it go full screen... Basically add the following meta tag to the HEAD html as follows: <meta name="apple-mobile-web-app-capable" content="yes">Then open the web page on the iOS mobile device using Safari browser. Then add this page to your "home screen" (you do that by clicking on the box with the arrow pointing out which is at the top of the safari browser window... then look for the icon that says "Add to Home Screen"). Next close the safari window. Then look at your iOS App icons and you will see your new addition... An icon that is basically a shortcut to the web page we just visited. Now click on that icon. Enjoy the fullscreen experience! I just tried it now after looking all over the place and finally found this suggestion which works (for now)... I think I read somewhere that there are changes coming that might invalidate this solution in some future Apple update. Hopefully that won't occur until they provide another way. I think in the future there will be another meta tag (maybe available in iOS7.1) that will work going forward (but not yet) which is, I think: <meta name="mobile-web-app-capable" content="yes">So just add both meta tags and hopefully you'll be covered now and in the future? Hopefully.
  15. I thought I'd add my 2 cents to let others know what I tried and found I liked the behaviour of. Basically deciding on and setting a fixed game size and telling Phaser to scale and rescale appropriately (how I like it done at least). I tried various possibilities and ended up with a viewport meta tag in my HTML as follows: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />and specified the game init call to use a particular pixel width and height... const SAFE_ZONE_WIDTH=1200;const SAFE_ZONE_HEIGHT=900;var game = new Phaser.Game( SAFE_ZONE_WIDTH, SAFE_ZONE_HEIGHT, Phaser.AUTO, 'game_div');and in the game's create method I've got... game.stage.fullScreenScaleMode = Phaser.StageScaleMode.SHOW_ALL;game.stage.scale.setShowAll();game.stage.scale.pageAlignHorizontally = true;game.stage.scale.pageAlignVeritcally = true;game.stage.scale.refresh(); I've also added some javascript to monitor the resizing of the window so that the game gets scaled appropriately as the window is resized... window.addEventListener('resize', function(event){ resizeGame();});var resizeGame = function () { game.stage.scale.setShowAll(); game.stage.scale.refresh();}