Search the Community

Hi all, I'm having problems in a project where I load a portion of a texture. When I hover over the image, I want another image to load. However, when my cursor leaves the image, I want it the original texture to load again, but at its cropped size. I'm not really sure how to do this. Here is a demo of what I'm talking about and here is its source code: var game = new Phaser.Game(800, 600, Phaser.AUTO, "game", {preload: preload, create: create, update: update});var block;function preload () { game.load.image("logo", "phaser.png"); game.load.image("space_guy", "exocet_spaceman.png");}function create () { bmd = game.make.bitmapData(150, 150); mask = game.make.bitmapData(500, 500); mask.fill(50, 50, 50); rect = new Phaser.Rectangle(100, 100, 100, 100); bmd.alphaMask("space_guy", mask, rect); sprite = game.add.sprite(10, 10, bmd); game.physics.arcade.enable(sprite); sprite.inputEnabled = true over = function () { sprite.loadTexture("logo"); }; out = function () { sprite.loadTexture("space_guy"); }; sprite.events.onInputOver.add(over, this); sprite.events.onInputOut.add(out, this);}function update () {}As you can see in the demo, the spaceman sprite is originally cropped to a certain size. When you hover over it, another image loads in its place. The problem that I'm having is that I'm not sure how to put the cropped image back once the cursor goes off of the image, as the image is loaded but without its cropped size.

Hello Everybody am new to phaser framework , i have to say it's a great framework , thanks to your effort guys am trying to do a jigsaw game , when the player loads an image and then the game crop it as requested pieces count Then put it all together I don't know how to start , what to read about , i tried to read about masking but the samples doesn't fit what i want Could you please guys just put me on the first step , i will appreciated a lot Thanks in advance .

I wrote some working html5 canvas code that is responsible for rendering a scrollbar. The way it does this is by: 1. Creating a sub canvas (the variable `containerCanvas`) 2. Translating the offset of that canvas so the content is shifted based on where the scroll bars are at. I thought that DisplayObjectContainer would be the object to use, but I don't see any functions to translate its content. That made me think that maybe I should be using a TilingSprite since it has the ability to translate, but I don't know how to turn arbitrary `DisplayObject`'s into a Texture, which is what the `TilingSprite` needs. 3. Draw that canvas - as an image - onto the parent canvas (the variable `ctx`). This crops the sub canvas' content to the containers' (0, 0, w, h). Since the content has already been translated, this only draws what should be seen. I've done some tests and seen that Pixi will happily render child `DisplayObjects` that are out of bounds of their parent, so I'm not sure how to crop the content. Here's the coffeescript: drawContainer = (ctx, gameState, container, offset) -> containerCanvas = $("<canvas width='#{container.rect.w}' height='#{container.rect.h}'></canvas>") containerCanvasCtx = containerCanvas[0].getContext("2d") containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y) # how do I achieve this? for innerComponent in container.components drawComponent containerCanvasCtx, gameState, innerComponent, vec(0, 0) rect = container.rect ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y) drawScrollbars(ctx, container, offset)Here's the generated javascript: drawContainer = function(ctx, gameState, container, offset) { var containerCanvas, containerCanvasCtx, innerComponent, rect, _i, _len, _ref; containerCanvas = $("<canvas width='" + container.rect.w + "' height='" + container.rect.h + "'></canvas>"); containerCanvasCtx = containerCanvas[0].getContext("2d"); containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y); //how do I achieve this? _ref = container.components; for (_i = 0, _len = _ref.length; _i < _len; _i++) { innerComponent = _ref[_i]; drawComponent(containerCanvasCtx, gameState, innerComponent, vec(0, 0)); } rect = container.rect; ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y); return drawScrollbars(ctx, container, offset); };