I'm trying to implement an image gallery with GWT. My intention is to show a list of albums, when you click on one of them show a grid with the photo's thumbnails on it and, when you click on one of them, show the full-size image in a popup window. I've succeeded on the first and last points, but I'm getting a lot of problems building the thumbnails.
My idea is to have squared, fixed size thumbnails. To do so, I try to scale and then crop them. But it doesn't work. If I only scale them it works, if I only crop them it works, but when I try to scale&crop only the last operation is executed. This is what I coded to do that:
prop = (float)img.getWidth() / img.getHeight();
thumb = new Image(img.getUrl());
if (thumb.getWidth() > thumb.getHeight()) {
thumb.setHeight("150px");
thumb.setWidth(String.valueOf(150 * prop) + "px");
} else {
thumb.setWidth("150 px");
thumb.setHeight(String.valueOf(150 * Prop) + "px");
}
offset = thumb.getHeight()*(prop-1) / 2;
if (thumb.getWidth() > thumb.getHeight()) {
thumb.setVisibleRect((int)offset, 0, 150, 150);
} else {
thumb.setVisibleRect(0, (int)offset, 150, 150);
}
I've been looking for help about this and I found several solutions. Based on another question in this website I found this, but it's not applicable to my case, because I need to load the images dinamically. I also tried with GWT and HTML5, following this example, but when the following method is executed:
ImageData imageData = context.getImageData(sx, sy, sw, sh);
it raises the following exception:
(NS_ERROR_DOM_INDEX_SIZE_ERR): Index or size is negative or greater than the allowed amount
So, if anyone knows how to do it with pure GWT, or solve de HTML5 error, I will be very pleased, I've been stuck on this for many weeks :(... thanks in advance!
Related
Using svg-pan-zoom utility, I want to register the zoom and pan values every time is changes (using onPan() and onZoom()) and use these saved values to pan and zoom my SVG to the same position (using pan() and zoom()).
I works fine if the zoom level is not changed, however, if zoom level is changed, I have a gap between the wanted position of the svg and the real one.
You can see this problem in that fiddle: first, zoom in, then press the Pan button.
I would like my svg to keep its current location.
I have read other posts on stackoverflow about similar situations (I guess I should use data from getSizes()) but I'm still unable to make it work.
Any advice?
OK, I got the solution, which is quite obvious.
While zooming, I need to apply a zoom factor to the saved pan.
onZoom: function(zoom) {
ratio = zoom/currentZoom;
currentZoom = zoom;
currentPan = {
x: currentPan.x*ratio,
y: currentPan.y*ratio
}
}
See full code here
I'm looking for a simple and quick way to clear the entire Phaser screen, like how in HTML5 canvas you can erase everything by resetting the width of the canvas to itself. I couldn't find any such method with a search - only graphics.clear(), but that doesn't hit other stuff like text objects. Is there such a way to clear screen?
Thanks.
There are methods to destroy specific elements - obj.kill() and obj.destroy() - but it is possible to delete all elements by calling game.world.removeAll().
#FabiánRodríguez replied, but you can also make a array or object literal with the objects you'd like to remove, so iterate and remove each. That is when you want to group objects.
var layout = {
rect: new Phaser.Rectangle(0, 0, 200, 200)
};
for(var i in layout) {
layout[i].kill();
layout[i].remove();
}
I want my application to automatically scale its size depending on the screen size. I want my application to fit any screen size automatically. I am making my application for mobile devices, how can I do this? I am fairly new at flash so please make it a bit simple!
Yes, there is no simple answer but the basics is:
stage.addEventListener(Event.RESIZE,onStageResize);
function onStageResize(e:Event):void {
// Use stage size for placing elements to their position..
// Position to left top
element1.x = 10;
element1.y = 10;
// Position to right top
element2.x = stage.stageWidth - element2.width - 10;
element2.y = 10;
// Position element to center and make it's width to scale with stage..
element3.width = stage.stageWidth - 20;
element3.x = 10;
element3.y = stage.stageHeight / 2 - element3.height / 2;
}
To scale elements place them inside on Sprite or MovieClip and scale that element like:
element.scaleX = 1.6; // scale 1 = 100% 2 = 200% etc
element.scaleY = element.scaleX;
I usually create public function "resizeElements(e:Event = null):void" for visual subclasses/components and call that from the main thread. In that function the object can resize it self.
In addition to #hardy's answer it's important to set the following variables on the stage:
// disables default 100% scaling of entire swf
stage.scaleMode = StageScaleMode.NO_SCALE;
// disables default align center
stage.align = StageAlign.TOP_LEFT;
Also, since the original question was regarding resize on launch, and this is mobile deployment it's important to call onStageResize(); once manually because the RESIZE event may not be fired initially. This would require changing:
function onStageResize(e:Event):void { ... }
to
function onStageResize(e:Event = null):void { ... }
Saying "automatically scale to screen" is too generic. The requirements this statement imposes is totally different between apps depending on what they need to do. There is no simple answer.
If your app has a main content canvas area, do you want to zoom to the content to fit the area? Do you want to keep the content the same size and show more of it? Maybe both - you could want to show more to a point, and then scale if there is still more room.
What do you want your UI to do? Dialogs could shrink/grow and remain central. Maybe you want to reflow them completely?
Do you have a slick UI? Maybe a menu with a set of buttons. Do the buttons need to be sized proportionally to the screen? What about the gaps between them? What if the screen ratio is different so if you scale them to fit they no longer work?
The point is, there isn't a simple answer. For basic layout there are UI frameworks that can assist you in placement and scaling, but you still need to decide how you want your app to behave. That totally depends on the app and what your intended design is.
I'm developing a top-down view game, and I've got a problem with the camera.
Currently camera simply follows the player entity - it seems fine to me, but people want another camera.
I'm using Starling, and StarlingPunk, but it shouldn't make much difference, its more theoretical question.
Camera works like this:
public function centerOnEntity(target:SPEntity):void
{
var newCameraX:Number = (target.x + target.width / 2) - SP.width / 2;
var newCameraY:Number = (target.y + target.height / 2) - SP.height / 2;
SP.camera.setPosition(newCameraX, newCameraY);
}
And basically, every frame, camera is centered on the user.
Following image will demonstrate the problem:
As you can see, I've got rectangular levels, and if level is small, or user is near to the level bounds a background image is displayed.
So, what kind of camera do I need?
I need a camera, that will show maximum level space, and minimum background image.
How can I achieve that?
Help would be appreciated!
I am stuck with the rotation I have set the movieclip's registration point to be the center in which i am loading the uploaded image. I am doing something like
http://custom.case-mate.com/diy?bypassLandingPage=true
I have uploaded the image but unable to rotate it properly and zoom also isnt working from the center.. Any guidance would be highly appreciated. Thank you.
i'd suggest creating a Sprite, adding the loaded image as its child (i suppose you're using a Loader) and centering it relatively to its parent:
function onLoaded(e:Event):void{
_parentSprite.addChild(_loader);
_loader.x = -_loader.width / 2;
_loader.y = -_loader.height / 2;
}
after that you'll get the desired rotation type changing _parentSprite.rotation .
every time you're zooming, you'll have to call something like:
function centerContent():void{
_loader.x = -(_loader.width * _loader.scaleX) / 2;
_loader.y = -(_loader.height * _loader.scaleY) / 2;
}