The Super Jamicom imaginary console is patterned after the way 16 bit consoles used to work back in the late 80s to mid 90s or what was commonly referred to as the “16 bit era” †. This means a relatively low resolution, paletted graphics and constrained sound.
In contrast to those old platforms though, Super Jamicom offers a much simpler development experience, with a modern programing language, a suite of built in tools and very low iteration time; The goal is to make starting a collaborative game jam game as easy as clicking a link!
Super Jamicom improves from time to time. To keep up with the latest changes visit the news page.
Clicking on any game in the game list will take you to that game’s player page, for example: http://superjami.com/games/adhq
If you’re interested in exploring how the game works, you can click the edit button to move to the game’s edit page. On this page, you can read and modify the graphics and code that make up the game.
Unless you were the original creator of this game though, you will not be able to save any changes you make. To really get started making your own games, you’ll also need to login so that the system can save your data.
Once you’ve done so, choose a game from the main page that most closely matches what you want to do and then go to its edit page.
Once inside the editor you can “fork” the game, that is to say make a copy of the game where you are the owner instead. You can now edit your forked game without affecting the original.
To modify the information displayed under a game on its player page, find the ‘edit this info’ button in the edit page of a game you own.
Here, you can modify the game’s title, give it a description, and add additional authors to the project who will have the same ability as you do to add new graphics and code to the game.
To learn more about CoffeeScript, please see The CoffeeScript website.
The CoffeeScript Cookbook is another useful resource, providing an advanced guide and tips for programmers coming from different languages.
Should you make a mistake while coding (and who doesn’t!) then errors will appear in the System Messages panel. These should tell you the file name and the line and character numbers where the error was detected, as well as what it thinks the error might be.
To work out errors in your logic, it’s often useful to observe some
crucial value as your game unfolds. The Watched Variables panel will
display any named value you pass it from your code using the
watch command. For example, if you have the variable
playerXPosition and you’d like to call it “player x”,
then invoke the watch command as so:
watch 'player x', playerXPosition
Each subsequent call to the watch command using the same name will
intentionally overwrite the same line in the Wached Variables panel,
letting you call
watch repeatedly while only retaining the latest value.
Finally, for the deepest look at how your code is behaving, please see your browser’s developer tools documentation†. Super Jamicom publishes the information necessary for your browser to ’see’ the code files you write, enabling the full range of its developer tools.
† Super Jamicom was largely developed in Google’s Chrome browser, and so has greatly benefited from Google Chrome’s Javacript Tools.
In order to address the game environment, Super Jamicom reserves the
game. This variable holds crucial state information
and is the only variable that is visible to the code across all of your files.
That is to say if you have files foo.coffee and bar.coffee, and you’d like
to share variable
health between them, you’ll need to name the
Advanced note: Accessing the
game variable is so common,
that it is actually bound as the root context for each of your files.
This means that the CoffeeScript shortcut
@ can be used to
refer to it when you are not in a function; e.g.
There are two critical hooks to get to know when developing a Super Jamicom game:
This function will be called when your game first starts up or is reset, after every code file has been evaluated. This means that all your classes and assorted globals will be ready to use at this point. You should use this hook to create your game’s initial state, e.g. your player’s starting position and health.
# in the player file class game.Player constructor: (@x, @y, @health) -> # in your main file game.init -> game.player = new game.Player 100, 120, 100 # etc
This function will be called after game.init as often as possible, up to a maximum rate of 60 times per second. Use this function to run your main game logic, moving sprites around, detecting intersections, etc.
game.update -> player.x += velocity counter += 1 # etc
are present in Super Jamicom. In addition, due to common usage,
the following functions have all been lifted into the global namespace
Math namespace, allowing you to omit the prefix:
sin, cos, tan, abs, floor, ceil, round, random, min, max, pow, PI
For instance, you can type
min(x, y) or
sin(angle) rather than
A few more convenience functions have been defined globally.
valueis less than
valueis greater than
max, where a fraction of 0 means
minand a fraction of 1 means
max. When the value of fraction is less than
minor greater than
max, linear extrapolation occurs.
There are two main components to the graphics system: sprites and backgrounds. Think of sprites as smaller pieces of graphics that move around independently, while a background is a larger, full screen sized graphic.
Both sprites and backgrounds are made of characters. A character is an 8 by 8 pixel square of pixels †. Each pixel can have one of 16 colors. Which 16 colors are applied to a sprite depend on its palette index.
A palette is a list of colors. A full palette has 256 colors, organized into 16 rows of 16 colors each. A palette index refers to one of these rows.
† a pixel, or ‘pixel element’, is the smallest solid colored chunk of a computer graphic. Think of them as the atoms of a modern graphical display. See this wikipedia article for more information.
The Super Jamicom screen is a 256 by 224 pixel surface which can display up to 4 backgrounds and up to 128 sprites. Positions on screen are specified in terms of the pixel distance from the lower left corner of the screen, in whole pixels. For example the position (4,6) means 4 pixels from the left of the screen and 6 pixels from the bottom.
There are a fixed number of 128 sprites. Each sprite can be enabled and positioned independently on the screen.
To setup a sprite, adjust the values in the global
Here’s an example:
sprites.on = true sprites.x = 10 sprites.y = 40
This turns on and then positions the 0-th sprite (the first sprite in the system) such that its bottom left corner will be 10 pixels from the left of the screen, and 40 pixels from the bottom.
Here’s the full list of properties that a sprite understands. Because these are so very common in a Super Jamicom codebase, the parameter names have been severely abbreviated.
There are a fixed number of 4 backgrounds.
Like the sprites, backgrounds are composed of characters which can be flipped horizontally and vertically. Entire backgrounds as a whole can also be positioned on the screen, allowing for scrolling effects.
Unlike sprites, the characters used by a background don’t have to be next to each other on the character sheet. To work out which character goes where, you create and assign a map object: a rectangular array of information that encodes for each character on the map, where to get the data from the character sheet and how to flip it. See the Maps topic below for more information about programming with maps, and read about the Map Editor for the easiest way to set one up.
Backgrounds can wrap, meaning that if you move a background to the right, instead of being blank, the area further to the left of the leftmost edge of a background will look like a copy of the far right side of the background instead.
To setup a background, adjust the values in the
Here’s an example:
backgrounds.on = true backgrounds.palette = 'daylight' backgrounds.map = 'forest' backgrounds.x = 20 backgrounds.wrapX = true
This turns on the first background in the system, and sets it to read from the ‘forest’ map, using the colors in the ‘daylight’ palette. It then sets it to draw 20 pixels from the left of the screen, and to wrap horizontally, meaning that the left most 20 pixel column of the screen will actually show the right most characters in the ‘forest’ map.
A map contains the information a background uses to choose which characters go where on screen.
While the easiest way to create a map is to use the map editor, there are plenty of interesting uses for creating and modifying maps from code.
To begin working with a map, fetch it from the map system with the command ‘mapSystem.getByName(YourMapName)’.
Once you have one, working with maps involves calling functions on the map object.
This lets you change the size of a map. A map can only be up to 1024 character in width and height, and must be at least 16 characters wide and tall. Specify the width and height in characters. This function gives you some options with regards to what to do with the data that was in the map before the resize.
Sets which character should be used at offset x and y, where x and y are given in whole characters from the top left of the map. The cx and cy values work like the same named properties on sprites, representing offsets in the character sheet. The flip value is a specially encoded set of numbers meaning:
|0:||do not flip the character|
|1:||flip the character horizontally|
|2:||flip the character vertically|
|3:||flip both horizontally and vertically|
This will return the cx, cy and flips values for the character at the given x and y offset in the map. The result is given in the form of an array as so [cx, cy, flips].
By default, all backgrounds draw before all sprites. There are 8 levels of priority in the rendering system that allow you to influence this ordering.
By default all sprites and backgrounds have a priority of 0. Increasing this number causes the item to be rendered later.
Backgrounds in the background system that have the same priority
draw in their index order, i.e.
backgrounds draws before
sprites draws before
So, let’s say you want to draw your level backdrop in
then your player character
sprites, then a user interface in
top of that; you could to set your priorities as follows:
backgrounds.pr = 0 sprites.pr = 0 # remember: backgrounds still go first backgrounds.pr = 1
The Palette editor lets you create and modify named sets of palettes.
Each palette contains 16 rows of 16 colors each. Recall that a sprite or a background can be set to use any color within a single row of a palette.
To create a new palette, click the ‘add palette’ button in the palette list to the left of the editor. All you need to specify at this time is the name for the new palette.
To modify a color in a palette, click on the relevant color swatch and use the sliders on the right side of the editor to modify the amounts of red, green and blue in the color.
Notice that moving your cursor across the palette updates the display in the editor title bar that identifies the row and column of the color you’re hovering over. When writing code to modify palettes dynamically, this is the easiest way to get your bearings.
The character editor is for… editing character data :)
Recall that each character is 8 pixels wide and 8 pixels tall.
Each pixel in turn is 4 bits of data, or 1 of 16 possible values.
When a pixel value is rendered to the screen later, it will used as an index into a palette, which converts it into a full RGB color.
Each character sheet is 32 characters wide and 32 characters tall.
The editor displays the entire current character sheet using a single palette. Use the row arrows at the bottom of the palette strip to switch to another palette row.
Of the 16 possible values, one is always the selected value, and one is always the alternate. To change the current selected value, click on it in the palette strip. To change the alternate value, hold down the alt key while clicking on a value, or click it with the right mouse button.
To see other parts of the character sheet, use the following controls:
Use the toolbar to select one of the following tools:
fill a single pixel with the currently selected value when you left click on the sheet. Hold down the alt key or use the right mouse button to fill a pixel with the alternate value instead.
fill a 2x2 area of pixels with the currently selected value, or with the alt key (or right mouse button) held, the alternate value.
left click and drag on the sheet to create a selection.
Once you have an active selection, you can use the arrow keys on the keyboard to shift the pixels inside the selection.
you must already have created a selection to use this tool. Once you have set it up, left clicking on the sheet will copy the contents of the selection there.
Documentation coming soon!
Meanwhile, have fun experimenting ^__^
Super Jamicom supports a fixed set of inputs, normally mapped to the
keyboard. You access these inputs using the
buttons global variable
which contains a set of named booleans that are true when the button is
For example, to move the player when the
up button is pressed
if buttons.up player.y += 1
Alternatively, any gamepad input can be translated into keyboard input with an appropriate utility.
On the Mac, try the free Enjoyable app by Yukkuri Games.
On the PC, try the shareware JoyToKey by JTKSOFT.
debug object contains a system for plotting visual information
on the screen.
You could use this, for example, when you’re trying to work out if your
collision or movement code is correct.
All draw functions happen after the game render, so will always be on top of every thing else the system draws.
Note: This system is disabled in the game player, so it isn’t available for general game drawing! It is safe however, to leave your debug calls in the code; the player will just ignore them.
r, g, bvalues. All values are in the range 0 to 255
x, yposition, and the given height
w. All values are in pixels from the bottom left of the screen.
x, y, with the radius
r. Radius also given in pixels.
So, let’s say you have some logic where you have a position
x, y that will
chase a target
tx, ty. It might be helpful to draw the current point and
target points as red dots, and to draw a green line between them.
debug.color 255, 0, 0 debug.circle x, y, 4 debug.circle tx, ty, 4 debug.color 0, 255, 0 debug.line x, y, tx, ty
Super Jamicom was made possible due to the wonderful work put into the following projects.
SJ Club Membersignup or login to make your own games today!