Dark Bit Factory & Gravity
PROGRAMMING => General coding questions => Topic started by: DeXtr0 on July 30, 2007
-
Hey everybody,
Since this question can be asked to all coders, I'm going to ask it here.
Our GFX guy sended me this as screenprint as example of an effect he would love to have (in one of our demo's).
I tried and tried and really hurted my brain but I just don't get the technique of how to code it.
I did the sinusscrolling (basic) already with all characters clipped in 1 pixel width sprites but I just don't know what to do next ???
Does anybody has an idea ?
All help appreciated,
DeXtr0
P.S. I'm trying to code it in PureBasic
-
Kind of difficult to see what that effect does from the screen shot, but I will give it a try :)
Now, it seems as if the letters all keep the same width at least, it is the height of the letters that is changed.
It looks a little different to a normal sine scroll and I'd guess that the letters are being scaled vertically and not just sined!
And it looks more complicated than that still... The sine curves run smoothly through the line of text and so it brings me to the solution.
You need to have two sine waves and they both need to be slightly different so that the letters will stretch in between them.
You can use something called linear interpolation to stretch the scroll in between the sine waves. (see the pic below).
Again, working across the screen for each point of the sine wave you subtract the top from the bottom to give the size of the gap.
You then scale the strip of letter to fit the gap, drawing the top bit of it at the top wave.
This is assuming that you have a command in PB that lets you stretch sprites. (I believe that drawimage does???)
If you don't have that then you will need to stretch them manually and that means dividing the height of the letter by the size of the gap to get the value to interpolate by, it's a very simplified version of texture mapping.
But to put it as simply as I can, you need to think of this effect as stretching the letters to fit the gap between two sine waves.
-
Hey shock,
Always the master that answers first :D
The idea of the vertical sizing is possible. I'm going to give that a try first
Then i'll see if I need 2 sinustables for the upper y and the lower y pos.
I'm going to try it again..
Keep you informed,
1000x Thanks,
DeXtr0
-
@DeXtr0:
do you know any demo where we can see the fx you requested? Maybe it would be nice for furture questions, if you can link to a demo (or video) if the fx is not really visible ^^ thx and happy coding :)
-
Sure va!n,
Our stuff is on our website www.dawncreations.com but we have only released 1 intro and one of our coders is coding a small risk-clone atm.
I'm coding mainly on our effects library ;)
The effect i talked about is a BIT like the one in this intro but in this intro it's elite and that i can (not) yet code :(
Cheers,
DeXtr0
-
@DexTr0:
Don't really know - guess Shockwaves idea about interpolation and/or different sinus tables
are most precise. Although I wonder if there arent any simpler way of doing it. Sometimes
you can achieve realistic looking fx with very simple equalations.
Nevertheless, I would first have a go trying it with zooming the clipped regions in and out.
Maybe this looks something like the desired fx...or accidently looks cool in another way ;-)
Anyway - good luck !
-
Hey Benny, Shockwave, Vain and all others
This is what I managed to code yesterdayevening+night ;)
But i'm not yet 100% there I think..
What do you think ?
Cheers,
DeX
-
@DexTr0:
Runs smooth here - but you are right. It just looks like the scroller gets bigger and
smaller.
Guess we need some translation in 3D. Meaning, that you add to the upper x,y
and lower x,y coordinate of a clipped area some z-/depth factor. And then re-
calculate its 2D coordinates (like you do it with 3D starfields). Maybe this looks more
realistic ???
-
I can not say : x,y coordinates of the top of the clipped sprite = 10,20 - x,y coordinates of the bottom of the clipped sprite = 60,30
atm i am not really sure what you mean. sorry! but do you means something like the command ClipSprite() ?
[Accidental Edit - Shockwave (sorry DeXtro!) ]
-
Nice work, that's exactly the way I imagined it would look.
In the class intro you posted, this is definately some textured quads using opengl or what ever api they used. It is different to the effect you have achieved.
A couple of ideas..
First your sinetable (the bottom one) seems to have a sharp step in it which hurts the effect a little bit.
Second, benny is right about the 3D thing, but it may be better in this case to stretch the scroll across in the same way to make some letters narrower..
I don't know what to say exactly, I have a feeling that this is one of those cases where you might go in and try to do something, but come out the other side with something a little bit different (though just as good!).
-
Hrhr editing my posts haha :)
Nah no problem shockwave accidence can happen :)
And yeps I will try to do better but I don't know what i can do more.
I have to experience with transformSprite3D but as you can see in the example, I'm going in the good direction..
You tip was a golden one :clap:
Soon an intro will follow with this effect (i hope)
Cheers,
DeXtr0
PS. Feel free to register on our forum aswell..
-
Sorry about that Dextro, it happened because the quote button is right next to the modify button :(
Never knew you had a forum, I'll reg.
And I'm looking forward to seeing the intro!
-
That was a fast reg ! :hi:
-
...
Soon an intro will follow with this effect (i hope)
...
Cool news - looking forward to see it !!!
-
Cool! I am still looking forward too ;)
-
Haha you will guys.
Btw you are both in the greetings for helping me out ;)
Cheers,
DeXtr0
P.S. Feel free to join our forum too. Always welcome...
-
Mhhhh.... i think following is not the OldSkool coding way but maybe you can use or just test this way as you are using Sprite3D already, right? I still have an idea but i am not sure if this way would work.
What about when having for the scroller an own texture for example if the screen is 640x480 and each fontchar 32x32 pixel... to use a 640x32 texture with some vertices like follwing:
+-+-+-+-+-+-- - -
|\|\|\|\|\|
+-+-+-+-+-+-- - -
You could draw your scroller on this texure and transform each vertices for x,y for sinscroller and z for doing a zoom (transform) fx i.e.?! Just an idea...
-
...
P.S. Feel free to join our forum too. Always welcome...
Registered 8)
-
Mhhhh.... i think following is not the OldSkool coding way but maybe you can use or just test this way as you are using Sprite3D already, right? I still have an idea but i am not sure if this way would work.
What about when having for the scroller an own texture for example if the screen is 640x480 and each fontchar 32x32 pixel... to use a 640x32 texture with some vertices like follwing:
+-+-+-+-+-+-- - -
|\|\|\|\|\|
+-+-+-+-+-+-- - -
You could draw your scroller on this texure and transform each vertices for x,y for sinscroller and z for doing a zoom (transform) fx i.e.?! Just an idea...
good exlanation and it would lead to the effect in the class intro :)
-
Hey Va!n,
can you explain a bit more ? I don't follow 100%
Drawing on a texture should be possible but the "vertices" I don't understand completely ?
Can you drop me a light on this one please ?
Thanks,
DeXtr0
-
A vertex just means a point, verticies is the plural term for vertex.
In a triangle there are three verticies, each vertex typically has it's X,Y and Z co-ordinates.
X+Y being horizontal and vertical, Z being depth.
In your case they will also have UV co-ordinates.
U and V refer to horizontal and vertical positions in a texture map (your scroll text) and by splitting up the 2D image of your text into those little triangles you will be able to have a scroller that can sine in and out of the screen as well as up and down :)
-
@Dextro:
I have created you a small image that should explain what i mean with the transformation and how it may/could work. Hope the image is good enough to understand... first you see just your texture where you can draw your scroller on... next you will the texture and its vertices... at least you will see, how it could look like when transforming (moving) the vertices (points).
(http://www.secretly.de/dbf/transformed_texture.gif)
-
Hey Va!n, Shockwave
It's getting much clearer now, thanks to the example.
Just a (stupid) question:
How can I convert the sprite with the scroller on, to vertices ?
Is there a way to "cut out/Splitting" vertices of a sprite ?
This is something really new to me..
ClipSprite, which we use now can only cut rectangular things like a box..
Splitting up in triangles looks really cool but how ???
A tip would be handy since I never did that ?
Regards,
DeXtr0
-
@DeXtr0:
I haver never really used the PB Sprite3D stuff as i don't really like the commands (also things that you can do with in PB)... Atm i am not sure how to change the number of vertices... i think it could be possible by knowing and changing the internal PB sprite3D structure... i will think about it.. (btw, cutting the original texture to a lot small would not be my cup up tea... there must be another way for a smooth solution)
-
I hope there is VA!n :)
I just found this on the PB forum:
Structure PB_Sprite3D
Texture.l
Vertice.D3DTLVERTEX[4]
Width.w
Height.w
EndStructure
Now I need to hurt my brains to see how I can change this "internal structure"
Cheers,
DeXtr0
P.S. Nevertheless if you find something let me know
-
I suppose that you could split it up into squares too if it came to that. There wouldn't make much difference.
You can deform all vertices independantly after you grab the sprite anyway I am guessing?
-
Hey Widowmaker,
I suppose you are right.
I think I can transform the squares too (with transform3D) to get maybe the same result.
I have to try that as soon as my real life work is less stressy.
Anyway, it's a good idea too ;D
I'll try it soon,
DeXtr0
-
@Dextro:
I have created you a small image that should explain what i mean with the transformation and how it may/could work. Hope the image is good enough to understand... first you see just your texture where you can draw your scroller on... next you will the texture and its vertices... at least you will see, how it could look like when transforming (moving) the vertices (points).
(http://www.secretly.de/dbf/transformed_texture.gif)
Thanks dude.. I'm just stealing that idea, if that is ok with you ;)
-
Sure if you send me the code :)
I just release a demo on our own website which has partly this code (not the transform stuff but a bit of zooming)
If you wanna see feel free and drop me some feedback..
Cheers,
DeXtr0
-
Sure if you send me the code :)
I just release a demo on our own website which has partly this code (not the transform stuff but a bit of zooming)
If you wanna see feel free and drop me some feedback..
Cheers,
DeXtr0
hehe :) I can post the code, if you promise not to laugh :) I write really shitty code... But do you have link for your demo? I'd like to see it, if I may do so :)
-
Sure if you send me the code :)
I'd say that no effect is the copyright of an author and seeing as the effect is based on a Class demo that nobody has to send you the code if they don't want to.
I just release a demo on our own website which has partly this code (not the transform stuff but a bit of zooming)
If you wanna see feel free and drop me some feedback..
As per the rules of this forum a link to your website is permitted in your sig as long as it's small. Also you may post one topic in the links forum to promote your site because it is programming related.
That much you can do, if you want feedback on your intro / demo, post it here please.
Especially as you have used this community to help you develop it.
If you have not read the forum rules, please do so because the use of this community is a privilage, not a right and you must follow the guidelines if you want to use this place in the future. Thank you.
-
Sure you get the link.
I will make a seperate topic in the right section
PS. Do not laugh I'm still learning too...
@Shockwave, sorry I'll read the rules again and I'll post the intro in showcase section since it's a finished one. You are completely right.
-
Thanks for your understanding on this :) I am looking forward to seeing how the intro turned out so please do post soon!