I am trying to play sprite images on windows phone 8. But its not playing correctly, if the single sprite image is larger than screen dimensions. I try to reduce the image with aspect ratio by using rectangle and ImageBrush. Still I am facing the same problem. Please find the below scenario.
Scenario :
Sprite Width/Height : 22100 / 516
Single Sprite Width/Height : 850/516
Mobile Dimensions : 800/480
Could anyone can help me out.
So, if I understood your question, all you need to do is:
Create a BitMapImage, don't use ImageBrush or Rectangle..
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri(imagePathOrUrl, UriKind.RelativeOrAbsolute);
I suggest you to add also this instruction to prevent memory issues:
bitmapImage.DecodePixelWidth = imageWidth;
Add the BitMapImage to an Image control and set the **Stretch** property for the aspect ratio:
Image img = new Image();
img.Source=bitmapImage;
img.Stretch = Stretch.Uniform;
Stretch property has also other values, so be sure to do some test with the other values to see what value adapts better to your needs.
Let me know if it works!
Related
I have a stretch viewport that I update everytime the screen is rezised with:
viewport.update(x, y, true);
I drew a background with photoshop and then i removed the objects and put those in a separate file, so what i mean by this is that the objects are in the correct size from origin since i separated them from the original background and texturepacked them.
What i find is that if i draw this objects (using Sprite) i have to set the scale of each sprite to 2.25 otherwise the sprites would be smaller and I dont know what i am doing wrong since im using a single camera/viewport, a single batch and calling batch.setProjectionMatrix(camera.combined).
What i am doing wrong?
This is how i created the viewport and camera:
public static Dimension virtualResolution = VirtualResolution.RES_768x432.resolution;
public static Dimension screenResolution = new Dimension(1920, 1080);
camera = new OrthographicCamera();
camera.setToOrtho(false, GameSettings.virtualResolution.getWidth(), GameSettings.virtualResolution.getHeight());
camera.update();
viewport = new StretchViewport(GameSettings.screenResolution.getWidth(), GameSettings.screenResolution.getHeight(), camera);
viewport.apply();
You are not using Cameras and Viewports correctly.
Cameras have their own "view width" and "view height" which you actually specify in the setToOrtho method. However you don't need to set such things to a camera when you are using a Viewport.
Instead you give these size parameters to the Viewport constructor along with an Orthographic camera.
gamecam = new OrthographicCamera();
gamePort = new StretchViewport(V_WIDTH, V_HEIGHT, gamecam);
gamePort.apply();
gamecam.position.set(new Vector3(100, 100, 0));
In your game you will always work with the camera unless the screen is resized.
If the screen is resized is the code will look like this.
#Override public void resize(int width, int height) {
gamePort.update(width, height); // The third boolean parameter
// centers the camera
}
In your question you used two sizes, one based off of the screen resolution, the other a virtual width and height. You will only use one and this gets passed to the Viewport.
This should now correctly scale your sprites!
I hope this answer helped! If you have any more questions please feel free to comment below!
i work with a new game , i have create 2 camera one camera for real world and another (GUI) camera for a static resolution (800 x 480)
private void init () {
camera = new OrthographicCamera(16,9);
camera.position.set(0, 0, 0);
camera.update();
cameraGUI = new OrthographicCamera(800,480);
cameraGUI.position.set(0, 0, 0);
cameraGUI.update();
And i want to use a textButton in my game , so i've create a new stage using a new fitViewPort
fitViewPort=new FitViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
gameController.stage=new Stage(fitViewPort);
then i create my textButtons using my bitmap font and i try it on the Desktop , and it's great
desktop
but when i try another device , the position is not the same
Tablet
then i think for using the cameraGui Width and height for my view port , the font is very bad stretched
any help please :(
Don't create a special camera for GUI, because viewport already has a camera.
Make your viewport width and height fixed, in your case:
fitViewPort = new FitViewport(800, 480);
gameController.stage = new Stage(fitViewPort);
And then just add actors to stage and draw it just by calling method
gameController.stage.draw();
Note: Remember to add gameController.stage.getViewport().update(width, height); in your resize method.
Edit: Using small fixed viewport (800x480 is small) will cause scaling, that is why the font is stretched. For example if you run a 800x480 layout on 1920x1080 display it will be scaled by 225%.
What you can do is generate a font with big size and the set scale to its data fe. bitmapFont20.getData().setScale(0.5F); (in this case font is generated by FreeTypeFontGenerator with size 40). Using this trick you will be able to get a great results. The proof is below. It is viewport of 640x360F * (float) Gdx.graphics.getHeight() / (float) Gdx.graphics.getWidth() scaled to 1920x1080. Font is generated with size 72 and then data scale is set to 0.5F
Here is the same text, but without modified data scale.
How can I resize an image using the Lumia Imaging SDK? The documentation seems to be very poor and I cannot find any examples/methods to resize (not crop) the image on Windows Phone 8.1.
Which methods can I use?
You should set the Size property on the renderer. That will resize the image to the size you want.
Looking at the JpegRenderer (https://msdn.microsoft.com/en-us/library/lumia.imaging.jpegrenderer_members.aspx) set the Size to what you want the size to be. In addition you can set the OutputOption property (https://msdn.microsoft.com/en-us/library/lumia.imaging.outputoption.aspx) if you want the contents to be Stretched or to preserve aspect ratio instead.
A quick example:
using (var source = ...)
using (var renderer = new JpegRenderer(source))
{
renderer.Size = new Size(800, 600);
renderer.OutputOption = OutputOption.Stretch;
var result = await renderer.RenderAsync();
}
If you are using a BitmapRenderer or a WriteableBitmapRenderer and pass in the (writeable)bitmap the renderer will automatically resize the contents to the size of that image.
I've a MovieClip with 10 frames and a photo (1024x768 px) in each frame. Now I'ld like to create a 174x174 px thumbnail from it and place it into a container (instance: thumb1 - thumb10)
How to make this happen?
var mc:MovieClip = new MovieClip();
var bitmapData:BitmapData = new BitmapData(mc.width, mc.height, ... );
bitmapData.draw(mc);
then just use the bitmapData to create a Bitmap and scale it the way you like.
Easiest way would be to create the thumbnails outside of Flash in a graphics editor (such as Photoshop or Paint.net). This would increase your file size slightly, but would probably work the best.
A simple way to do this in Flash, would be to give each image a Class linkage in the library, and just create a new instance of them when you need it. You can just set width and height (or scaleX and scaleY) on the Bitmaps to resize them, but make sure you set smoothing to true for each of them, or they wont look very nice.
I'm new to AS3 and I'm doing some custom video player video project for AIR. While I was studying the simple examples (non-StageVideo) on how to play videos, I've encountered a unique situation where I got an awesome auto-scaling (stretch-to-fit) to window behavior from Flash.
Whenever I set the SWF directive's width and height equal to the width and height of the flash.media.Video object I'm creating. It does the auto-scaling, stretch-to-fit, resizable behavior. Like so:
// SWF directive placed before the class declaration of the main class
[SWF( width="1024", height="576", backgroundColor="000000", visible="true" )]
// somewhere in my initialization
myvid = new Video();
with( myvid )
{
x = 0;
y = 0;
width = 1024; // if I set this wxh equal to wxh in the SWF directive it auto-scales!
height = 576;
}
myvid.attachNetStream( myns );
addChild( myvid ); // must come after instancing of video and netstream, and attach to make the auto-scale work
myvid.play( "somevideo.flv" );
Even if I set the width to 16 and height to 9 on both it scales and fits perfectly on the size of my window. Can some explain me this behavior? None of what I read in the documentation mentioned this.
Don't get me wrong, I like this behavior! :) It made things easier for me. But code-wise I need to understand why is this happening as the code I set had nothing to do with auto-scaling.
Also, what the heck are directives for? Don't they just have pure ActionScript 3 equivalent? They look hackish to me.
I think the behavior you're describing is caused by the scale parameter in the HTML embed of the Flash. Generally this defaults to showAll, scaling the Flash up to fit the container.
There are two different sizes: the size of the container (the block in the HTML page) and the size of the Flash content (what you specify in the SWF tag). The scale mode decides the behavior when these sizes don't match. You can control this behavior either by tweaking that embed parameter, or from AS3 directly using stage.scaleMode:
import flash.display.StageScaleMode;
// scale the content to fit the container, maintaing aspect ratio
stage.scaleMode = StageScaleMode.SHOW_ALL;
// disable scaling
stage.scaleMode = StageScaleMode.NO_SCALE;
If you want to use the scale mode to your advantage, I would set the width of your Video to match the stage dimensions like so:
myvid.width = stage.stageWidth;
myvid.height = stage.stageHeight;
This way you avoid having to repeat the SWF width and height.
The directives mostly specify some metadata or instructions for the compiler. The SWF tag in particular specifies the info in the SWF header, such as desired width, height, framerate. Mostly these are just some suggestions to the player + container about how the file should be displayed. Some of them can be changed in code (stage.frameRate = 50;). Another metatag is Embed, which will bundle some assets into the SWF (particularly handy if you want to embed some binary data).