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 Chat / 2D animated grass through UV manipulation

Author
Message
Phaelax
DBPro Master
15
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 23rd Jun 2013 22:18 Edited at: 24th Jun 2013 11:15
The equation used for the UV offsets I found while reading this paper:
http://e2d.hardwire.cz/Thesis.pdf (p.31)



Attached is the grass image I made in photoshop. Use the mouse left/right buttons to alter the terrain line. The grass will rotate and reposition to stay aligned.

It's a quick and dirty demo, optimizations can be made.


Attachments

Login to view attachments
george++
11
Years of Service
User Offline
Joined: 13th May 2007
Location: Hellas
Posted: 23rd Jun 2013 22:57
Thanks for this piece of code. It will help me to understand some things that I miss
Cliff Mellangard 3DEGS
Developer
12
Years of Service
User Offline
Joined: 20th Feb 2006
Location: Sweden
Posted: 24th Jun 2013 00:10
Looks very nice and maybe something for bax game

Android 2.3 , ZTE Skate , 480x800 , 800 mhz , Samsung Galaxy Y , 240x320 , 832 mhz , Sony ericson arc 480x854 , 1 ghz
Android 4.0 , Dmtech 3g 9738B , 1024x768 , 9.7 inches , 1.2 ghz
nz0
AGK Developer
11
Years of Service
User Offline
Joined: 13th Jun 2007
Location: Cheshire,UK
Posted: 24th Jun 2013 07:16
Nice bit of work, Phaelax

This needs some studying

baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 24th Jun 2013 08:28 Edited at: 24th Jun 2013 09:48
That's so much nicer than my grass, mind if I use it?

Edit: That's a very small amount of UV shifting just changing the top corners I see. I'll certainly use a version of this idea in my game as it saves quite a bit of image memory. I doubt that using UV scrolling will have much impact on PC but it might on other platforms? Anyway it looks great. I might "borrow" your grass image to get started putting something like this into Kingdom. It solves some issues I had decided to put off for a while and opens up the amount of different vegetation I can add to the game. Thanks for sharing!

Edit 2: It occurs to me I can make grass and other vegetation move when the player walks past it using this method too... mmm


