Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Distort sprites to make "fake 3D" possible in AGKv2?

Author
Message
Multicoder
AGK Developer
10
Years of Service
User Offline
Joined: 25th Oct 2014
Location: Germany
Posted: 8th Dec 2014 21:58 Edited at: 8th Dec 2014 21:58
Hey guys'n gals

I am working on a memory game. The game itself is already working but I want to make the game look prettier and feel more responsive.
Currently, when I tap on a closed card, the image "under" the card is shown without any animation.

I would like the cards to "flip" in a "fake 3D" manner when I tap them like this (quick drawn in GIMP):


Since I don't want to create an animation atlas for each card separately I want to let the code do the animation dynamicaly.

To do that I would certainly need some commands to distort the sprites.
Are there any available?

Yes, I am aware that I sound like a caveman to native english speakers
Pong Clone 2k14 {Android}
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 8th Dec 2014 23:27
hmm, u need the tile image or getimage command,
SetSpriteScaleByOffset but it have no 3d depth effect.
or mix with 3d
see camera commands
CreateObjectPlane
SetObjectImage
RotateObjectGlobalY

AGK 108 (B)19 + AppGameKit V2 Alpha .. : Windows 8.1 Pro 64 Bit : AMD Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 9th Dec 2014 11:27
You can do this using SetSpriteUV ( iSpriteIndex, u1, v1, u2, v2, u3, v3, u4, v4 ).

I would suggest you leave a transparent area above and below the image, then set the 4 corner positions each frame. It might take some fiddling but I would use the cos/sin commands to edit the u/v co-ordinates each frame based on GetFrameTime().
Multicoder
AGK Developer
10
Years of Service
User Offline
Joined: 25th Oct 2014
Location: Germany
Posted: 10th Dec 2014 00:26 Edited at: 10th Dec 2014 00:27
I played a bit with SetSpriteUV and it seems to be able to do what I want without mixing with 3D (also my brain now hurts really bad^^)

I don't quite get how UV coordinates work, but I managed to distort the sprite nearly the way I want by playing around with the coordinates.

The problem now is that the border of the image seems to be stretched (or smeared) although the card has an alpha-channel.
What can I do to make the "smearing" disappear and instead beeing transparent?

The SetSpriteUV-Code:


The card-image:


The outcome:
[center]

Yes, I am aware that I sound like a caveman to native english speakers
Pong Clone 2k14 {Android}
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 10th Dec 2014 08:11
You need at least 1 empty pixel all the way around the image.
Multicoder
AGK Developer
10
Years of Service
User Offline
Joined: 25th Oct 2014
Location: Germany
Posted: 10th Dec 2014 11:43
Well... I definitely need to sleep the night before posting into the forums... this morning I woke up and thought "Hey! a 1 pixel transparent border around the image should do the trick! I am such a smart guy!" - looked into the forums - obviously baxslash is as smart as me... and faster

Thank you baxslash for showing me the way!

Yes, I am aware that I sound like a caveman to native english speakers
Pong Clone 2k14 {Android}
Matty H
16
Years of Service
User Offline
Joined: 7th Oct 2008
Location: England
Posted: 10th Dec 2014 21:19
Is there a reason you are not using textured 3D planes?

It would be really simple to do this and faster too(in case you need to do many at once).

Multicoder
AGK Developer
10
Years of Service
User Offline
Joined: 25th Oct 2014
Location: Germany
Posted: 10th Dec 2014 21:34 Edited at: 10th Dec 2014 21:37
Quote: "Is there a reason you are not using textured 3D planes?"

Is it no bad coding-behavior to use 3D for a "simple" animation?
If not, well then...

Maybe I should rewrite the whole game to use 3D so the cards can be actual "cards" with 2 sides... *thinking*
Is there a function like GetSpriteHit() for 3D objects?

Yes, I am aware that I sound like a caveman to native english speakers
Pong Clone 2k14 {Android}
Matty H
16
Years of Service
User Offline
Joined: 7th Oct 2008
Location: England
Posted: 11th Dec 2014 13:30
Quote: "Is there a function like GetSpriteHit() for 3D objects?"


