Parallax-scrolling effect … in ANSI

This animated GIF shows an animated ANSI sprite walking in front of a parallax-scrolling forest background.

This animated GIF shows an animated ANSI sprite walking in front of a parallax-scrolling forest background.

Every so often I’ve been experimenting with Synchronet BBS’s Javascript capabilities, as I try to figure out how to make a BBS door game with my daughter.

So far we’ve learned how to create a new character profile, save it in Synchronet’s JSON datastore, and retrieve it. We’ve written a very simple LoRD-style combat routine.

Then we started playing with ANSI graphics. We learned how to use frame.js to put stuff onto the screen. Then we learned how to use sprite.js to move a character around the screen. And, with help from Synchronet js gurus, I figured out how to mask the sprite so the background could show through.

In one of our first experiments, I learned how to mask an ANSI sprite so I could move it over a background.

In one of our first experiments, I learned how to mask an ANSI sprite so I could move it over a background.

More recently I wondered about going beyond the typical 80×25 dimensions. Many terminal programs are capable of increasing the console’s dimensions, so I mocked up an oversized 132×60 game interface:

This interface idea uses an oversized 132x60 canvas.

This interface idea uses an oversized 132×60 canvas.

Scrolling the background

My two latest experiments involved scrolling the background. Frame.js has a built-in method for scrolling data in a frame, but I wanted to wrap the data so that the background would keep scrolling indefinitely. I ended up writing a new circular scrolling method for frame.js. (Find the code at the bottom of this blog post)

Next I needed art. I scoured Google looking for pixel art examples of characters and forests. Then I fired up PabloDraw and started drawing. Honestly, I surprised myself with the final result.

Beyond scrolling the background, I also needed to animate the character to make it look like she was walking. I found a helpful tutorial, and adapted the sprite to have a two-frame walk.

As I experimented, I realized I needed to fix my sprite in place. The scrolling background behind her would create the illusion of walking. For this reason I am not using sprite.js’s getcmd(), a great routine which moves the sprite in response to keyboard commands. Instead I am manually changing the sprite’s bearing and position properties to create the two-frame walking animation.

Here’s the result of that effort. Remember, this first effort has a single background forest and a single foreground sprite:

Parallax scrolling

I shared this video with different BBS enthusiasts. Since I now knew how to scroll the background continuously, and I knew how to mask frames to allow transparency, I began to wonder about parallax scrolling. Obviously it could be done, but would the low resolution and chunkiness of ANSI text art keep the effect from working? Some folks on Facebook and Twitter encouraged me to try it.

I ended up separating the background into three layers. The top layer consisted of big trees and foliage. The middle layer consisted of lighter trees and a light green canopy. The last layer consisted of light gray and very faint, thin trees.

I realized that for the effect to be most successful, I would need to keep the color schemes of each layer distinct. The top layer employed the darkest colors; the bottom, the lightest. Given the limited 16-color ANSI palette, I made heavy use of shaded blocks to create the illusion of lighter and darker tones.

Top background layer

Middle background layer

Bottom background layer

I used magenta as my mask color. A little function loops over the frame data and changes any magenta solid block into undefined, making it transparent. It’s the same idea as filming movie actors against a “green screen” which allows them to be easily masked and placed in front of CGI backgrounds.

Now all I had to do was set up each background layer as a frame in the code, mask each one, and set up different scrolling values so that the layers would pass by at different speeds as the player moves left or right.

The result of my labor can be seen in the animated GIF at the top of this blog post.

Next steps

In any case, I will probably add some code to count the steps the sprite takes. In this way, I can programmatically send in bad guys or surprises at regular intervals of steps.

I also plan to play around with using a parallax ratio, similar to what I saw in this tutorial, instead of a hard number. I’m thinking I could then compare the ratio to the step interval to see if the background layer should scroll or not.

After I shared the parallax scrolling video, someone asked: “So you got the trailer done, when’s the movie coming out?”

Good question. As I have explained in previous blog posts, “Jewel Mountain” is sort of a moving target. My daughter has a lot of ideas, but we still haven’t truly nailed down how this thing will work as a game. But after all these experiments, I think I’m stumbling into a direction. Who knows if we’ll ever get it finished, though.

