libgdx TextureAtlas, and NinePatch's - libgdx

I am making a simple game using libgdx. I have a TextureAtlas that has I ninepatch I am trying to use:
The image is saved as menu.9.png
I am using the following code:
Image bg = new Image(Room.iAtlas.findRegion("GUI/menu"));
bg.setBounds(guix-border,guiy-border,(border+radius)*2,(border+radius)*2);
batch.begin();
bg.draw(s,1);
batch.end();
The output is like this:
I really just have no idea what I am doing wrong, but it should be more like this(Except it would have the shapes on top of it, but I didn't add those):
(I created that by hand, i've never actually had 9patch working, and it doesn't have the ships because I didn't bother to edit those in)

It looks like your "nine patch" isn't being treated as a real nine path, and is being treated as a "degenerate" nine patch (I had a very similar problem earlier: Loading nine-patch image as a Libgdx Scene2d Button background looks awful, though I wasn't using a TextureAtlas which is supposed to be the solution.)
Basically, when Libgdx reads the nine-patch out of your atlas, its supposed to read all the meta-data that describes how to chop the image up into 9 tiles (see https://code.google.com/p/libgdx/wiki/TexturePacker#NinePatches). I see a couple places this could go wrong:
Your texture isn't a valid nine-patch, and the meta-data is being ignored. (Check with the Android draw9patch tool.)
Your texture packer isn't processing the .9.png file correctly. Check the contents of the .txt file for your atlas, and see if it has "split" entries associated with the "menu.9.png" entry.
The texture lookup is just returning a regular TextureRegion wrapper for the nine-patch region, and isn't wrapping it in a NinePatch object. Try using TextureRegion.createNinePatch to make that more explicit. (I'm under the impression that this isn't necessary, but maybe it is ...)

Related

Drawing lines ontop of texture in Direct3D

Im am working in Direct3d11 with Windows 8 Store apps.
I have been searching google and missing a few points, that i would be happy if someone could point out for me.
So far i have managed to created buffers, shaders and getting a texture sampled with D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST and i can ofcause change it to a LINELIST and get a line of my points.
What am I to look for when i want to draw the texture and also draw some lines or a trianglelist as lines ontop of the texture. I want to show the texture and a mesh ontop of it.
What are my next step.
A simple approach would be to fist render the object setting the render state to D3D11_FILL_SOLID. Then render the same object again but setting the render state to D3D11_FILL_WIREFRAME.
The "wireframe pass" shader can be very simple based on your needs, just remember to change the shading from the regular pass or else you wont be able to see the wireframe.

How to extract the shape of MovieClip?

We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.

AS3 - Using sprite sheets to optimize my games

So, I'm trying to make my flash "games" run more smoothly. I am using individual PNG files for each of my objects in order to create player animations.
I've heard from some places that using individual files like that is bad.
I heard about using sprite sheets in order to compress data and reduce memory usage.
Maybe I have it wrong, but is there a way to merge all of my PNG images (with transparency) together in such a way that flash can continue to use the images individually?
I am really looking for ways to make my programs run more smoothly in order to be able to have lots of images on screen without much lag. Any ideas on how I can make things run better?
Here is an example of a tile based game I'm trying to make that is having serious lag issues.
TexturePacker allows merge png files. It generates two files: png and config file. Png is just merged images and config file is txt file which you can load into your swf, parse and demerge your images using it. Config could be in various formats for different game engines.
Using Photoshop or similar software you would combine all of the animations frames into one file. The size and shape of the file can be whatever you want, but each of the 'frames' should be the same size, in the same order and with no space between them. For example, lets say each frame is 25x25px, your walk animation is 10 frames and you want the final .png to be one long strip. You would make a new .png with the dimensions of either 250X25 or 25X250 and then insert all of your frames into that one file in the order of the animation. It's up to you if you want to embed these as display object or files that get loaded, but once you have them you just need to use BitmapData to break up the input file into new BitmapData objects and then display them as needed. Going one step further, lets say that most if not all characters have a walk animation and an action animation, you would make a single class to deal with loading character animations and the first row of the image file would be the walk animation and the second would be the action animation.

How to stack Sprites rendered inside Iterator?

I am rendering an image to a Sprite inside of an Iterator. I'd like each render (iteration) to remain on the canvas indefinitely, so that each successive render layers on top of the previous ones. How can I do this?
There are no Clears or any other layers in my composition.
In Quartz Composer, you'll almost always want to use a Clear patch — don't assume that you can rely on the prior contents of the framebuffer. So, to accomplish this, you'll need to load all of your images into a structure (probably by using JavaScript to feed an Image Loader patch and build a Queue from that), and then display all of the images each frame using an Iterator.
Check out Apple's "Image TV" sample composition, available in the OS X Developer Library in the Quartz Composer Conceptual Compositions bundle. This example demonstrates how to load a series of images into a structure and then display them.

Live Video Keying with Flash (AS3)? How to do that?

For a new project, I want to take a video feed, filmed in a greenscreen room, and as you see it, do a color keying, to kill the green and show an alternative picture on the background.
Is there a way to do this with Flash, AS3?
optional question: If a button is clicked, the now new constructed Picture should be saved as a Jpg. Any Idea?
Thanks a lot for you help!
For this sort of thing you're going to need to use Pixel Blender: http://www.adobe.com/devnet/pixelbender.html and possibly Alchemy as well http://labs.adobe.com/technologies/alchemy/
Sorry I can't give you more info than that as I've never worked with them before.
To capture a screen grab, it's easier. Create a new BitmapData object the size that you want your final image. Use the draw() method on it to capture the stage (or holding clip etc). Grab the as3corelib from here: https://github.com/mikechambers/as3corelib and use the JPGEncoder or PNGEncoder class to create a jpg or png (personally I prefer png, as even though the filesize is bigger, it's much quicker to generate as you don't need to worry about compression).
Then, use the FileReference class ( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html) to save it out (JPGEncoder and PNGEncoder both return your image as a ByteArray so just pass that as the data to the FileReference.save() function).