DE EN FR ES IT CZ
Back Back to top

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

This thread is a few years old. Some details may refer to an earlier version of Visionaire Studio. Current tutorials

  • #1, by Lebostein 12 years ago Quote
    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):

    https://dl.dropboxusercontent.com/u/13472834/visionaire/mug_layer.png

    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):

    https://dl.dropboxusercontent.com/u/13472834/visionaire/mug_cropped.png

    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 getpos.py mug_cropped.png" and you get the coordinates:
    Position x: 1716
    Position y: 540
  • New to Visionaire Studio?

    Create point and click adventures without coding. The free version covers up to 25 scenes per project. For more scenes or to earn money with your game, you need a license.

    See the Indie Bundle Try it for free
  • #2, by afrlme 12 years ago Quote
    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.