Using Piskel to pin down the coordinates (PC ver. only)

Learn here how to create and use plugins.

Moderator: Plugin Moderators

User avatar
Player_no_Zero
Metropolitan
Reactions:
Posts: 140
Joined: 06 May 2019, 09:18
Location: Somewhere in Manila, Philippines
Plugins: Showcase Store

Plugin Creator

Platform

Using Piskel to pin down the coordinates (PC ver. only)

#1

Post by Player_no_Zero »

For the context of the building I'm about to show, I asked MayorRascalov to edit his Filipino buildings in Celebration of Philippine Independence Day and he agreed on it and permitted me to do so.
Last time I had trouble getting the coordinates to add my animation in some of the buildings I currently worked on. While working on the other buildings, I found a shortcut to get the coordinates in a fast and easy way. You also need a pen and paper to easily remember your coordinates.
This is the old way of getting the coordinates
This is the old way of getting the coordinates
Screenshot (20).png (151.19 KiB) Viewed 1627 times
This one takes time to get the coordinates. You have to COUNT EVERY SIGLE PIXEL in your sprite.

First: You must know that the Longest line of the sprite is the center of the Y-axis of the code.
Screenshot (23).png
That green line as can be seen from above is the center I'm talking about.

Next: You must know the points of where you gonna put your animation sprites
just imagine that the green background colour doesn't exist.
just imagine that the green background colour doesn't exist.
image.png (92.85 KiB) Viewed 1627 times
Here we have the example of "Where are we gonna put the animation sprites"
Screenshot (24).png
Those green dots are my target points.

Next: You need to lock your sprite sheet. If You had a case similar to MayorRascalov where his buildings had extra space, you'll need to lock your sprite for the next guide won't be a problem.
Screenshot (25).png
you need to select the biggest size for easier locking. The canvas of Piskel is not free formed so you cannot lock it surely and without a doubt.

Next: Is to cut the bottom portion of the sprite.
Before
Before
Select first the 'Square selection tool'.
"Select" the rest shown above.
Then press the "Delete" key or "Backspace" key (they worked the same) to delete the rest.
Screenshot (27).png
After
After
Then: You need to resize the sprite by the cropping tool
Annotation 2020-04-23 122126.png
Annotation 2020-04-23 122126.png (15.39 KiB) Viewed 1627 times
So that the extra empty space below will be gone.
The mirror it vertically.
Annotation 2020-04-23 122201.png
Annotation 2020-04-23 122201.png (11.08 KiB) Viewed 1627 times
Hold the "alt" key then press it.
this is the result
this is the result
Since the line is now at the top it is now Y:0.
As you can see it retained the original shape at the top. Though this may be unnecessary.

Final: you need to pinpoint the coordinates by just aiming at it. Use your cursor and look at the bottom right.
Screenshot (30).png
At the bottom right, the coordinates are shown. 8 (X coordinate) : 15 (Y coordinate).

Finally Ctrl Z everything.

That is how you find the coordinates fast and easy.
Please ignore everything you see in the background.
IF YOU ARE USING DIFFERENT PIXEL EDITING APPLICATION OR OTHER PAINT SOFTWARE I'M SORRY I CANNOT HELP YOU WITH THAT. I'M USING PISKEL AND KRITA AS MY APPLICATIONS FOR EDITING AND CREATING PLUGINS. IF YOU HAVE A QUESTION ABOUT YOUR SOFTWARE THAT YOU ARE USING, I'M SORRY.
Last edited by Player_no_Zero on 24 Apr 2020, 10:07, edited 2 times in total.

User avatar
Player_no_Zero
Metropolitan
Reactions:
Posts: 140
Joined: 06 May 2019, 09:18
Location: Somewhere in Manila, Philippines
Plugins: Showcase Store

Plugin Creator

Platform

Re: Using Piskel to pin down the coordinates (PC ver. only)

#2

Post by Player_no_Zero »

please ignore the red dot and the extra space in the "crop the sprite" image

Post Reply Previous topicNext topic

Return to “Tutorials and Documentation”