Meego

I've been fooling around with spine to animate bodies etc. However I can't figure out how to make a flat 2d image, in this case, a room, 3d.

https://djenneinitiative.org/wp-content/uploads/joining-walls-dining-room-corner-plaster-dry_716290.jpg

I simply want to make it look like the camera pans to the left, then the right. So imagine taking a step so you are more parallel to the left window, then take a step to be parallel to the right window. Is there a video or something for this? thanks :( :nerd:
User avatar
Meego
Posts: 21

ErikH2000

My first thought is... why would you use Spine to do that? Because you could accomplish it so much more easily in a 3D engine like Unity, and put the sprites on top of a true 3D background.

But it’s still a cool idea.

If I were to do this with the image you provided, it would go roughly like this:
1. Mask out the image in Photoshop/Gimp to divide it into layers, with each containing an image corresponding to a flat surface in the 3D consideration.
2. Extend some of the layers that show behind others so that as the camera later pans, there will be enough of the layer to show correctly for the panned view. (Think about the wall layer behind the chair.)
3. Import the layers into Spine and attach them all to a skeleton.
4. Adjust the attachment offsets until you recreate the original image.
5. Create a new animation for panning left.
6. Add a mesh deformation to one of the larger attachments, like the right wall.
7. Create a key that deforms the attachment to be what it should be at end of your left pan.
8. Add more keys in the middle frames as needed until the attachment looks correct across the whole pan.
9. Repeat steps 6 through 8 for the remaining attachments, until eventually every attachment pans left.

Easy!

No, not easy at all. If you complete this, it will be a triumph for the ages.
ErikH2000
Posts: 49

Nate

Check out Skeletember day 5:
https://twitter.com/Er1k4r1/status/1037431932093689857
A cube like that can either look like it's coming at you, or has depth.
User avatar
Nate

Nate
Posts: 8284

Meego

ErikH2000 wrote:My first thought is... why would you use Spine to do that? Because you could accomplish it so much more easily in a 3D engine like Unity, and put the sprites on top of a true 3D background.

But it’s still a cool idea.

If I were to do this with the image you provided, it would go roughly like this:
1. Mask out the image in Photoshop/Gimp to divide it into layers, with each containing an image corresponding to a flat surface in the 3D consideration.
2. Extend some of the layers that show behind others so that as the camera later pans, there will be enough of the layer to show correctly for the panned view. (Think about the wall layer behind the chair.)
3. Import the layers into Spine and attach them all to a skeleton.
4. Adjust the attachment offsets until you recreate the original image.
5. Create a new animation for panning left.
6. Add a mesh deformation to one of the larger attachments, like the right wall.
7. Create a key that deforms the attachment to be what it should be at end of your left pan.
8. Add more keys in the middle frames as needed until the attachment looks correct across the whole pan.
9. Repeat steps 6 through 8 for the remaining attachments, until eventually every attachment pans left.

Easy!

No, not easy at all. If you complete this, it will be a triumph for the ages.
hm.. ill try it. thanks

---

Nate wrote:Check out Skeletember day 5:
https://twitter.com/Er1k4r1/status/1037431932093689857
A cube like that can either look like it's coming at you, or has depth.
interesting, I can more or less see how its down, ill give this a shot, thanks.
User avatar
Meego
Posts: 21

decoamorim

Nate wrote:Check out Skeletember day 5:
https://twitter.com/Er1k4r1/status/1037431932093689857
A cube like that can either look like it's coming at you, or has depth.
This is so cool!
Developer/Founder at DCF Studios
http://www.studiosdcf.com/
Author of
Cruz Brothers[PS4 / STEAM] [upcoming on XboxOne] - http://www.cruzbrothersgame.com
Bunny Battle Arena[STEAM] - https://store.steampowered.com/app/872340/Bunny_Battle_Arena/
User avatar
decoamorim
Posts: 122


Return to Editor