PapaPuck

Members
  • Content Count

    3
  • Joined

  • Last visited

About PapaPuck

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. PapaPuck

    What's the difference between add/create/make ?

    How do you add a sprite to the world / display list after using the make command to initialize it?
  2. Greetings, When adding CSS border-style or padding to the canvas element, I found that the hit zones of dragged objects shift off the sprite, presumably in proportion to the CSS values. Below code shows this error (FF & Chrome). For test.png I used a 100x100 square. If you try to drag the sprite while the mouse pointer is directly over it, it won't move. Move the pointer outside & to the left of the sprite & you'll be dragging it. Even with setting: this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE; this.scale.pageAlignHorizontally = false; this issue still occurs. I came to this, because I wanted a border or side alley to the left & right of the game canvas in a different color. It seems Phaser hijacks the entire width & adding padding to wrapper divs showed up outside the entire width, not next to the canvas element. Anyone know a way to control the padding outside & to the left/right of the canvas element that Phaser creates? Thank You! <html> <head> <script src="assets/js/lib/phaser.js" type="text/javascript"></script> <script> window.onload = function () { var game = new Phaser.Game(768, 1024, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function preload() { console.log('Hey World'); this.game.load.image('test', 'assets/img/test.png'); } function create() { this.test = this.game.add.sprite(this.world.centerX, this.world.centerY, 'test'); this.test.anchor.setTo(0.5, 0.5); this.test.inputEnabled = true; this.test.input.enableDrag(); } function update() { } }; </script> <style> canvas { border-color: #ffffff; border-width: 3em; border-left-style: solid; border-right-style: solid; border-top-style: none; border-bottom-style: none; padding-left: 3em; padding-right: 3em; } </style> </head> <body> <div id='game-wrapper'><div id='game'></div></div> </body> </html>
  3. I'm creating a photo manipulation 'game' using Phaser. The user needs to upload a file from their device (desktop, iOS, Android) to start. Searching, I find examples where <input type="file" name="pic" accept="image/*"> transfers the image into the Phaser canvas. And CanvasInput.js works if you only have a text field. But is there any way to get file upload (and file save locally, for that matter) type input from within the Phaser canvas? I want these input fields within the game canvas itself.