Jump to content

Search the Community

Showing results for tags 'mouseinput'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 1 result

  1. Hi guys, I´m working on simple Connect-the-dots game (there are dots on the screen and you have to join them with mouse in order to get some image) and I´m trying to implement pencil, which will draw on canvas. I also need functionality where all what I´ve previously drawn will change the color when the image is complete, that means I need to preserve created data somehow. I´ve already tried multiple solutions I found here and around the internet, but nothing seems to work as I need. I´ve tried this: 1) Drawing with bitmapdata Basically this solution: http://phaser.io/examples/v2/bitmapdata/copy-bitmapdata, the problem is dots aren´t close enough each other when you move mouse fast and also I cannot access previously drawn data in order to change their color. 2) Drawing with Phaser.graphics this.game.input.onDown.add(this.startDrawing, this); this.game.input.onUp.add(this.stopDrawing, this); startDrawing: function(pointer) { this.drawing = true; this.graphics = this.game.add.graphics(); this.graphics.beginFill(); this.graphics.lineStyle(4, 0xFFFFFF); this.graphics.moveTo(pointer.x, pointer.y); this.game.input.addMoveCallback(this.onDraw, this); }, onDraw: function(pointer, x, y) { if (this.drawing) this.graphics.lineTo(x,y); }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.graphics.endFill(); this.game.input.deleteMoveCallback(this.onDraw, this); }, Here I`ve experienced some serious drawbacks. First, this solution doesn`t work at all in Opera (also I`ve noticed weird behaviour of this example in my browser - the shapes are just blinking or you cannot see them at all) and in other browsers it looks like shapes are closing themselves automatically - that means shape is after each step closed (it is always polygon) and I cannot make path just from the lines - is it correct behaviour of the graphics class? 2) Drawing directly to canvas context through bitmapdata Currently I ended up with this: this.bmd = this.game.make.bitmapData(this.game.width, this.game.height); this.bmd.addToWorld(); this.game.input.onDown.add(this.startDrawing, this); this.game.input.onUp.add(this.stopDrawing, this); startDrawing: function(pointer) { this.drawing = true; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = 10; this.bmd.ctx.moveTo(pointer.x, pointer.y); this.game.input.addMoveCallback(this.onDraw, this); }, onDraw: function(pointer, x, y) { if (this.drawing){ this.bmd.ctx.lineTo(x, y); this.bmd.ctx.stroke(); } }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.bmd.ctx.closePath(); this.game.input.deleteMoveCallback(this.onDraw, this); }, This solution seems to work only in IE, in Firefox and Opera nothing is shown. Could you please provide me some advices how to solve my situation? What is the best way to implement pencil-like behaviour in Phaser? I`ve already spent whole afternoon on this - without usable solution. Thanks in advance!
×
×
  • Create New...