• Content Count

  • Joined

  • Last visited

About Broojo

  • Rank

Contact Methods

  • Twitter

Profile Information

  • Gender
  • Location
  1. Broojo

    Crisp rendering on Safari 10.0, macOS.

    Thanks, I tried that but it is still blurry. The weird thing is that this JSFiddle displays the image clearly in Safari, all that is required is the 'image-rendering: pixelated;' CSS rule. The attached image shows the canvas in my game, that rule has been applied but it's not working. So it seems like something in Phaser is overriding it... EDIT: I fixed it by setting the game mode to be CANVAS rather than AUTO, no WebGL for this game
  2. I'm making a game that uses pixel art, I'm designing it so that the user can choose to display the game at various screen sizes while maintaining the correct aspect ratio, doubling the number of pixels, 1x, 2x, 3x etc. I've set the game to use crisp rendering: Phaser.Canvas.setImageRenderingCrisp(game.canvas); And set the game scale mode to SHOW_ALL to maintain the aspect ratio when resizing: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; I've also set the PIXI scale mode: PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; (I tried setting Phaser.Canvas.setSmoothingEnabled(game.context, false); but it gave me an error, never mind) However the game still looks smoothed when resizing the window in Safari on macOS Sierra, I tested it in chrome and the pixels are crisp as expected. I tried adding these CSS rules to my internal stylesheet: image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: optimize-contrast; image-rendering: pixelated; /* Awesome future-browsers */ -ms-interpolation-mode: nearest-neighbor; /* IE */ Again, to no avail. Does anyone know of a work-around for Safari? Thanks. This is for Phaser 2.6.1
  3. Broojo

    Tilesets, Tiled and Phaser Tilemaps

    Experience I guess, I have messed around with GBA graphics for many years now, produced quite a few Minish Cap tilesets. But yeah typically older 2D games have POT (power-of-two) textures of 16x16 or 32x32. There are some exceptions like Pokemon Mystery Dungeon for the DS which uses 24x24 sprites, a multiple of 8.
  4. Broojo

    Tilesets, Tiled and Phaser Tilemaps

    Personally, I create a grid using a pixel art program like Paint and align them all myself. May sound like a lot of work but once it's finished you can just keep adding to the grid. Here is an example of a 256x256 grid of 32x32 tiles: EDIT: Just thought I should also point out that the tile set you linked to is perfectly spaced out, it's just in 16x16 tiles. This is a common tile size for GBA and DS games.
  5. Broojo

    Poll - how old are html5 devs

    23, pretty new to HTML5 game development.
  6. Thanks for the response I Changed the sprite size to 32x32 and now it works fine.
  7. Call me crazy but I am attempting to create an RTS game using Phaser. One aspect I have finished to a reasonable level is the drawing of a rectangle to select units on the screen, like Age of Empires. The code works fine when using WebGL but for some reason when using the Canvas the lines of the rectangle are invisible but can be seen over the sprites they are drawn on top of as shown below: This is what it looks like in WebGL (more vibrant colours as well): This may be because the texture used for the selection box is 1x1 in size, however I just added another 1x1 sprite and it displayed just fine. (There are other sprites in the game such as units and the GUI). I use 4 sprites to draw the selection rectangle, I previously used shapes in the render() method but that should really just be used for debug purposes right? Plus, this method works well when drawing rectangles backwards. Another sprite is drawn on top of the rectangle to use for collision with units. In terms of the code, just for the selection box and grass underneath the following is used: function preload() { game.load.image('grass', 'assets/grass.png'); game.load.image('blackPixel', 'assets/blackPixel.png');}function create() { // Create the grass grass = game.add.tileSprite(0, 0, 1280, 800, 'grass'); grass.inputEnabled = true;, this);, this); // Create sprite for each side of selection box selectionLeft = game.add.sprite(0, 0, 'blackPixel'); selectionRight = game.add.sprite(0, 0, 'blackPixel'); selectionTop = game.add.sprite(0, 0, 'blackPixel'); selectionBottom = game.add.sprite(0, 0, 'blackPixel'); // Make selection box invisible selectionLeft.visible = false; selectionRight.visible = false; selectionTop.visible = false; selectionBottom.visible = false; // Set the selection lines width selectionLeft.width = 2; selectionRight.width = 2; selectionTop.height = 2; selectionBottom.height = 2;}function update() { // Update the size and position of the selection // only if it is visible. Only change the position // of the Right and Bottom lines. if (selectionLeft.visible === true) { selectionLeft.height = game.input.mousePointer.worldY - selectionLeft.y; selectionRight.height = selectionLeft.height; selectionTop.width = game.input.mousePointer.worldX - selectionLeft.x; selectionBottom.width = selectionTop.width; selectionRight.x = selectionLeft.x + selectionTop.width; selectionRight.y = selectionLeft.y; selectionBottom.x = selectionLeft.x; selectionBottom.y = selectionLeft.y + selectionLeft.height; } // Update the size and position of the sprite corresponding to // the rectangular selection selectionSprite.width = selectionTop.width; selectionSprite.height = selectionLeft.height; selectionSprite.x = selectionLeft.x; selectionSprite.y = selectionLeft.y;}function selectionDown () { // Make selection rectangle visible selectionLeft.visible = true; selectionRight.visible = true; selectionTop.visible = true; selectionBottom.visible = true; // If started selecting units, set top left coords. if (selectionStarted === false) { selectionLeft.x = game.input.mousePointer.worldX; selectionLeft.y = game.input.mousePointer.worldY; selectionTop.x = game.input.mousePointer.worldX; selectionTop.y = game.input.mousePointer.worldY; selectionStarted = true; }}function selectionUp() {// Make the selection lines invisible selectionLeft.visible = false; selectionRight.visible = false; selectionTop.visible = false; selectionBottom.visible = false; // Reset the selection position so it won't be intersected again selectionLeft.x = 0; selectionLeft.y = 0; selectionRight.x = 0; selectionRight.y = 0; selectionTop.x = 0; selectionTop.y = 0; selectionBottom.x = 0; selectionBottom.y = 0; // Make the width 2, because of reasons selectionLeft.width = 2; selectionLeft.height = 2; selectionRight.width = 2; selectionRight.height = 2; selectionTop.width = 2; selectionTop.height = 2; selectionBottom.width = 2; selectionBottom.height = 2;}If this code is not enough, the entire code for the "game" can be found here: Feel free to laugh at/critique the code, it's just boilerplate really at the moment, no other javascript files or anything.