### Author Topic: Celtic III Scrolling Background Tutorial  (Read 13105 times)

0 Members and 1 Guest are viewing this topic.

#### {AP}

• Posts: 981
• Rating: +74/-3
• I am Webmaster!
##### Celtic III Scrolling Background Tutorial
« on: February 13, 2009, 12:24:33 pm »

(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

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
: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(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)
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
: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(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.

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.
« Last Edit: February 13, 2009, 01:17:06 pm by {AP} »

#### metagross111

• Guest
##### Re: Celtic III Scrolling Background Tutorial
« Reply #1 on: February 13, 2009, 12:54:46 pm »
shit, this is awesome, {AP}!

#### {AP}

• Posts: 981
• Rating: +74/-3
• I am Webmaster!
##### Re: Celtic III Scrolling Background Tutorial
« Reply #2 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
« Last Edit: June 14, 2011, 01:40:02 am by DJ_O »

#### kalan_vod

• LV11 Super Veteran (Next: 3000)
• Posts: 2715
• Rating: +10/-0
##### Re: Celtic III Scrolling Background Tutorial
« Reply #3 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!

#### {AP}

• Posts: 981
• Rating: +74/-3
• I am Webmaster!
##### Re: Celtic III Scrolling Background Tutorial
« Reply #4 on: February 13, 2009, 01:25:16 pm »
No problem. Helping out the community is what I do. ^_^

#### trevmeister66

• LV9 Veteran (Next: 1337)
• Posts: 1009
• Rating: +14/-5
##### Re: Celtic III Scrolling Background Tutorial
« Reply #5 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..
Projects:    nameless RPG: 1.0%  |  Reverse Snake v1.5: 100%  |  Secret Project: 5%  |  DUNGEON: 70%

My MW2 Blog <-- Please visit

#### {AP}

• Posts: 981
• Rating: +74/-3
• I am Webmaster!
##### Re: Celtic III Scrolling Background Tutorial
« Reply #6 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)

#### metagross111

• Guest
##### Re: Celtic III Scrolling Background Tutorial
« Reply #7 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.

#### DJ Omnimaga

• Clacualters are teh gr33t
• CoT Emeritus
• LV15 Omnimagician (Next: --)
• Posts: 55935
• Rating: +3153/-232
• CodeWalrus founder & retired Omnimaga founder
##### Re: Celtic III Scrolling Background Tutorial
« Reply #8 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

#### {AP}

• Posts: 981
• Rating: +74/-3
• I am Webmaster!
##### Re: Celtic III Scrolling Background Tutorial
« Reply #9 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.

#### metagross111

• Guest
##### Re: Celtic III Scrolling Background Tutorial
« Reply #10 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.

#### DJ Omnimaga

• Clacualters are teh gr33t
• CoT Emeritus
• LV15 Omnimagician (Next: --)
• Posts: 55935
• Rating: +3153/-232
• CodeWalrus founder & retired Omnimaga founder
##### Re: Celtic III Scrolling Background Tutorial
« Reply #11 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

#### nitacku

• LV6 Super Member (Next: 500)
• Posts: 300
• Rating: +30/-1
• ni-ta-ku ^_^
##### Re: Celtic III Scrolling Background Tutorial
« Reply #12 on: February 13, 2009, 07:30:15 pm »
hmm, I was beaten to the punch

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.

#### DJ Omnimaga

• Clacualters are teh gr33t
• CoT Emeritus
• LV15 Omnimagician (Next: --)
• Posts: 55935
• Rating: +3153/-232
• CodeWalrus founder & retired Omnimaga founder
##### Re: Celtic III Scrolling Background Tutorial
« Reply #13 on: February 13, 2009, 08:13:26 pm »
I can't wait ^^

SHould we move this topic in the Help section and pin it?

#### nitacku

• LV6 Super Member (Next: 500)
• Posts: 300
• Rating: +30/-1
• ni-ta-ku ^_^
##### Re: Celtic III Scrolling Background Tutorial
« Reply #14 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.