Search the Community

Hi Team, I am banging my head against wall from 2 days. I have a video of different sizes. User can crop video (Just showing cropping area on top of video and getting x,y, coordinates of cropping area). End of the day using back end server I will capture cropped video until I have to mask the video as cropped. Lets assume video original size if 720x1280, the size I am going to show may not be with same size (e.g. 520x292). So after cropping done, I will get the x-scale and y-scale using below formula. var scaleX = 520/720; var scaleY = 1280/292; var cropX = croppedX * scaleX; var cropY = croppedY * scaleY; I could able get actual cropping dimensions but I could not understand how to implement scale in pixi sprite to mask as a cropped video. I am using setTransform method but could not meet desired result. let scaleX = (this._assetSprite.width/newMediaData.croppedDimensions.width); let scaleY = (this._assetSprite.height/newMediaData.croppedDimensions.height); this._assetSprite.setTransform (-(newMediaData.croppedDimensions.x * (scaleX)), -(newMediaData.croppedDimensions.y * (scaleY)));

What property do I need to use to crop an image? I feel I must be missing something utterly obvious, but without any docs I'm a bit lost. I adding an image from a loaded texture thus: - this.add.image(x, y, image); The image is (say) 64 x 64 pixels, but I want to only display 32 x 32. Whatever property I set, it either has no effect at all, or it scales the image instead of cropping it. Could someone point me to the right property please?

Hello, I'm having trouble with a webfont, it appears to be cropped on the bottom mostly the "p"s. Also the Phaser example seems to have that problem: http://examples.phaser.io/_site/view_full.html?d=text&f=google+webfonts.js&t=google%20webfonts Is there a work around that? here's my code game.add.text(0, 0, "test text with power", { font: '38px FontdinerSwanky', fill: '#f1f1f1', fontWeight: 'bold', align: 'center', stroke: '#1e1e1e', strokeThickness: 3 });Thanks for your help! Here is a screenshot

I'm trying to crop a Phaser.Text, so I can make something similar to the As3 TextField class (where your text is inside of a mask). But the crop method is not working, here is what I did: this.pText = new Phaser.Text(this.game, 0, 0, text, style); this.pText.crop(new Phaser.Rectangle(0, 0, 20, 20), true); this.pText.updateCrop();

I work on a simple game prototype which uses the tilemap I have a scene which extends PIXI.Container and has a map made out of individual pats of a texture atlas. At the end I have simple piece of code for zooming my scene by mousewheel, when I scale the scene the tiles sprites will have a small gap between them or they may overlay each other at certain points. I tried to solve my problem the following ways: 1) I've tried to use this settings PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 2) I've tried to set up my canvas like this: canvas { image-rendering: pixelated; } 3) I've tried to set up antialias property to true and vice versa 4) I've tried to use Math.round to the position of each tile as well as to the position of whole scene 5) I've tried to set up cacheAsBitmap = true to the whole scene 6) I've try to use pixi-tilemap from there https://github.com/pixijs/pixi-tilemap, I made there small changes in the basic example, but I've got the same result Nothing was helpful This is my code which I use for zooming: var self = stage; rendererviewaddEventListener('mousewheel'function(event) { var factor = delta = eventwheelDelta || -eventdetailpoint = new PIXIPoint(eventpageX / 1 eventpageY /1); // на сколько минимально можно отдалить объект var MIN_SCALE = 0.25; // максимально можно приблизить объект var MAX_SCALE = 1; var local_pt = selftoLocal(point); var curScale = selfscaley; if ( delta > 0) { // Zoom in factor = 0.1; } else{ // Zoom out factor = -0.1; } if(factor > 0 && curScale >= MAX_SCALE) { //; } else if(factor < 0 && curScale <= MIN_SCALE) { //; } else { var parentLocal = point; selfpivotx = Mathround(local_ptx); selfpivoty = Mathround(local_pty); selfpositionx = Mathround(parentLocalx); selfpositiony = Mathround(parentLocaly); selfscaleset(selfscalex + factor); } }); Does anyone know how to solve it?

I am trying to make an hourglass graphic that disappears from the top down. I am doing it using a crop rect. But I don't know how to make the crop rect start from the top and move down - I can only get it to start from the bottom of the graphic and move upwards. Here's the code that I use to create the graphic and the crop rect: timeTop = game.add.sprite(0, 0, "sandTop"); timeTop.scale.setTo(scale.x, scale.y); timeTop.x = gameWidth * 0.823; timeTop.y = gameHeight * 0.01; timeTop.cropEnabled = true; var timeTopHeight = timeTop.height; var timeTopCropRect = new Phaser.Rectangle(0, 0, timeTop.width / scale.x, timeTop.height / scale.y); timeTop.crop(timeTopCropRect); var percent = .5; timeTopCropRect.height = timeTopHeight * percent / scale.y; timeTop.crop(timeTopCropRect); I have tried a few things already: 1. flipping the crop rect's scale.y: timeTopCropRect.scale.y *= -1; 2. using a negative value for the crop rect height: timeTopCropRect.height = -1 * timeTopHeight * percent / scale.y; But neither give what I want. Flipping the y scale doesn't seem to do anything, and making the crop rect height negative makes the graphic appear above where it should be. Anyone know how to do this? Or have another idea of how to mask a graphic to make it only partially display, and disappear from the top down?

