Making of Yard Scent

posted in Browser Scent
Published December 07, 2014
Advertisement
Hey. I am the author of a new JavaScript framework made for creating games in the browser (without using any 3rd party plugins). I have named it Scent It follows entity component approach and it's based on principles of composition over inheritance.

I want to use this journal to describe a creation of showcase game I have decided to make for this purpose. I am not a game designer so don't expect anything spectacular here. With the Scent we will create game that can be easily extended without actually breaking existing mechanics and messing up whole code base.

I've been always interested in seeing some kind of game focused on train yard operations, I decided to do something simple around this theme. Lets create the game called Yard Scent.

Side-note: Maybe this will inspire someone to create a proper game based on this prototype. I would love to see it in multiplayer where players are connected together and they are sending trains over big world map, earning money, rebuilding their yards or maybe even having more players working on single yard...

Game features



Here goes some basic brainstorming about game features. It also represents some kind of the order of how I will develop the game. Goal isn't creating perfect game, but show how easily Scent can be used.

Yard map


I want to keep this as simple as possible. The game will be 2D with tile based map. This will allow me to use editors like Tiled instead of hard-coding map or making my own format. I don't want to mess with curves for the tracks, so I am going to use the way of TTD and create just diagonal rails. Don't expect much of the graphics as I lack proper skills for that. There should also be panning of the map using arrow keys, but there will be no zoom functionality.

Switcher


Next step is to add some interactivity. That would be a player controlled switcher locomotive. Moving along the rails at constant speed forward or backward and being able to stop. Car will be as big as one game tile to make collisions easier. To avoid derailing the collisions will be solved in this milestone too simply by checking if there is proper rail in the path. Viewport should be centered on the switcher and pan the map when moving. When player uses arrow keys to look around, he can recenter back to the switcher.

Freighter cars


There will randomly placed cars on the yard map. Switcher can be coupled with these cars (front or behind), move them around the yard and decouple somewhere else. Coupling should be automatic when two cars touch each other. Simple speed modifier of the whole consist depending on how many cars are being pulled/pushed will implemented. This will introduce natural limit of how many cars can be operated by the switcher.

Junctions


Special tiles that allow to modify path of the train. It's pretty much essential for a good yard work. Along with this I will implement highlight of the whole track based on state of junctions points to easily see the path the switcher will use when traveling.

Objectives


At the end I will make it feel bit like a game. Cars with different destinations will be placed randomly around the map. Player will be required to assemble consist of cars with the same destination and deliver to appropriate exit point on the map. There will be no continuation or regenerating of cars as it's more than enough for the article.

Lets start coding



I will be using public git repository at https://github.com/FredyC/yardscent to store game code. Feel free to fork this repo and create modifications of the game on your own (it's MIT licensed). If you feel like you want to improve my code, you can send in the pull request.

Workspace setup


Some basic preparations are necessary. I will use tools that I am familiar with to speed up whole process. If you are unsure about something, you can always ask in the comments. List of tools used:

  • NodeJS + NPM
  • Grunt
  • Browserify
  • CoffeeScript + Jade + Stylus
Yeah I love CoffeeScript because it makes me more effective. Scent is also written in CoffeeScript, but it doesn't require from you to write your game using CoffeeScript. All code snippets here will be written JavaScript to make it more accessible. Also using Jade + Stylus is just natural choice as it fits well with code style of CoffeeScript, but these are not that important.

When you clone the repository, you will need to install NodeJS + NPM first. Then you can run npm install in cloned folder. You will also need to run npm install -g grunt-cli first in order to execute grunt dev to start development server. Browse to the http://localhost:9000 to see the game and it will be automatically reloaded if you change source code.

Timing the engine


First we need to create the Engine instance and call its update() method periodically so it can do its job with nodes and actions (more on that later). I've picked the CreateJS suite that has timing mechanics already included. I am not going to talk about this much as it is unrelated to Scent.

Since the stage object will be useful in our systems later, we can use Engine injections to pass it in. This way we don't need to pollute global object of the browser and the stage will be provided to us when needed.

[rollup="Using engine injection"]
var engine = new Scent.Engine(function(engine, provide) { var stage = setupStage(); provide('$stage', stage);});engine.addSystem(function($stage) { // $stage is here for you});[/rollup]

Setting up components


Last thing for this entry I will prepare piece of code to setup component types based on their definition. This is one way to do this, but its up to you how do you want to pass your component types around. For now we can define first component to represent position on the map.

[rollup="Defining component types"]
var components = { tile: 'x y'};for (var name in components) { var component = new Component(name, components[name]); provide('$c' + capitalize(name), component); components[name] = component;}[/rollup]

Wrap up



And that would be it for now. We will get to the fun parts in the next entry. I hope it looks bit interesting to you and see you next time.

Daniel K.
3 likes 0 comments

Comments

Nobody has left a comment. You can be the first!
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement

Latest Entries

Advertisement