Author Topic: Perfect Grayscale - Tutorial  (Read 20724 times)

0 Members and 1 Guest are viewing this topic.

Offline thepenguin77

  • z80 Assembly Master
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1594
  • Rating: +823/-5
  • The game in my avatar is bit.ly/p0zPWu
    • View Profile
Perfect Grayscale - Tutorial
« on: March 07, 2011, 11:58:14 pm »
With my recent work on Chess, people have been asking me how I make my grayscale so perfect. So here is a tutorial!

First, a little background, most of it can be read in this topic. A while ago, I made a program that displayed 16 level grayscale pictures. It worked pretty well, but it was clearly not flickerless, it had major scrolling patterns and some spots literally flickered. Then I thought, if I can do 16 with 120 refreshes per frame, why not do 64 level grayscale with 100,000 refreshes per frame. This was accomplished using z-addressing and I put 1 pixels in the first column, 2 in the second, 3 in the third, and so on until the screen was full. Then I scrolled that at 100,000 fps. What I noticed was that at certain frequencies, the images would slow down, stop, then reverse direction and go back into oblivion. After a little bit of playing with it, I figured out that the LCD actually has a refresh rate. And that rate is 60Hz.

This little refresh rate is what causes all of the problems with the LCD. Lets say that you quickly change the screen color, if you've used your calculator long enough, you know that there is a diagonal line going up your calculator for a split second while it is clearing. This is caused when you and the LCD driver are updating the screen at the same time.

The LCD driver has two parts, and each part works independently of the other. First you have the LCD ram, which is just like regular ram. And then there is the LCD driver which updates the screen 60 times per second, at a speed of about 100 pixels / (1/60 second) from top to bottom. In common practice, the LCD ram is filled one column at a time, starting at the left, and working your way across. This operation takes about 1/120 second. What can happen is that while you are updating the LCD ram, the LCD driver decides that it is going to start displaying the screen. It displays 1 row at a time, and as it falls down the rows, it displays whatever is currently in ram. So you can see that if you are updating the screen while it is reading it, there will be some spots where you as the writer will cross over what the driver is displaying, effectively making the driver display part of two different frames.

For your average game, this is no problem, a minor graphical glitch that is only present for about 1/60 second and that only happens about 1 time per second. But grayscale is an entirely different case. This graphical glitch is very obvious because it screws up your careful pixel timing. Instead of ON ON OFF ON ON OFF, sometimes you will have ON OFF ON ON OFF ON, which spread over the whole screen, just looks bad. Also, let's say that you don't know about this whole refresh thing and you update the screen at either 80 fps or 40 fps. At 80 fps, some of your frames are never going to even make it to the LCD, you are updating it so fast that you will update it again before the driver has time to display it. And at 40 fps, some of your frames are displayed twice.


After hearing that, I'm sure there are a few of you that could go out and write your own display routines, but there are also those who can't. Here is an example of what we don't want.

You can see that the LCD driver and the displayer are not in sync and scan lines are clearly present. (Technically since that is in wabbitemu, I had to do something entirely different to get that effect, but you get the drift.)

Now, to get away from this, you have to learn the way of the LCD driver, and try to basically run away from its display line. First off, it displays rows, not columns. So we will obviously have to write a 07 to port (10h), and work horizontally across the screen. This does have some speed drawbacks, but that's just how grayscale goes.

Now that that is out of the way, you will notice that your grayscale routine actually looks a lot better, but we're not done yet. The next step is to get in sync with the driver, which is accomplished with the crystal timers. Our goal is around 60 Hz, so the timer that gives us the most flexibility around this range is timer 40h, it runs at 10922.667 Hz. Then you have to apply your multiplier to it 10922/60 = 182, so a counter of 182 will get you 60 Hz. I of course prefer 178 as that is what my calculator is synced to, but to each his own. (The typical range is about 160-180). To put this into code. 40h to (30h), 0 or 2 to (31h), and 178 to (32h).

That's it, do that and you will have perfect grayscale.

And why did I mention 100 pixels / (1/60 seconds)? That's because you can't perfectly match the frequency of the driver and there will always be a small glitch line. But if you do it right, the line is off screen for 1/3 of the time.