I want to load an image, have the user crop a part of it as polygon or free form, and then have it saved for later use as a resource. Is it possible with Phaser or do I need something else to achieve that?

Hi everyone, I have a big image, from which I want to create many sprites with different sizes (imagine bricks of different size). I use Sprite.crop()for that, but it seems that the last crop affects and updates all previously created sprites. I don't want to just scale the sprite, but to use more or less area of a base texture. I have something like: for (var i in blocks){ var bx= Math.random(<whatever>); var by= Math.random(<whatever>); var bw= Math.random(<whatever>); var bh= Math.random(<whatever>); var block= game.add.sprite(x, y, 'texture'); var rect= {x:bx, y:by, width: bw, height: bh}; block.crop(rect);}All sprites end with different sizes, but they share the same texture crop! (it streches) Any clue? is this doable? I tried with block.cacheAsBitmap, but no luck..

Hi, when I have sprite created from frame and apply crop on it, I would expect, that only portion of actual frame will be cropped var mainMenu = _game.add.sprite(0, 0 , 'atlas');mainMenu.frameName = 'mainMenu.png';mainMenu.cropEnabled = true;mainMenu.crop = new Phaser.Rectangle(10,10,100,100);Instead of that, result is texture area cropped from whole atlas. Is this intentional? Thanks

Hello. I need to create a rectangular area in which the children can move inside it. The group have to work as a cropper, (a bit like a miniature of game world), in which the children will only display their part which still inside the area (some part outside the area will be cropped). When the children move back inside the area, it will partially displayed again until it is completely inside the area (which then shown it completely). Any idea how to implement this? Thank you

Hi, guys. First of all, I've found Phaser amazing. And though my knowledge of Javascript is pretty basic, almost everything has been done without too many problems. I got a problem with sprite cropping. So I extended Sprite... var cropRect;var some_obj;Medidor = function(game, x, y, someObject) { Phaser.Sprite.call(this, game, x, y, 'medidor'); [...] this.cropEnabled = true; cropRect = new Phaser.Rectangle(0, 0, this.width/2, this.height); this.crop(cropRect); [...] game.add.existing(this);};Medidor.prototype = Object.create(Phaser.Sprite.prototype); Medidor.prototype.constructor = Medidor;Medidor.prototype.update = function() { [...] this.updateCrop();};But when I run the game, an error appears: TypeError: this.crop is not a functionI have even followed the example here: http://examples.phaser.io/_site/view_full.html?d=sprites&f=dynamic+crop.js&t=dynamic%20crop I don't know what I am doing wrong :/ Any ideas? Thanks in advance,

So i'm trying to crop an image and it isnt working - i keep getting Uncaught Error: Texture Error: frame does not fit inside the base Texture dimensions [object Object] But this isnt making sense to me because this is how making the rectangle: var currentHeart: Phaser.Image = this.heartFills[i][this.heartFills[i].length - 1]; this.cropRects[i] = new Phaser.Rectangle(currentHeart.x,currentHeart.y, currentHeart.width-10,currentHeart.height-10); currentHeart.crop(this.cropRects[i]); currentHeart.position.y = 56 - currentHeart.height;Literally telling it "just go 10 pixels smaller than the image itself in both directions". My end goal is to the x be currentHeart.x and my y be a fraction of the height based on the players health, but right now I can;t get it to crop and i dont understand why.

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); };

Hello. I know altering the width of the crop of a sprite takes away from the right side of the image. I really need to crop the left side. I've tried altering the crop x properties but just get a kind of black shadow added on the end. I can't make sense of what is going on. Here is an example. I've cropped the left side of the robot arm, but now you can see the black line going onto the pipe. I need to get rid of that.

While using Sprite.crop I noticed that changing crop.width doesn't always work. For example, the following code won't have any effect: var sprite = game.add.sprite(0, 0, 'someSprite');sprite.crop = new Phaser.Rectangle(0, 0, sprite.width, sprite.height);sprite.crop.width = v; // some value vNow the following code will work without problem: var sprite = game.add.sprite(0, 0, 'someSprite');sprite.crop = new Phaser.Rectangle(0, 0, sprite.width, sprite.height);sprite.crop = sprite.crop; // adding this line fixes the problemsprite.crop.width = v; // some value vThe problem is inside crop's "set" function: set: function (value) { if (value instanceof Phaser.Rectangle) { if (this._cropUUID == null) { this._cropUUID = this.game.rnd.uuid(); PIXI.TextureCache[this._cropUUID] = new PIXI.Texture( PIXI.BaseTextureCache[this.key], { x: value.x, y: value.y, width: value.width, height: value.height } ); } else { PIXI.TextureCache[this._cropUUID].frame = value; } this._cropRect = value; this.setTexture(PIXI.TextureCache[this._cropUUID]); }}The first time we set a crop rectangle R, sprite._cropRect is assigned R but in PIXI texture cache we actually create a new frame instance. So if we set sprite.crop.width we do change the width of _cropRect but not the width of the texture's frame.