Not sure. But if they are always static on the screen then you could easily write a quick hit detection function.

I suggested it because I did something similar once using 2D(Hot Goblins), I coded all the transitions and animations myself for the main menu. It ended up being the slowest part of my game, for low end devices you are best letting the GPU handle it for you.

If it is for PC then it may never be an issue.

Multicoder
AGK Developer
10
Years of Service
User Offline
Joined: 25th Oct 2014
Location: Germany
Posted: 11th Dec 2014 16:56
The animation will play only when you tap (or click) on a card and (if the cards didn't match) they will be "turned" again (max. 2 cards at the same time).

I thought of making a function that receives the card-id as a parameter and then turns it.
I think I will test it and if the perfomance gets too low I will take a look at 3D.

Maybe it's good for me to take a look at the math, since I never fully understood sinus and cosinus in school and even what I understood is already more than 10 years in the past

Yes, I am aware that I sound like a caveman to native english speakers
Pong Clone 2k14 {Android}
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 11th Dec 2014 18:01
3D would be much easier. You can use DrawObject or Render3D to effectively draw the object over what has already been rendered. That way you could use:
Update(GetFrameTime())
Render2Dback()
Render2Dfront()
Render3D()
Swap()

This would manually render 3D above all sprites (or swap 2dfront for 3d to render front sprites above 3d).

It would be much easier I'm sure and performance should not be an issue...
dooz
19
Years of Service
User Offline
Joined: 22nd Sep 2005
Location:
Posted: 11th Dec 2014 21:50 Edited at: 12th Dec 2014 03:38
I was trying to fake a 3d maze recently and I just couldn't get it to work nicely. I went with 3d and (as mentioned above) it is really easy to create planes with an image attached and rotate them to get the effect you want.

Detecting the touch of a "card" can be done in numerous ways. The simplest is to just keep an array of points (x, y) of where all you cards need to be placed (the array index is your card_id), then place your "3d" cards at those location appropriately scaled to be as close as possible to the rectangle size (w, h) of the card. Then it's just a matter of looping through your points and checking the rectangle (x, y, w, h) at each point for the one contains the touch point.

Or am I missing something?
Multicoder
AGK Developer
10
Years of Service
User Offline
Joined: 25th Oct 2014
Location: Germany
Posted: 13th Dec 2014 00:38
The reason why I don't / didn't want to use 3D is that I am a bit scared of it since I have never done anything in 3D myself and it's a bit daunting to me.

However, thanks to you all... I tried it now, but I am struggeling with setting up the camera to the right position.

The code I have is

But that seems to be not right. I want to center the camera so that it works with any resolution (the cards begin at 0,0,0).
The distance (Z = -800) also is not right. I think it may be the case that I have to calculate the height of the camera-triangle based on the x-resolution and the fov-angle, but I don't know the math to do and try it. Google didn't help me either because everything I find are formulars where I have to know at least 3 parameters of the triangle :/

Am I maybe going totally wrong? Or is there an other (easier) way to do what I want?

Yes, I am aware that I sound like a caveman to native english speakers
Pong Clone 2k14 {Android}
29 games
19
Years of Service
User Offline
Joined: 23rd Nov 2005
Location: not entirely sure
Posted: 14th Dec 2014 18:51
In 3D the screen resolution is pretty meaningless when it come to the position of objects and the camera. The aspect ratio is more important as it could mean objects go of the edges of the screen.

Here is a simple example of fives cards (planes) laid out and how to position and orientate the camera.




If you change the screen_width value to 480, then cards on the extreme left and right go off the screen.

If you have the half both the width and height, you get a lower resolution (and in this case smaller window) but all the cards are clearly visible.

If you're feeling really fancy, you can use the mouse to pick the cards.



Login to post a reply

Server time is: 2024-11-25 13:27:32
Your offset time is: 2024-11-25 13:27:32