Code

Here are some gists I posted on GitHub. If you are a Synchronet sysop, feel free to incorporate any of this into your own projects. If you come up with new riffs on these ideas, please let me know!

.scrollCircular(x,y) method for frame.js

maskFrame(frame,char,attr) function

Sample scrolling routine

Related entries you might like to read:

Merry Christmas … Atari STyle

A screen from the ACE-St. Louis 1987 Christmas demo, captured from the Hatari emulator.

A screen from the ACE-St. Louis 1987 Christmas demo, captured from the Hatari emulator.

One of the Atari ST’s unique features was its MIDI interface.

I never learned to play any instruments as a kid, but I have a feeling that if I had had an electronic keyboard to hook up to the Atari, things might have turned out differently.

Continue reading

Related entries you might like to read:

Hatari, Lantronix, and CosmosEx: My quixotic quest to play “Thieves Guild”

Allow me introduce you to the “Thieves Guild Emulator,” a graphical front-end client for the Atari ST BBS game “Thieves Guild.”

(Update: I have replaced the original video I posted with a new version that includes the game’s sound effects, as well as some gory combat)

It took me a long time to reach the point where I could make that video. In this blog post, I’m going to explain that journey. I’ll also tell you a bit about the game itself. In fact, maybe that’s where I should begin.

Continue reading

Related entries you might like to read:

A Star Trek font for the new Star Wars movie?

So, Star Wars episode VII has a title: “Star Wars: The Force Awakens.”

And while fans everywhere are eagerly discussing the title, I was more interested in the font they used for the title. Nerdy, I know, but I’m a designer by trade.

Continue reading

Related entries you might like to read:

The vicious circles of Google Plus

"Please enter a valid birthday," Google insists, without providing a way to edit the year.

“Please enter a valid birthday,” Google insists, without providing a way to edit the year.

For the last couple years, my wife Yoli has used Talkatone along with a free Google Voice phone number in order to make and receive calls using our iPad.

It was never a perfect system, but it was free, and mostly worked.

Well, Google has apparently turned off third-party access to Google Voice, so Talkatone no longer works for us.

Continue reading

Related entries you might like to read:

Introducing my new game, “Doubles”

Remember how I mentioned in a previous post that I was writing two new BBS doors? One was called “Jewel Mountain,” an experimental project I’m making for my daughter; the other was “Sports Stats,” which would let users see standings and scores for baseball and basketball.

Well, a third project came up and leapfrogged those two. I’m calling it “Doubles,” and if you have a Synchronet BBS, you can download and install it right now from my GitHub.

Continue reading

Related entries you might like to read:

Mother’s Day: “Mom and Me” for the Atari ST

As Mother’s Day approached, I suddenly remembered two very old programs for the Atari ST which I had fooled around with as a kid.

“Murray and Me” and “Mom and Me” were written by Yakov Kirschen, who called his creations “biotoons.”

Continue reading

Related entries you might like to read:

ATASCII animations

Scene from the ATASCII animation "Help From A Friend."

Scene from the ATASCII animation “Help From A Friend.”

You know a computer technique is old school when it was considered old-fashioned in 1985.

Continue reading

Related entries you might like to read:

Second collection: BBS-related podcasts

You’ve seen the BBS Documentary. You’ve read reminiscences about BBSing on blogs and tech websites. So how about something to listen to?

Today I’m introducing Break Into Chat’s second special collection: BBS-related podcasts

Continue reading

Related entries you might like to read:

Trade Wars vs. Legend of the Red Dragon: Which was the most popular?

tw2002-lord

When I was on the Bobby Blackwolf Show in February, we discussed TradeWars 2002 and Legend of the Red Dragon. Early in our back and forth on LoRD, I said: “It became… you know, depending on who you talk to, probably the number one or number two game out of BBSes.” Blackwolf followed up by saying: “TradeWars is usually number one, LoRD is number two.”

I don’t think anyone would dispute that TradeWars 2002 and Legend of the Red Dragon were the two most popular BBS games. But which was the most popular? Is it even possible to know?

Continue reading

Related entries you might like to read: