get image position after cropping images (very technical, but helpful)

  • #1, by LebosteinFriday, 03. April 2015, 14:42 5 years ago
    For creating scene images I use a layer based graphic editing program (like Inkscape, Gimp or Photoshop). For all removable objects in the scene I create a separate layer. After exporting all layers I have a stack of full size images like that (the biggest part of the image area is transparent):

    Now I could use this image as it is on screen position 0,0. But if you have many object layers like that (animations for example) the video memory could be a problem. The only solution is to crop the image. On Linux and Mac OS the command line tool "convert" is very helpful. If you type:

    convert mug_layer.png -trim mug_cropped.png

    you get a cropped image (-trim is an auto crop function):

    But what is the exact position of that image now? If you are annoyed by positioning "by hand", here is a little hint: The convert tool add a new chunk named "oFFs" (Image Offset) inside the png, that saves the upper left corner from the crop operation. You can display that coordinates by an information call of "convert":

    convert mug_cropped.png info:

    And what you get is the correct image position of your cropped image (the two values with the + before):

    mug_cropped.png PNG 112x126 1920x1080+1716+540 8-bit Grayscale Gray 3.88KB

    X-Position = 1716
    Y-Position = 540

    PS: You can read out that "oFFs" chunk inside the PNG with a simple python script too.
    Type "python mug_cropped.png" and you get the coordinates:
    Position x: 1716
    Position y: 540

    Key Killer

    598 Posts

  • #2, by afrlmeFriday, 03. April 2015, 15:59 5 years ago
    Positioning is always based on the top left pixel, however you can use the getSize() function on an objects sprite to return the width & height of the associated image which you could then use a bit of math to determine the image position based on the center of the image as opposed to the top left pixel. So you would do something like position.x = coordinate.x - (half image width). Same for y.

    Personally I use 2 backgrounds.One I call temp which is the final background but with objects & so on placed in the background image, which I use for quickly aligning cropped images / animations. The second is the final background without the foreground or objects, etc, which I replace in the temp backgrounds place.

    I suppose another alternative would be to export out an image with a transparent background that contains the objects in their correct place & then add it as an object & adjust transparency or whatever to create a sort of onion layer for alignment purposes.

    There's always lots of methods & approaches to everything.


    6804 Posts

Write post