Jump to content

Search the Community

Showing results for tags 'cropping'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • 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


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 3 results

  1. 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.
  2. mown

    Jigsaw Game

    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 .
  3. 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); };
  • Create New...