Creating a texture altas in SpriteKit from an existing texture atlas jpg - animation

I am trying to create a texture atlas using existing assets from a previous image asset that was created outside of Xcode/my machine.
Importing the image into Xcode does not "split" it, and I am unsure how to tell Xcode / SpriteKit where the "atlas" locations are.
Other than using an image editor and manually eating each image as an asset, how can I convince Xcode that the image is really an atlas already?
Finally, is it even worth it to use an atlas, as I have to cycle through the image myself to do animation; am I better off hardcoding (!) the x/y positions of the atlas strip and doing some sort of rotation / loop code in an SKAction?

Decided to split the old atlas into separate images, then load them with a .atlas folder. Also decided to load all file names and perform a .sort on an array, then go through that array and load the file names in the "correct" order.
function snippet below:
func AssignTextureAtlas(atlas: SKTextureAtlas)
{
var arrTextureNames: Array<String> = []
//Create texture atlas array
for (var i = 0; i < atlas.textureNames.count; i++)
{
var myText = atlas.textureNames[i] as String
arrTextureNames.append(myText)
}
arrTextureNames.sort( {$0 < $1})
for (var i = 0; i < arrTextureNames.count; i++)
{
var myTexture = atlas.textureNamed(arrTextureNames[i])
arr.insert(myTexture, atIndex: 0)
}
//...more code here, until:
self.runAction(SKAction.repeatActionForever(SKAction.animateWithTextures(arr, timePerFrame: 0.1, resize: false, restore: true)), withKey: "TEST")
}

Related

Rendering geoJSON using D3 and Leaflet using imageOverlay

Quick version: I’m having trouble displaying a d3 element on a static image displayed by Leaflet. It works if I use d3noob’s (http://bl.ocks.org/d3noob/9211665) example…but I’m having trouble extending it. I’m guessing it’s because of the lang and long translation or the projection but I’m not sure what I need to change. I’m trying to display the geoJSON in the centre of the image (my code on JSFiddle: https://jsfiddle.net/g_at_work/qyhf0qz0/12/)
Longer version:
I'm trying to extend d3noob’s example so that I can display geoJSON on static images using Leaflet and D3 (an requirement from my boss unfortunately). I was able to reproduce d3noob’s tile based example but I've had trouble with the static version.
I've been able to display the static image but I've not been able to display the blue rectangle on the image. I'm not sure what I need to do to manipulate the position of the blue rectangle described in the JSON.
I've tried playing around with setting the coordinates in the projectPoint function but no luck:
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
At this stage I’m thinking I need to describe a new projection but I’m not sure what.
Here is the code which I’m using to display the static image:
var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple});
var southWest = map.unproject([0,882],map.getMaxZoom());
var northEast = map.unproject([1085,0],map.getMaxZoom());
var imageBounds = new L.LatLngBounds(southWest,northEast);
L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map);
map.fitBounds(imageBounds);
It would be great if someone could suggest a strategy for maniuplating the position of the rectangle (I’m new to d3 and leaflet)
Thanks a bunch
G
so after some tinkering I found that creating a new projection enabled me to set the location and scale the map so I could place it where I needed it to be :
var center = d3.geo.centroid(geoShapeInstance);
var scale = [800000];
var offset = [175, 1];
var projection = d3.geo.mercator().scale(scale).center(center).translate(offset);
var path = d3.geo.path().projection(projection);
Fiddling with the 'offset' variable allowed me to set the location and playing with the 'scale' variable allowed me to resize the map (scale is a [x,x] value)
Hope this helps someone.

Finding size of images imported at runtime

I am currently loading images at runtime from directories stored in an XML file, and assigning them to RawImage components via the WWW class. While this is working fine, the image is skewed to fit into the new texture size.
I am wondering how to get an image’s original size or aspect ratio so that I can change the size of the image rect to suit. The images to be imported are at varying sizes and therefore the approach used needs to be responsive to the original size of imported images.
Any suggestions would be much appreciated. [Scripting in uJS]
Many thanks in advance, Ryan
function loadContextImage(texLocation : String)
{
if (!imageView.activeSelf)
{
imageView.SetActive(true);
}
var wwwDirectory = "file://" + texLocation; //this will probably need to change for other OS (PC = file:/ [I think?]) - **REVISE**
var newImgTex = new Texture2D(512, 512);
while(true){
var www : WWW = new WWW(wwwDirectory);
yield www;
www.LoadImageIntoTexture(newImgTex);
if (www.isDone){
break; //if done downloading image break loop
}
}
var imageRender : UI.RawImage = imageView.GetComponent.<RawImage>();
imageRender.texture = newImgTex;
}
If you cannot use an Image (for nay valid reasons), you can get the width and height of the texture:
WWW www = new WWW(url);
yield return www;
Texture2D tex = www.texture;
float aspectRatio = tex.height / tex.width;
rawImage.width = width;
rawImage.height = width * aspectRatio;
This should make the rect of the image of the appropriate ratio of the texture.
If you can use Image and preserveAspectRatio, you get it done by Unity. The result is not necessarily the same since it will keep the dimensions of the box and make the Sprite occupies as much space while keeping ratio.