this.mess = abs(sin(times#))
Phaelax
DBPro Master
15
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 24th Jun 2013 11:14
Yea take the image, I don't mind. I just used a grass brush in photoshop for about 5 seconds.

baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 24th Jun 2013 15:01
It's ok, I started making some new images as that one wasn't quite right for me. I'll post a screenshot when I have it working and added to my project.


this.mess = abs(sin(times#))
baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 26th Jun 2013 16:06 Edited at: 26th Jun 2013 16:06
Here's a screenshot of my new vegetation. Not sure I am 100% happy yet with the style but it adds a little more life to each of my biomes!



this.mess = abs(sin(times#))

Attachments

Login to view attachments
Markus
Valued Member
14
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 26th Jun 2013 16:13
@baxslash
i missing some brightness color gradient/variety, a mix of light and darkness.
baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 26th Jun 2013 16:17 Edited at: 26th Jun 2013 16:22
Thanks for the feedback Markus, I'll do something about that now.

Edit: how's this for you?



this.mess = abs(sin(times#))

Attachments

Login to view attachments
Markus
Valued Member
14
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 26th Jun 2013 17:14 Edited at: 26th Jun 2013 17:24
@baxslash
i mean the sprite itself.
naturally it have a variety of color because sun and thickness + season of year or environment.
the leaf at your tree or the grass looks like one color i believe.
it looks already beautiful, maybe just try and compare.
also maybe you can try luminous color gradient with the trunk parts
depending on angle.
what about a leaf color (more or less yellow<>sky blue) depending on angle -> sun.
baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 26th Jun 2013 17:57
Honestly I think that would be taking it too far for now at least. I may look at something like that later but right now there are higher priorities in terms of general gameplay, goals, resources, quests etc.

I did want to get the general system working though which I have now. I also still have at least two more sets of vegetation/trees to sort out for "forest" and "tundra" biomes too.

I like the ideas but I'll leave them for now, thanks though!


this.mess = abs(sin(times#))
Phaelax
DBPro Master
15
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 26th Jun 2013 20:07
You might be able to use this UV technique on your ground as well. It looks like you used a bunch of blocks to make up the terrain. You could adjust the first vertex of each block to match up with the height of vertex 3 of the block preceding it to give it a smoother look.

Naphier
8
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 26th Jun 2013 21:56
@Bax
Quote: " I doubt that using UV scrolling will have much impact on PC but it might on other platforms? "

I use UV scrolling on a few of my weapons in dFenz. It does nothing to change performance on Android as low as 2.3 (HTC Dinc2)
So this method should be very little impact, if any.

@Phaelax - THIS IS AWESOME! I'm not sure if I can use it in my current game, but it does open my mind to using UV offset for more animations. Definitely spurring possibilities.
Thanks!!

baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 26th Jun 2013 23:07
Quote: "You might be able to use this UV technique on your ground as well. It looks like you used a bunch of blocks to make up the terrain. You could adjust the first vertex of each block to match up with the height of vertex 3 of the block preceding it to give it a smoother look."

I considered that. Nice idea but I actually quite like the blocky style now


this.mess = abs(sin(times#))
haliop
10
Years of Service
User Offline
Joined: 2nd Sep 2008
Location:
Posted: 27th Jun 2013 08:35
do not use the blocky style it looks bad ...

baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 27th Jun 2013 09:16
Well unless I think of something I like better I'll be keeping it, sorry. It totally fits the style I want for the game. Hopefully when the game is done it will all come together and make sense


this.mess = abs(sin(times#))
MikeMax
AGK Academic Backer
7
Years of Service
User Offline
Joined: 13th Dec 2011
Location: Paris
Posted: 27th Jun 2013 10:23
haliop,

It doesn't look bad !
You don't like it.

which is very different
haliop
10
Years of Service
User Offline
Joined: 2nd Sep 2008
Location:
Posted: 27th Jun 2013 12:40
true i dont like it , i think the way it was before is better...
my honest opinion :/

haliop
10
Years of Service
User Offline
Joined: 2nd Sep 2008
Location:
Posted: 27th Jun 2013 12:42
maybe add some rocks or something i dont know... it just seems wierd where the trees are high def like and the ground is pixelized.. kinda not feel right..

baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 27th Jun 2013 14:55 Edited at: 27th Jun 2013 14:55
@haliop, I see your point. The vegetation and ground don't match. Unfortunately (perhaps) this took me the other way in my thinking of the style. Perhaps the "Hi-Def" stuff doesn't match my idea for the game. I just did some test images for the grass/bushes and I'm very happy with the results.

1-The style is much more consistent
2-The artwork is far smaller and easier to produce



this.mess = abs(sin(times#))

Attachments

Login to view attachments
The Zoq2
9
Years of Service
User Offline
Joined: 4th Nov 2009
Location: Linköping, Sweden
Posted: 27th Jun 2013 15:17
I realy liked the high def looking grass you ahd before, overall you had a pretty realistic looking world which isn't realy the case with that grass. I liked the first version the best I think, I don't know why though. The balack borders on this anoy me a bit aswell. Also, there has been a lot of indie titles that have had pixelated and "retro looking" graphics just for the fact that it was diffirent, but now that is becomming standard and something more high defenition like you had before stands out more. But it's still your game and if you think this looks better, you should defenitivley stick with it
baxslash
Bronze Codemaster
12
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 27th Jun 2013 15:24
I was actually thinking the same thing on the black borders so I might just tone them down a bit. The problem is (and I'll stop hijacking this thread now, sorry) that going for realism is fine to an extent but it doesn't work with my character style.

I really want the world to match the characters so the style is: "Blocky with organic movement"

I'll refine this look more as I go but for now I'm not going to debate the style any longer. I'm going to go back to my "artist" roots and say only that it will look great when I work out what it is. The clay isn't in the oven yet.


this.mess = abs(sin(times#))
lilpissywilly
AGK Developer
8
Years of Service
User Offline
Joined: 10th Sep 2010
Location: Office Chair
Posted: 27th Jun 2013 15:58
@baxslash

Words of warning, in form of a quote I feel is coming up:

Quote: ""A camel is a horse designed by committee""




PS.
It looks great, keep it up

PPS. That quote feels like it works for AppGameKit as well..


My hovercraft is full of eels
AgentSam
6
Years of Service
User Offline
Joined: 14th Mar 2012
Location: Virtual Space
Posted: 31st Aug 2013 20:25
Phealax, that's a great example of UV animation using "SetSpriteUV".

I've just finished studying your code snippet, and as a result made
a fully commented new version with some improvements.

Attached are the ready to compile project files (without the EXE).

A preview of the code changes, can be seen in this snippet:



Cheers,
AgentSam

Attachments

Login to view attachments
haliop
10
Years of Service
User Offline
Joined: 2nd Sep 2008
Location:
Posted: 31st Aug 2013 22:25
Phaelax
DBPro Master
15
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 31st Aug 2013 22:55
Definitely more modular now.

Zerotown
8
Years of Service
User Offline
Joined: 22nd Jan 2011
Location: Netherlands
Posted: 31st Aug 2013 23:46
Very well commented and understandable. A great addition to an already great code example!

Login to post a reply

Server time is: 2019-02-16 00:53:55
Your offset time is: 2019-02-16 00:53:55