Omnimaga

Calculator Community => TI Calculators => TI-BASIC => Topic started by: {AP} on February 13, 2009, 12:24:33 pm

Title: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 13, 2009, 12:24:33 pm
(http://img88.imageshack.us/img88/1412/nyaarscrolltitlevo6.gif)
(Note: Attached to this post is the Pic that you can use for this tutorial and the final program.)

The key to the scrolling background is order and only updating the LCD once per cycle.

For a basic background that scrolls rain down and to the left with nothing else, here's the code. I'll explain it in depth afterwards.
Code: [Select]
:0→X
:0→Y
:real(0
:Repeat 0
:identity(8,"2040840810000000",X,Y,0,1
:X-1→X
:Y-1→Y
:End

The first question you'll probably ask is the about "identity(8,...".
It's syntax is as follows:
Code: [Select]
identity(8,"HEXSTRING",right,down,LOGIC,UpdateLCD

"HEXSTRING" = 16 digit long hex code for the sprite in question. I made the rain sprite earlier
down = Pixels down the screen. Limit is -99999 to 99999.
right = Pixels to the right of the screen. Limit is -99999 to 99999.
LOGIC
0 = Overwrite (what you'll use most likely)
1 = And
2 = Or
3 = XOR
UpdateLCD
0 = No update
1 = Update

As you might have noticed, it looks like you can only go down and right.
Well, if you go right a negative amount, you go left. Same is true for down.

Now, you want something on top of your scrolling background.
You'll need to make a picture. Everything black stays black and white will be 'transparent'.
Just draw something up quick. (or download the pic in the attachment and use that... it's Pic3)

Now, to get it to show up. We'll need to modify the above code.
Code: [Select]
:0→X
:0→Y
:real(0
:Repeat 0
:identity(8,"2040840810000000",X,Y,0,0
:real(3,<your pic number>,3,1
:X-1→X
:Y-1→Y
:End

You'll notice 2 changes. First, the 'identity' code ends with a '0' now.
Second, you have the 'recall pic' command out and it DOES update the LCD.
If you want to know why they're not both updating... try it out with both.
Like the 'flicker' you see? I didn't think so.

Now, you're probably wondering how to make a white space on the screen.
How about one with a black border? For this example, we'll do that one.
Code: [Select]
:0→X
:0→Y
:real(0
:Repeat 0
:identity(8,"2040840810000000",X,Y,0,0
:real(3,<your pic number>,3,0
:real(12,9,13,25,44,61,1  //real(12,9,x1,y1,x2,y2,update
:X-1→X
:Y-1→Y
:End

Once again, we're only updating the screen once, and it's the very last time.
The bounds for the box can be changed how you like. This is the box for Nyaar!'s title screen.

Now, you want text in that box, right?
The easiest way to do it is to make sure the pic you made has the text on it where you would like it to appear. (in this case, in the box)
Code: [Select]
For this box, you have room for 5 options and about 6 characters long.
Option(X,Y)
New(15,26)
Load(15,33)
Help(15,40)
Credits(15,47)
Quit(15,54)
But, if you look at our current code... it seems that the box will overlay the text. Well, this is because of ordering.
Switch the order of of the Pic and Box.
Code: [Select]
:0→X
:0→Y
:real(0
:Repeat 0
:identity(8,"2040840810000000",X,Y,0,0
:real(12,9,13,25,44,61,0
:real(3,<your pic number>,3,1
:X-1→X
:Y-1→Y
:End

Once again, only one update and make sure it's the last one.
Finally, you'll want to have the options selectable.
This is my code for it, the important part is where you put the "real(12,8,...".
(Also note that this is for the box I made. The x's and y's will be different for you if you used another.)
Code: [Select]
:0→X
:0→Y
:1→M
:real(0
:Repeat K=105
:getKey→K
:M+(K=34)(M<5)-(K=25)(M>1→M
:identity(8,"2040840810000000",X,Y,0,0
:real(12,9,13,25,44,61,0
:real(3,<your pic number>,3,0
:real(12,8,14,26+7(M-1),43,32+7(M-1),1
:real(12,8,14,26+7(M-1),43,32+7(M-1),0
:X-1→X
:Y-1→Y
:End

Now, you might be confused with why there's not only a duplicate of the 'box' that shows what option is selected.
Not only that, the last thing does not update the LCD.
This has to do more with logical thinking. What it's doing is the first one highlights the selected option and shows everything you've done before it.
The second one un-highlights it, but doesn't show you that you've un-highlighted it.
By the time it DOES update, it'll have highlighted whatever the selected option is. Whether or not it's the same.
(http://img518.imageshack.us/img518/2681/tutmq0.gif)
Well, now you have a working title screen.
After the 'End' you can add the 'If M=1:Then:<Do whatever>:End:Etc...' to make the options actually do something.
Of course, M=1 is the first options, 2 the second, etc.
If you have any questions, ask me.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: metagross111 on February 13, 2009, 12:54:46 pm
shit, this is awesome, {AP}!
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 13, 2009, 01:00:21 pm
Thank you. =D
It only took about an hour (maybe 2) of playing around with what Iambian said.
I do think that at least 16x16 sprites should be possible at least. (I know you'll read this, Iambian.)

Um... do you think I should add a short tutorial for how hex coded sprites work?

(EDIT: I did anyway, check the second post.)

EDIT 2011: Split sprite tutorial into individual topic due to the new tutorial section only fetching the first post http://ourl.ca/11553
Title: Re: Celtic III Scrolling Background Tutorial
Post by: kalan_vod on February 13, 2009, 01:24:36 pm
Very nice work there, I can not remember how nickachu did his but I think cletics hex sprite makes it a little easier/quicker..Thanks!
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 13, 2009, 01:25:16 pm
No problem. Helping out the community is what I do. ^_^
Title: Re: Celtic III Scrolling Background Tutorial
Post by: trevmeister66 on February 13, 2009, 02:06:54 pm
Woot thanks. Heh I think I'll have to use this in just about every program I do from now on..
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 13, 2009, 02:13:38 pm
As an extra note... if you only want it to scroll in one direction, make the other constant (usually 0).
Example:
Code: [Select]
:identity(8,"2040840810000000",X,0,0,1Only goes left or right. (depending on whether you add or subtract X)
Code: [Select]
:identity(8,"2040840810000000",0,X,0,1Only goes up or down. (depending on whether you add or subtract X)
Title: Re: Celtic III Scrolling Background Tutorial
Post by: metagross111 on February 13, 2009, 02:57:14 pm
you know, can this be used possibly for parallax scrolling, maybe? i don't see a lot of that in calc games.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on February 13, 2009, 03:54:51 pm
this is awesome, but do we really have to mess with Hex? Or is there an alternative compatible with xLIB? I think Bowling used xLIB and had scrolling. I am curious because I get confused easily when trying to make sprites using hex code and end up with trial and error until it displays right x.x
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 13, 2009, 04:44:32 pm
If xLIB is capable, I have no clue how one would get it to work.

Well, I guess that's where Nitacku rushes in to save the day.
I personally don't mind the hex thing. Less sprites to draw on a Pic.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: metagross111 on February 13, 2009, 05:09:58 pm
anyway, what do you guys think of parallax scrolling? think i can modify these commands to do so with operators and LCDupdate?

EDIT: post 333 lol.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on February 13, 2009, 06:08:18 pm
Even without that command parralax scrolling would be easily possible. With Celtic method, just move the background position by like 2 or 4 pixels when your character moves one tile, in the same direction than you moved. However, for that, you need to use masking for your tilemap displaying, in the same fashion than how the scrolling backgrounds have to be displayed. I only attempted it once as I said, but I had a static background. It can be slow, but I doubt it would be as slow as high quality 4 level xLIB/Celtic grayscale
Title: Re: Celtic III Scrolling Background Tutorial
Post by: nitacku on February 13, 2009, 07:30:15 pm
hmm, I was beaten to the punch :P

I have yet to reveal the animated scrolling background, which i will do, as soon as i write the tutorial.
I've also got some interesting masking techniques that you might enjoy.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on February 13, 2009, 08:13:26 pm
I can't wait ^^

SHould we move this topic in the Help section and pin it?
Title: Re: Celtic III Scrolling Background Tutorial
Post by: nitacku on February 13, 2009, 09:29:35 pm
hmm, maybe we should create a massive Celtic/xLIB tricks & techniques tutorial.
I know general tutorials already exist, but there are no special tutorials combining everything the community has to offer.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: metagross111 on February 13, 2009, 10:08:16 pm
i wish i could help, but i have yet to discover anything useful, lol :)
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Iambian on February 14, 2009, 12:17:35 am
I'm probably gonna go ahead and write up a small tutorial involving some of the technical functions that might go right over BASIC users' heads. Like how to use the binary read/write functions and its bin/hex/dec converter to extract useful information out of it, so that you can effectively have a variable keeping track of "int" data instead of bulky float (real) vars.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 14, 2009, 12:23:03 am
Hm... when these tutorials get written up, do any of you (Nitacku and Iambian currently) mind if I post them on my site?
Proper credit will be given, of course.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: metagross111 on February 14, 2009, 12:26:32 am
only a jerk would say no anyway ;)
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 14, 2009, 12:31:11 am
Haha, true. Still, it's common courtesy to ask first.

Speaking of such, I should update the site's tutorial page.
Be back in a few minutes. Or hours.
ADD is one hell of a mental condition. ^_~
Title: Re: Celtic III Scrolling Background Tutorial
Post by: metagross111 on February 14, 2009, 12:43:45 am
ADD? you has it?

when i was twelve, one out of two doctors diagnosed me with ADD. however, since we never pursued any sort of treatment or anything. i assumed i didn't have it.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on February 14, 2009, 01:56:51 am
Has it.
Still finished.

All video tutorials and this tutorial are now on my site (http://anti-pi.webs.com).
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Galandros on February 14, 2009, 07:12:35 am
hmm, maybe we should create a massive Celtic/xLIB tricks & techniques tutorial.
I know general tutorials already exist, but there are no special tutorials combining everything the community has to offer.
It could bring great graphics games in BASIC by more more people. ^^
You are making me to start using xLib/CelticIII...
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on February 14, 2009, 09:54:36 am
actually on TI-BD it might be a good place, since there is alerady the xLIB Guru there, but it's ok on your site. Just make sure to have a copy on Omnimaga in case your webhost went down or if your site got cracked. x.x
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Drak on February 14, 2009, 10:02:50 am
only a jerk would say no anyway ;)

wat aboot a toal beef jerkiee???
Title: Re: Celtic III Scrolling Background Tutorial
Post by: skuller972 on May 19, 2009, 08:02:21 pm
if you stare at the screenshot, it goes from looking like snow to like a rocket going up to a vertical view of a plane over water.
sorry i just wanted to let everyone know that...
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on May 19, 2009, 08:07:09 pm
if you stare at the screenshot, it goes from looking like snow to like a rocket going up to a vertical view of a plane over water.
Drugs are bad
Title: Re: Celtic III Scrolling Background Tutorial
Post by: noahbaby94 on May 19, 2009, 08:08:38 pm
if you stare at the screenshot, it goes from looking like snow to like a rocket going up to a vertical view of a plane over water.
Drugs are bad
They really are.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: trevmeister66 on May 19, 2009, 08:20:57 pm
not if they're free

Title: Re: Celtic III Scrolling Background Tutorial
Post by: Iambian on May 19, 2009, 08:38:21 pm
I think... this is the first time I've seen the topic. Gawd, gotta check here more often and stuff.

But, on a much earlier note, 16x16 should be possible, but I did 8*8 because the ASM code used for that was extremely simple to get working. I may make an extension to the same command some time later. My plan: Check the string as to whether or not it'll make a 8*8 tile or a 16*16 tile. Nothing else should be needed.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on May 19, 2009, 08:39:55 pm
Oooo... 16x16 would be fun to play with too.
I'll mess with it at a later date though.
Busybusybusy..
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on May 19, 2009, 08:54:52 pm
Busybusybusy..
Nyaar Raycaster edition
Title: Re: Celtic III Scrolling Background Tutorial
Post by: trevmeister66 on May 19, 2009, 09:07:17 pm
Busybusybusy..
Nyaar Raycaster edition
Now that would be sweet
Title: Re: Celtic III Scrolling Background Tutorial
Post by: noahbaby94 on May 19, 2009, 09:08:35 pm
Screw raycasting we need raytracing.
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Builderboy on May 19, 2009, 09:29:13 pm
We need to port Crysis to 84's
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Iambian on May 19, 2009, 10:44:34 pm
Offtopic, much?

If you want 16*16 sooner, why don't you put up some code for it?
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Builderboy on May 19, 2009, 10:55:56 pm
Noahbaby drifted, i drifted more :)
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Eeems on May 19, 2009, 11:01:12 pm
onto UnSS I see
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Eeems on June 11, 2009, 08:28:45 pm
hmm, I just noticed a slight optimization you could make to the code, at the start where it goes
Code: [Select]
:0->X
:0->Y
you could change that to
Code: [Select]
:Delvar XDelvarYit would save 3 bytes I believe

EDIT: upon closer inspection I found another optimizations, replace
Code: [Select]
:M+(K=34)(M<5)-(K=25)(M>1→Mwith this:
Code: [Select]
:M+(K=34 and M<5)-(K=25 and M>1→Mso that brings the total bytes saved to 5...
Title: Re: Celtic III Scrolling Background Tutorial
Post by: {AP} on June 20, 2009, 12:22:04 am
I coded this thing too fast. Thanks for the optimizations though.
Sometimes you just don't notice these things, eh? =P
Title: Re: Celtic III Scrolling Background Tutorial
Post by: Eeems on June 20, 2009, 04:17:23 pm
yeah, I always see them when I go back through my code, afterwards I always wonder what I was thinking when I used that piece of code
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on November 12, 2009, 11:52:08 pm
I moved this in help and support because since it was in another project forum it wasn't visible too much for those who wants help x.x
Title: Re: Celtic III Scrolling Background Tutorial
Post by: meishe91 on August 08, 2010, 01:27:36 pm
Ya, this is a necro-post. But oh well, just letting people know that {AP}'s tutorials are now in the Tutorial thread :)
Title: Re: Celtic III Scrolling Background Tutorial
Post by: DJ Omnimaga on August 08, 2010, 06:15:00 pm
Nice :)