easeljs splitting an image into pieces

I'm new to easeljs and was wondering how would you split an image into a given number of pieces. From what I've gathered so far, I'm supposed to use SpriteSheets to accomplish this. However, the only tutorials I've seen are ones with multiple images in one Spritesheet, not one image divided into multiple images and put into a SpriteSheet.
This is my code so far (I know that the variable frames is undefined since I cannot properly access the spriteSheet array yet):
var data = {
images: ["/images/teemo.png"],
frames: {width:50, height:50}
};
var spriteSheet = new createjs.SpriteSheet(data);
console.log(spriteSheet);
console.log(spriteSheet[frames]);
var frames = spriteSheet[frames];
console.log(frames);
for (var i=0; i<frames.length; i++){
var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
}
A spritesheet is an interesting way (although not really the intent of the class). Your usage is wrong though.
Create a Spritesheet
Create Sprite instances (called BitmapAnimation in EaselJS 0.6.1 and earlier), each pointing at the same SpriteSheet instance
Use sprite.gotoAndStop(frame) to have each instance show a different piece
Here is an example:
for (var i=0; i< numberOfImages; i++) {
var sprite = new createsjs.Sprite(spriteSheetData);
sprite.gotoAndStop(i);
stage.addChild(sprite);
// Other stuff
}
You can also crop out a piece of an image using a Bitmap and the sourceRect property, which takes a Rectangle to define the crop area. This ends up being roughly the same as the above approach, but might be more work to determine each Rectangle dimensions.
Cheers.

How to tell if an image is 90% black?

I have never done image processing before.
I now need to go through many jpeg images from a camera to discard those very dark (almost black) images.
Are there free libraries (.NET) that I can use? Thanks.
Aforge is a great image processing library. Specifically the Aforge.Imaging assembly.
You could try to apply a threshold filter, and use an area or blob operator and do your comparisons from there.
I needed to do the same thing. I came up with this solution to flag mostly black images. It works like a charm. You could enhance it to delete or move the file.
// set limit
const double limit = 90;
foreach (var img in Directory.EnumerateFiles(#"E:\", "*.jpg", SearchOption.AllDirectories))
{
// load image
var sourceImage = (Bitmap)Image.FromFile(img);
// format image
var filteredImage = AForge.Imaging.Image.Clone(sourceImage);
// free source image
sourceImage.Dispose();
// get grayscale image
filteredImage = Grayscale.CommonAlgorithms.RMY.Apply(filteredImage);
// apply threshold filter
new Threshold().ApplyInPlace(filteredImage);
// gather statistics
var stat = new ImageStatistics(filteredImage);
var percentBlack = (1 - stat.PixelsCountWithoutBlack / (double)stat.PixelsCount) * 100;
if (percentBlack >= limit)
Console.WriteLine(img + " (" + Math.Round(percentBlack, 2) + "% Black)");
filteredImage.Dispose();
}
Console.WriteLine("Done.");
Console.ReadLine();

Corona - create regular display objects from sprite sheets?

This is normal way of displaying an image:
local img = display.newImage("image.png");
But doesn't it save memory to put all your images in one large image and export from Zwoptex? There is documentation for creating animated sprites from sprite sheets, but what about just pulling a single image from a sprite sheet?
local zwoptexData = require "sheet1"
local data = zwoptexData.getSpriteSheetData()
//then what?
The commands to make a static image from a tile sheet look like this:
local tileSheet = sprite.newSpriteSheet("tiles.png", 64, 64)
local tileSet = sprite.newSpriteSet(tileSheet, 1, 10)
local tile = sprite.newSprite(tileSet)
tile.currentFrame = 5
That assumes all the tiles on the sheet are 64x64 but you could easily adapt those commands to use your sprite sheet data. The important things to note are newSprite() and .currentFrame
EDIT: You commented that you can't figure out how to use sprite data with this, so the modified code is
local data = require("tiles.lua")
local tileSheet = sprite.newSpriteSheetFromData("tiles.png", data.getSpriteSheetData())
local tileSet = sprite.newSpriteSet(tileSheet, 1, 3)
local tile = sprite.newSprite(tileSet)
tile.currentFrame = 2
To learn how this works refer to
http://developer.anscamobile.com/reference/sprite-sheets

Resources