next »

[sec32]

Synopsis

• Name: Road Relay 2000
• Genre: Retro-futuristic slot car racer
• Platform: Multi platform HTML5 browser game
• Goal: An uncomplicated but well balanced and gratifying game, gameplay above everything else

Story
It is the year 2000 in an alternate reality. Seven years after the big nuclear screw up, mankind has moved to underground cities. Earth’s surface is a wasteland and has been declared a no-go zone for biological lifeforms. The fortunate people who can afford a shell - a VR controlled robotic replacement body - can still visit the old continents. Which rarely happens, except for the brave adventurers participating in the perilous Road Relay.

Gameplay
The old electric transport roads, which were used by automated drone road trains before the nuclear screw up, are recycled for the Road Relay motorsport. The 3D printed road segments are reorganised for different difficulty categories. Participants race a shell controlled slot car to a certain point, and return to the starting point with a smaller remote controlled vehicle, following the same track in the opposite direction. Both vehicles have their challenges.

Devlog goals
I will post a playable version of each iteration of the project in this dev log; prototypes, alpha and beta versions, the whole shebang. Next to keeping me motivated, I hope to receive feedback in order to improve the game during all stages of development.

About me
I recently started working as an HTML front end dev, which I didn’t do for about a decade. I have a lot to learn on the front end department, which is partly why I started on this game in my free time. With 2 kids, a wife, a full time desk job and a need for physical activity, that free time is limited. But what I lack in time, I hope to find in determination. (Cue for people who know me personally to laugh out loud).

Concept designs

Features
Planned features:

• Procedurally generated tracks
• Full HD resolution (scaled with fixed ratio)
• Vivid 2D graphics
• Support for touch and non-touch devices
• Fast and challenging gameplay

Possible future features (list is not final):

• Some sort of multiplay, probably not real-time

Prototypes:

• Prototype #1
• Prototype #2
• Prototype #3
• Prototype #4
• Prototype #5
• Prototype #6
• Prototype #7
• Prototype #8
• Prototype #9

_{Tiny disclaimer: English is not my first language. My apologies for screw ups.}

[sec32]

Prototype #1

Try it: http://insidepete.com/rr/prototype/1/

I am at the early stage of development, I started a couple of weeks ago. It’s still early to start a devlog. However, because I will share a playable version of each prototype, I decided to start right away. Development progress is usually fastest during prototyping, so even though the prototypes won’t be packed with features, you can expect new ones quickly.

Now, onto the prototype, which is very basic. A simple track is generated randomly. The slot car follows the generated road. Nothing more, nothing less.

No touch devices are supported yet in this prototype. All current graphics are temporary and will be replaced in a later stage.

That’s it for now. A new iteration will follow soon. Have fun.

Features/changelog:

• Basic slot car driving functionality
• Only desktop controls (no touch devices yet)
• Placeholder graphics for now

[Zireael]

Really nice control scheme! The instructions don't mention that you can click again to stop (e.g. to quit the game) - which is really important, I spent 5 minutes wondering how to quit -  and that the up/down is relative to the point you clicked at.


How did you ensure no ugly overlapping segments? I am using a pretty similar technique in my 3d game and I wind up with slightly overlapping vertices due to floating precision...

[sec32]

Hi Zireael, thank you for your the hint. I have updated the instructions in the prototype.

Each curved segment has a certain angle and radius. I calculate the positions with some easy math. Basically this:

Code:

//position of new segment (everything behind = are properties of the previous segment)
x = x + (r * cos(angle))
y = y + (r * sin(angle))

Because the positions are pretty accurate, I don't have a lot of gap or overlapping. I just made every segment 1 pixel too big in every direction. I rather have some minor overlapping than a gap, because that's less visible.

[Zireael]

Because the positions are pretty accurate, I don't have a lot of gap or overlapping. I just made every segment 1 pixel too big in every direction. I rather have some minor overlapping than a gap, because that's less visible.

Yeah, the math is pretty easy. And yes, I guess minor overlaps are better than gaps - I believe this is the way I'll have to go with my game, since you can never have perfect fits when floating point precision is involved. I have to admit, it's easier to pull off in a 2d game since 1 pixel this or that way is pretty much unnoticeable.

[sec32]

it's easier to pull off in a 2d game

^ This.

If I had the problem in a 3D or more graphically complicated 2D game, I would consider using connection pieces between two road segments, being lazy practically minded.

By the way, I love the prototyping part of game designing for so many reasons. Ignoring minor problems as overlapping is one of them.

Code:

Send problem to back of mind.

[sec32]

That being said. I've just noticed this:



^_silence...

[Indigo21]

Wow. Your game looks awesome 
_{what is your first language ?}

[sec32]

Wow. Your game looks awesome 
_{what is your first language ?}

Thank you. It isn't a game yet, but it will look awesome
_{Dutch, I'm from the little kingdom known as Belgium}

[sec32]

Prototype #2

Try it: http://insidepete.com/rr/prototype/2/

Driving the slot car is a matter of balance and reflexes. Try to go as fast as possible without going over the edge. Check to bottom g-force display to see when you have to slow down, and when you have room to accelerate.

Changelog:

• Basic g-force gameplay
• Distance indicator

[sec32]

Prototype #3

Try it: http://insidepete.com/rr/prototype/3/

Another small update. Added a speed indicator at the bottom of the screen, and a time counter at the top.

Changelog:

• Speed indicator
• Time indicator

[Zireael]

Plays really nice, although I would make the level shorter! 3 minutes in, and I was less than 1/4th along...

[sec32]

Plays really nice, although I would make the level shorter! 3 minutes in, and I was less than 1/4th along...

Hi Zireael. Yeah, it's still early prototype code. Nothing is balanced yet. The track length will depend on the selected difficulty. I'm also thinking about a procedurally generated endless track.

[sec32]

A little logo animation test:



Lightweight & quick. Full size HTML5 canvas version here: http://insidepete.com/rr/logo/

[sec32]

Prototype #4

Try it: http://insidepete.com/rr/prototype/4/

I've implemented the turbo mechanics. See the bar at the bottom right? Every time you pass a perfect corner, it fills up. You complete a perfect corner by slowing down before entering a corner to keep the g-forces between boundaries (check the g-force display). Tip: Passing several perfect corners fills the bar up considerably faster.

But the most important part: press space bar when the turbo bar is filled up completely. You get a temporary speed boost, and you are temporary invulnerable for corner errors.

It sounds more complicated that it is to play, so please try it yourself. Also, there's a dynamic camera going on.

Changelog:

• Turbo mechanics
• Dynamic camera
• Sand, sand and more sand

[Zireael]

The blue bar with x counter on top of it is a bit confusing, once I hit x1 or x2 I tried to use turbo without noticing the blue bar wasn't filled up! Some sort of a "you don't have enough turbo" message in such a case would be helpful.

[sec32]

The blue bar with x counter on top of it is a bit confusing, once I hit x1 or x2 I tried to use turbo without noticing the blue bar wasn't filled up! Some sort of a "you don't have enough turbo" message in such a case would be helpful.

Thank you for the tip. I will review the entire UI when I implement the design, and add visual clues. Possibly also a beginner/tutorial track with extra info.

[sec32]

Et voila, the design of the slot car:

[sec32]

Accelerating and braking

[Zireael]

The car looks awesome!