Here's an example of implementing what I just talked about. It's commented quite nicely, but I left it up to you to make your own calibration screen (I don't want all the games to look the same ;))
zStart v1.3.013 9-20-2013 
All of my utilities
TI-Connect Help
You can build a statue out of either 1'x1' blocks or 12'x12' blocks. The 1'x1' blocks will take a lot longer, but the final product is worth it.
       -Runer112

Offline ralphdspam

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 841
  • Rating: +38/-1
  • My name is actually Matt.
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #1 on: March 08, 2011, 12:00:08 am »
O.O Thank you, Thank you Thank you!!!!!
From now on, you shall be known as the grayscale master!
:w00t:
ld a, 0
ld a, a

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Perfect Grayscale - Tutorial
« Reply #2 on: March 08, 2011, 12:02:37 am »
Nice tutorial. I think I'll move this to the ASM help sub-forum, though, since it's ASM-related. Hopefully it should be helpful for grayscale game programmers. I myself unfortunately didn't mess with grayscale much, as I mostly did TI-BASIC and never went far with Axe. The only grayscale games I made are Reuben Quest series and the RickRoll Tunnels. :P

Offline thepenguin77

  • z80 Assembly Master
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1594
  • Rating: +823/-5
  • The game in my avatar is bit.ly/p0zPWu
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #3 on: March 08, 2011, 05:36:39 pm »
Nice tutorial. I think I'll move this to the ASM help sub-forum, though, since it's ASM-related. Hopefully it should be helpful for grayscale game programmers. I myself unfortunately didn't mess with grayscale much, as I mostly did TI-BASIC and never went far with Axe. The only grayscale games I made are Reuben Quest series and the RickRoll Tunnels. :P

Ok, I put it in the Other calculator discussion and news because I thought it might also be useful for Axe. But I don't really know enough about Axe to implement this.
zStart v1.3.013 9-20-2013 
All of my utilities
TI-Connect Help
You can build a statue out of either 1'x1' blocks or 12'x12' blocks. The 1'x1' blocks will take a lot longer, but the final product is worth it.
       -Runer112

Offline yunhua98

  • You won't this read sentence right.
  • LV11 Super Veteran (Next: 3000)
  • ***********
  • Posts: 2718
  • Rating: +214/-12
  • Go take a dive in the River Lethe.
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #4 on: March 08, 2011, 05:38:46 pm »
I guess Quigibo could Update his greyscale routine, but unless we use Hex, theres really no way Axe could change its greyscale...

speaking of which, you should learn Axe, thepenguin, you'd release games way faster that way.  ;)
IMO, games don't take as long to make in Axe.  but thats just me.  :P
« Last Edit: March 08, 2011, 05:38:54 pm by yunhua98 »

Spoiler For =====My Projects=====:
Minor setback due to code messing up.  On hold for Contest.
<hr>
On hold for Contest.


Spoiler For ===Staff Memberships===:






Have you seen any good news-worthy programs/events?  If so, PM me with an article to be included in the next issue of CGPN!
The Game is only a demo, the code that allows one to win hasn't been done.
To paraphrase Oedipus, Hamlet, Lear, and all those guys, "I wish I had known this some time ago."
Signature Last Updated: 12/26/11
<hr>

Offline thepenguin77

  • z80 Assembly Master
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1594
  • Rating: +823/-5
  • The game in my avatar is bit.ly/p0zPWu
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #5 on: March 08, 2011, 06:24:01 pm »
I'm a die hard asm programmer. I don't plan to ever learn Axe. I like to do things my own way without relying on other people, which is where some of my programs came from. (Chess, tetrisM, StpWatch, 8 lvl gray, BluTooth usb driver, truSound, I even use my own flash unlocking code.)

I've also just begun to think in asm. I often get annoyed at C++ when I want to treat unsigned chars as chars and such. I like to work without rules where you can do whatever you want. In asm, nothing is restricting you. Everything is based in asm, so everything that can ever be done, is possible.

Asm can also be faster than axe if you want, I can write lightning fast routines if need be. The control over hardware is also very important for me; if I used axe, you would never see this kind of grayscale. I would have also never put any work into usb work or OS mods because they are out of sight and out of mind.

Lastly, Axe is written on the calculator and is an artificial language. The on-calc part means that the files are likely to get erased and it is very hard to work on large projects. I like to have all my files on my computer where they are relatively safe. Also, editing stuff on the calculator limits your view of the code and doesn't let you get a real feel for what is going on. And since Axe gets compiled, it is much harder to debug if things go wrong, whereas with asm wabbitemu looks exactly the same as notepad.

As far as speed goes, I've gotten to the point that asm doesn't slow me down that much. The first night I started working on chess, I put out 1000 lines of code in about 4 hours. While yes, axe would be fewer lines, asm gives me more flexibility in the fine tuning stuff.


Wow, I've never actually put that all into words. It feels good to actually say it though. And sorry if I offend anyone who likes axe, axe is great, it's given power to the people, I just prefer asm.
zStart v1.3.013 9-20-2013 
All of my utilities
TI-Connect Help
You can build a statue out of either 1'x1' blocks or 12'x12' blocks. The 1'x1' blocks will take a lot longer, but the final product is worth it.
       -Runer112

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Perfect Grayscale - Tutorial
« Reply #6 on: March 08, 2011, 06:39:29 pm »
Yeah I agree with Thepenguin. I personally prefer higher level languages, but if someone is pretty good at ASM and likes its freedom, it's gonna be hard to go back to higher level languages afterward.

Offline coolrudski

  • LV3 Member (Next: 100)
  • ***
  • Posts: 85
  • Rating: +1/-5
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #7 on: March 08, 2011, 06:45:26 pm »
well with programming its either you have quicker programs but longer code or slower but easier to code programs but slower (little ironic in a way huh?). but i mean assembly definitely gives you more flexibility and if you are good with it and almost productive as a person in say c good for you! i on the other hand have to program in c i dabble in assembly but i dont have the patience. so i respect that and that sort of work and dedication.

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Perfect Grayscale - Tutorial
« Reply #8 on: March 08, 2011, 06:47:14 pm »
Yeah in TI-BASIC you got slower code, but for new programmers it's easier to get used to and you can do some stuff easier like using floating points. Same goes with ASM libs, but I think xLIB syntax is hard to memorize, so on the spriting side I find Axe easier to use (although tilemaps can be harder in some cases)

Offline TIfanx1999

  • ಠ_ಠ ( ͡° ͜ʖ ͡°)
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 6173
  • Rating: +191/-9
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #9 on: March 09, 2011, 06:30:52 am »
Cool tutorial. That's also a good explanation of your language of choice. =)

Offline calcdude84se

  • Needs Motivation
  • LV11 Super Veteran (Next: 3000)
  • ***********
  • Posts: 2272
  • Rating: +78/-13
  • Wondering where their free time went...
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #10 on: March 09, 2011, 07:53:46 am »
Nice explanation :D At some point I'll have to implement that.
"People think computers will keep them from making mistakes. They're wrong. With computers you make mistakes faster."
-Adam Osborne
Spoiler For "PartesOS links":
I'll put it online when it does something.

Offline JustCause

  • CoT Emeritus
  • LV8 Addict (Next: 1000)
  • *
  • Posts: 810
  • Rating: +115/-5
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #11 on: March 09, 2011, 09:55:45 am »
Very nice. I did figure out how to do this in Axe, but never really understood the technical aspect. Now it makes a lot more sense. Thanks!
See you, space cowboy...

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Perfect Grayscale - Tutorial
« Reply #12 on: March 09, 2011, 06:30:08 pm »
Wow, I've never actually put that all into words. It feels good to actually say it though. And sorry if I offend anyone who likes axe, axe is great, it's given power to the people, I just prefer asm.

I agree. All languages have their good points and bad, and just because someone likes one language doesn't mean it's the one for everyone else. And different languages suit different situations: BASIC is slow, but it's great (nice and small and compatible) for less intensive programs; Axe is fast and really easy to use, but it has its own problems, like with all languages; and ASM is ... well, once you get it it just feels good to program in, partly because you know it's your own code that you made yourself. Plus it lets you have complete control of everything, and power is nice >:D

IMO the best language to use is just the one you're comfortable with that works best in that particular situation :)

Anyway, this is a great tutorial! We seem to be lacking in advanced ASM tutorials that go beyond the stuff in 28 Days.
« Last Edit: March 09, 2011, 06:30:27 pm by Deep Thought »




Offline willrandship

  • Omnimagus of the Multi-Base.
  • LV11 Super Veteran (Next: 3000)
  • ***********
  • Posts: 2953
  • Rating: +98/-13
  • Insert sugar to begin programming subroutine.
    • View Profile
Re: Perfect Grayscale - Tutorial
« Reply #13 on: March 09, 2011, 07:02:31 pm »
In that case, nspire needs python :P

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Perfect Grayscale - Tutorial
« Reply #14 on: March 10, 2011, 06:19:38 pm »
Yeah a tutorial about advanced tricks would be nice. :D