Broojo Posted April 8, 2014 Share Posted April 8, 2014 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; grass.events.onInputUp.add(selectionUp, this); grass.events.onInputDown.add(selectionDown, 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: http://pastebin.com/Fsr1CXEU Feel free to laugh at/critique the code, it's just boilerplate really at the moment, no other javascript files or anything. Link to comment Share on other sites More sharing options...
rich Posted April 9, 2014 Share Posted April 9, 2014 I think the issue is your 1x1 pixel texture and the way canvas anti-aliases images by default when drawing them. You could try this:selectionLeft.smoothed = false;(and repeat on the other lines) But if that doesn't work try using a better / bigger texture. Link to comment Share on other sites More sharing options...
Broojo Posted April 16, 2014 Author Share Posted April 16, 2014 Thanks for the response I Changed the sprite size to 32x32 and now it works fine. Link to comment Share on other sites More sharing options...
Recommended Posts