How about a script to chop (parse?) an image into tiles? - RealWorld forums

Log-in or register.

How about a script to chop (parse?) an image into tiles?

RW Icon Editor
kunkel321
on May 21st 2015

This one might be more of a challenge for you, Vlasta :-)

I'm not sure if this could even be scripted. Also, since you'd start with only one image, I'm not sure if it would be a "batch" operation...

Anyway, my general work-flow is to create my icon images as a "grid" and then "chop up" the grid into individual smaller images. See the example 3x3 grid:

http://i.imgur.com/FMrRkhh.png

I'm currently using TileMage tilemage.50webs.com for this. It's a pretty cool little app, and it works fine, but I thought it would clever (and more convenient) to do this in RWIE. I used that trick of "Resize Canvas" in order to crop away all but one tile. The example grid is 480x480. Chopping it into 9 tiles yields images of 160x160. Then cropping 16 pix off each side gives the standard 128x128. So anyway, I was able to extract the top/left tile just fine, but as you might guess, getting the top/middle tile in step two didn't work because that part of the image was already gone from step one! :-) Presumably, RWIE would need to keep going back to the same base image, and redo step one over and over, but with different areas cropped -- maybe... IDK. Another problem is that the number of columns and rows would need to be changed from time to time.

Any, I can describe the logic/structure of this better if it helps. Also, this is a "low priority request" because, as mentioned I have another app that is able to handle this.... You have to admit though: It would be pretty cool! :-) And if this "tile parsing" was possible, then a person could potentially start with a large grid image like the one above, and in one fell swoop, tile > crop > and convert to icon files.

Vlasta
on May 22nd 2015

Well, it is possible, but in needs to be scripted. You'll need to pick the >JavaScirpt< for the first step and delete the second step, because the saving will be done directly from the script (because it needs to be done multiple times per processed image). Also, the images will not appear in the default output folder, but in the same folder as source image - you can control this by putting something else into the basename variable. There is also a problem with the >JavaScript< configuration in the current version of the icon editor on 64-bit Windows. The JavaScript code won't be visible when you visit the configuration second time. So, here is the code:

var tilesX = 3;
var tilesY = 3;
var cropX = 16;
var cropY = 16;

// get source filename
var basename = Document.Location;
basename = basename.substr(0, basename.lastIndexOf('.'));

var source = Document.RasterImage;
var sourceX = source.sizeX;
var sourceY = source.sizeY;

var tileX = Math.round(sourceX/tilesX)-cropX-cropX;
var tileY = Math.round(sourceY/tilesY)-cropY-cropY;

var wiz = Application.CreateWizard("35AFBDB5-1B26-4195-8786-83C8E1CBC08E");
wiz.SizeX = tileX;
wiz.SizeY = tileY;
var dst = Application.CreateDocument(wiz);

for (var y = 0; y < tilesY; ++y)
{
	for (var x = 0; x < tilesX; ++x)
	{
		var srcX = Math.round(sourceX/tilesX)*x+cropX;
		var srcY = Math.round(sourceY/tilesY)*y+cropY;
		Blender.Compose(dst, 0, 0, tileX, tileY, source, srcX, srcY, 0, Blender.OpSrc);
		dst.SaveCopyAs(basename+'_'+x+'_'+y+".png");
	}
}

Due to all the annoyances in the current version, you may want to try the preview build of the next version, where things should be more tidy. You can get it here. In this version you would have to go to Tools->Application options in main menu and enable "Show menu commands for layout control" option on the Main Window tab. Then on the Batch page, click the large cogwheel icon and click on "Create new batch operation", pick a name and optionally set the "Open as" field to "Raster Image". On the "Execution" tab, again set the first operation to >JavaScript< and delete the second one. This version would put output files into the default output folder. Here is the code:

var tilesX = 3;
var tilesY = 3;
var cropX = 16;
var cropY = 16;

var path = Context.GetState("OutputFolder");
if (path.charAt(path.length-1) != "\\")
	path += "\\";

// get source filename
var basename = Document.Name;
basename = basename.substr(0, basename.lastIndexOf('.'));

var source = Document.RasterImage;
var sourceX = source.sizeX;
var sourceY = source.sizeY;

var tileX = Math.round(sourceX/tilesX)-cropX-cropX;
var tileY = Math.round(sourceY/tilesY)-cropY-cropY;

var wiz = Application.CreateWizard("35AFBDB5-1B26-4195-8786-83C8E1CBC08E");
wiz.SizeX = tileX;
wiz.SizeY = tileY;
var dst = Application.CreateDocument(wiz, "35AFBDB5-1B26-4195-8786-83C8E1CBC08E");
// always use PNG encoder
Operation.SetFileFormat(dst, {FFEncoder:"1CE9642E-BA8C-4110-87AC-DF39D57C9640"});

for (var y = 0; y < tilesY; ++y)
{
	for (var x = 0; x < tilesX; ++x)
	{
		var srcX = Math.round(sourceX/tilesX)*x+cropX;
		var srcY = Math.round(sourceY/tilesY)*y+cropY;
		Blender.Compose(dst, 0, 0, tileX, tileY, source, srcX, srcY, 0, Blender.OpSrc);
		dst.SaveCopyAs(path+basename+'_'+x+'_'+y+".png");
	}
}

It would be possible to make the number of tiles and crop amount configurable.

kunkel321
on May 22nd 2015

Awesome! Thanks Vlasta!
There does appear to be a glitch with the tile-parsing...
Rather than getting:

Top_Left
Top_Middle
Top__Right
Middle_Left
Middle_Middle
Middle__Right
Bottom_Left
Bottom_Middle
Bottom__Right

I'm getting duplicates such as:

Top_Left
Top_Left
Top_Left
Middle_Middle
Middle_Middle
Middle_Middle
Bottom__Right
Bottom__Right
Bottom__Right

See image: http://i.imgur.com/XbI9sCU.png

I tried to peek at the code to see if I could find the bug, but I don't understand it.

The new Batch Operation GUI is awesome by the way!
Do note that I had to leave the "Open As:" setting as "Not set." If I set it to "Rendered Image," then the original base .PNG file is not visible in the Source Files pane (on the left of the Batch GUI form).

Vlasta
on May 22nd 2015

Oooops, the problem was on the line near the end of the script starting with "var srcX = ...", there was an y instead of an x. I have updated the code in the above entry.

Regarding the "Open as", it should be set to "Raster Image", not "Rendered Image". And yes, this setting also acts as a filter for the left pane with files to process. If you set it to "Raster Image", you should only see image files that the application supports and folders (and .zip files for some weird Explorer-ish reasons).

kunkel321
on May 22nd 2015

That fixed it! Many thanks. :-}
I'm not seeing the "Raster" option...
See: http://i.imgur.com/vh3ZZ7x.png
It could be because I'm loosing my marbles.

I systematically tried all the different options. "Layered Image" and "Not Set" are the ones that allow the .PNG file to be seen...

EDIT: I just now tried scrolling the "Open as" list (in case the Raster option was hiding at the top or bottom). Oddly, the up/down arrow keys and/or the mouse wheel only scrolls to the top two items in the list ("3D Studio Object" and "Icon"). All of the list items are clickable and selectable though.

Not sure if relevant: Am using Win 7, 32 bit.

EDIT2: That blue and green block icon I chose for "Vlasta's chopper cropper." Is that the perfect icon, or what? ;-}

EDIT3: This last part is not really relevant to 'scripting' ...
I didn't start a new thread because I'm not sure if you want RWIE 2014.1 exposed to the masses just yet. Just a couple "feature request-esque" things.
In the Source files navigation toolbar, please consider having a "Favorites" heart button like you do on some other dialogs.
See img: http://i.imgur.com/LRkrOwm.png
I suppose that it would be a different set of favorite locations (batch favorites vs. source file favorites)
Also, on the right pane (Processed files), if a person has defined an "Output folder" in the Configure Batch Operation dialog, then should that folder be shown in the right pane? Maybe not... IDK. Just some ideas.

Vlasta
on May 22nd 2015

That Raster Image not showing is a bug and it should now be fixed. Thanks for reporting it. The keyboard scrolling is harder to fix and probably not a high priority.

The output folder should definitely do what you describe in the final version. I'll see what I can do about the favorites.

kunkel321
on May 29th 2015

Yep, the Raster Image thing is fixed and working as expected...

Vlasta, I don't see any forums or official download locations related to your beta stuff... Do you consider your betas "open" for testing by the public? Is there a preferred sub-forum for that?

EDIT: I'll cross-post this in the General Software forum...

kunkel321
on June 26th 2016

Hi Vlasta, (Edited, see bottom)
Sorry for the bother... Would it be possible to have another look at you above script? I mean the second one--the one for RWIE beta.

Given this (large) source image
http://i.imgur.com/UKW0sOl.jpg

and this script:
=================================

var tilesX = 36;
var tilesY = 9;
var cropX = 8;
var cropY = 8;

var path = Context.GetState("OutputFolder");
if (path.charAt(path.length-1) != "\\")
	path += "\\";

// get source filename
var basename = Document.Name;
basename = basename.substr(0, basename.lastIndexOf('.'));

var source = Document.RasterImage;
var sourceX = source.sizeX;
var sourceY = source.sizeY;

var tileX = Math.round(sourceX/tilesX)-cropX-cropX;
var tileY = Math.round(sourceY/tilesY)-cropY-cropY;

var wiz = Application.CreateWizard("35AFBDB5-1B26-4195-8786-83C8E1CBC08E");
wiz.SizeX = tileX;
wiz.SizeY = tileY;
var dst = Application.CreateDocument(wiz, "35AFBDB5-1B26-4195-8786- 83C8E1CBC08E");
// always use PNG encoder
Operation.SetFileFormat(dst, {FFEncoder:"1CE9642E-BA8C-4110-87AC- DF39D57C9640"});

for (var y = 0; y < tilesY; ++y)
{
	for (var x = 0; x < tilesX; ++x)
	{
		var srcX = Math.round(sourceX/tilesX)*y+cropX;
		var srcY = Math.round(sourceY/tilesY)*y+cropY;
		Blender.Compose(dst, 0, 0, tileX, tileY, source, srcX, srcY, 0,  Blender.OpSrc);
 		dst.SaveCopyAs(path+basename+'_'+x+'_'+y+".png");
	}
}

========================

I get this output:
http://i.imgur.com/EJ8iC0Z.png

Which is similar to the above posted problem that you had fixed a year ago... I checked your explanation about the "var srcX =" and everything appears to be correct (yes?). So I'm not sure what my problem is. Ideas?

EDIT: Waaaaiit a minute. I just re-copied your above code and tried it again, and it does seem to work as expected!!!
http://i.imgur.com/lgE8fYm.png
I'm not sure what I was doing wrong before. Sorry about that!

EDIT2: Man, it's hard to indent all this code correctly!

Page views: 3620       Posts: 8      
Select background
Vista & Win 7 icons
What about ICL files?