JPlat (download)

It's a simple language that allows you to create games easily and quickly. All you have to do is decide where things go on screen, how they move and how they affect your man ... then you play. My aim was to put the fun back into programming and allow anybody to be able to create a game.

Use cursor controls or WASD to move, space to jump and C to crouch. Move the mouse over any game to view the code. The language is quite easy to learn so why not spend a few minutes to learn it. You cannot make changes to other peoples screens but you can use parts of their code. Always remember to save your game. If you have any questions or suggestions then please contact me through my home page.

Try it out

A simple example

The following game is reasonably short but gives an idea of what the language is about. Items are placed around the screen and your man has to get to the other side of the screen to finish. The loop places elevators at various points across the screen.
"Example game" at 220 460

ladder at 40 200
platform at 10 200
platform at 10 100

loop x 150 to 600 step 120
   elevator at x 100
end

Index

Hello World

We'll now go through the language so you can write games yourself. To enter a program just move the mouse over the screen and click edit. The follwing program will display "Hello World" in the top left of the screen. When you've entered the program just click done and then run.
"Hello World"

Now let's try displaying the text elsewhere on screen (the screen size is 640 by 480) and maybe changing the colour and font. The font can be changed to small, medium or large. It doesn't matter whether a command is all on one line or spread over multiple lines.

"hello world" at 200, 270 
"hello world" at 230, 240 font medium
"hello world" at 260, 210 color blue font small
"hello" + " world" at 200 160
"My favourite number is " + 7 at 120 120

We could even randomise where and how text appears on screen. The random word picks a random value that's in the right range. Try running the following a few times to see how things change:

"Hello World" at random, random 
	font random
	colour random

Why limit ourselves to one message? Let's put it in a loop to place this message 50 times on screen. Remember to put the "end" at the bottom.

loop n 50
	"Hello World" at random, random 
		font random 
		colour random
end

In fact, why limit ourselves to text that stands still? let's move the text around the screen. You'll need to look at the section on the move command to fully understand what's possible.

loop n 50
	"Hello World" at random, random 
		font random 
		colour random
		move random 50 then reverse
end

Index

Boxes

So far we've just looked at displaying text on screen. Here's how to place a box on screen. The 40 by 40 indicates the width and height. If you don't give any dimensions then it defaults to 60 by 60. You could try setting the colour of a box or placing many boxes around the screen.
"This is a box"
box

It default to a size of 60 by 60 and, if there's no "at" command then it will display in the top left of the screen. Of course we can change the size of the box, change it's position on screen and alter it's colour:

box 90 by 90 at 260 300 colour blue

Index

Images

The program comes with a number of inbuilt images. You can also tile images horizontally and vertically to create larger images. Colour and font commands won't work with images.
image water.png
image platform.png
image ladder.png

image water.png at 280 300

image water.png 
	tile 10 by 5 
	at 200 200

Index

Numbers

Numbers can be displayed on screen using colours and fonts. Simple math is catered for so wherever a number appears in your program, you can replace this with a variable or a mathematical expression. If you look at the syntax for the language you'll see that some words are shown in yellow, these words can be replaced by numbers or even just a random command. The random command will try to produce a number that's in the correct range for where it's being used.
5 at 300 250
1+5 at 250+50 200
2 * 3 + 4 at 300 150
0 at 300 100 colour random font 0

Index

Movement

You can make anything on screen move a set distance in any direction (up, down, left or right). You could also use the numbers 0, 1, 2, 3 or use random to pick a direction. The move command below will move the box up 100 points and then reverse back down. Other options instead of reverse include restart, end, stop and back. I suggest trying them out to see what they do. The move command can be applied to anything so you could change your "hello world" example to move the text around the screen.
box 50 by 50 at 280 50
	colour yellow
	move up 400 then restart

You can follow the move command above with an optional speed, wait or start command:

speed
says how fast the item should move and can be either slow, medium or fast. Alternatively use 0,1,2 or random
wait
says how long to wait (in 1/10's of a second) before moving each time
start
just makes pretend that the item is already in the middle of it's travels so start 25 would have the item appear half way through it's travel
loop n 50
	"Hello World" at random, random 
		font random 
		colour random
		move random 50 then reverse
			wait 10
end

Index

Loops

We've already met simple loops like "loop n 50" where a set of statements between the loop and the end will repeat 50 times with the value of n changing from 1,2,3..50. The loop statement can come in a few different forms:
  • loop n 10
  • loop n 10 to 50
  • loop n 10 to 50 step 5
Here's an example with boxes:
loop x 0 to 600 step 60
	box 50 by 50 
		at x 200
		colour random
		move up 100 then reverse speed slow
end
Now here's another example but trying to show moving waves on water:
screen "Sea" at 250 460 colour blue

image water.png 
	tile 33 by 5 
	at 0 60

loop x 0 to 640 step 10
    image water.png at x 60
        move up 10 then reverse
end

Index

Action

The above almost looked like a game but the man doesn't know what items he can stand on. The action command can be placed after anything and tells the program whether the man can stand, stand, climb, die, push or finish. The finish stands for finish the screen. Let's change the program so the man has to jump across the screen.
loop x 0 to 600 step 60
	box 50 by 50 
		at x 200
		colour random
		move up 100 then reverse speed slow
		action stand
end

We could make the game a bit better by having a title and adding somethings that try to harm you:

"Block world" at 210 450

loop x 10 to 600 step 100
	box 50 by 50 
		at x 200
		colour random
		move up 100 then reverse speed slow
		action stand
end

loop n 7
	box 5 by 5
		at 600, random
		colour yellow
		move left 900 then restart 
		action die
end

Index

Define

If you remember in the first example it mentioned platforms, ladders and elevators but these don't appear in the language. Instead youcan something things using the commands above. These particular ones are defined in the initialisation script but you could define any you want.
define platform
       image platform.png
       action stand
       tile 5 by 1

define ladder
       image ladder.png
       action climb
       tile 1 by 5

define elevator
       image elevator.png
       action stand
       move up 300 then reverse
       speed slow

define fireball
      image fireball_right.png
      move left 1200 then restart
      action die

define background 
	image stars.png 
	at 0, 480 
	tile 40 by 40

Index

Changing the background

The last item above showed how the background is made up, it's just an image of stars that is tiled together across the whole screen. You can change the background or get rid of it as you please.
# change the background to grass
set background image grass.png

# or you could even forget the background all together
forget background

# or create a blue background
forget background
define background box 640 by 480 at 0 480 colour blue

# a moving background
set background move left 160 then restart 

Index

Draw order

Things are drawn in the order they are declared. The background is declared before everything else because we want it to be behind all the other images. The man is usually added after all your images so he always appears on top of the other images. In the following example he appears before the bars so it looks like he's behind bars.
box 120 by 60 at 10 210 action stand

man at 40 270

# bars
loop x 10 to 70 step 10
   box 5 by 60 at x 270
end

Index

Colour

There are a few words that define certain colours (red, yellow, lightyellow, orange, lightgreen, green, lightblue, blue, indigo, violet, cyan, magneta, white, lightgray, gray, darkgray, black). If you want to use other colours then you can use an RGB Hex value. Just go to a page like this and pick a colour then look for the Hex value for it. You could use the following to give a box a nice light blue shade. I'm afraid it's outside this tutorial to explain RGB (Red Green Blue) or Hex (numbers based on base 16!) but you can look it up on the web if you're interested. If you live in America and want to use the color instead of colour then that's fine to.
box at 240 300 color 0x004C99
The default colour is normally gray but you can change this by making your first command a colour command.
colour red
"some text"
box 
"more text" colour green

Index

Random numbers

The key word random will produce a random number in the range 0 to 640 (the width of the screen). If random is being used instead of a yellow keyword (see the syntax) then a value is chosen that's in the range required. Here's a few examples:
"my favourite number is "+random 
	colour random 
	font random

loop n 12
	"my favourite dice number is " + (random % 6 +1)
end
If you use random to help arrange your game and want to get the same sequence of random numbers again then move the mouse over the screen, click data and look for system variable called "seed". If you then set seed to this value in your code then the same sequence of random numbers will be generated each time ie
seed 241

loop n 6
	box at random random colour random
end

Index

Activating movement

Normally when you make something move it will start moving when the game begins. If you want the item to only move when something is touched by the man then you need to specify the following. The item that activates a movement will sparkle.
platform at 10 200 

box at 100 200 action stand
	move right 400 then stop when "begin"
	start "begin"
The start "string" activates the movement. The when "string" should follow a move and will only begin moving when the start has activated. There can be any number of items waiting on the same start "string". There can be any number of items that start the action. If there is a start "string" then there has to be a matching when "string". You can have any number of different activations in your code. You can have any number of

Index

What's next

I'm planning on adding the following if people find it interesting:
  • larger screen
  • better animations
  • sound
  • multi screens
  • push thing
  • zombies
  • schools
  • better animations for man
  • backups of code
  • define using, inheriting
  • voting on screens
  • use on tablets (with motion control) or facebook
  • Add the following to this tutorial:
    • How to vote
    • random seed
    • Quick example with platforms and ladders elevator
    • default colour and fonts
    • maths random
    • activate + on
    • change man start and finish positions

Index

Syntax

This is a simple language for creating platform games. You just define what goes where, how it moves and what happens if the player touches it. Your man can move left and right, jump and climb. You can define things as images, as strings or as numbers. If they have an 'at x,y' position then they appear on screen. The language itself is quite small :
statements :== # any comments you have
	       [ [ ( define|set|forget ) ] name ] type* terms*
	       loop name number [ to number [ step number ] ] statements+ end

type       :== image string [ tile number by number ]
	       box [ number by number ]
	       string
	       number
	       as name

terms      :== at number , number
	       move ( up | down | left | right ) number 
                             then ( reverse | restart | end | stop ) move_terms*
	       action ( ignore | stand | climb | die | push | finish )
	       font ( small | medium | large )
	       colour number
	       start string
	       unique

move_terms :== speed ( slow | medium | fast )
	       wait number
	       start number
	       when string

number     :== [0-9]+
	       random
	       - number
	       ( number )
	       number ( * | / | + | - | % ) number    # precendence problem
	       name                                   # if the type is a number
               0x[0-9A-F]+                            # hex for RGB colours

name       :== [A-Za-z][A-Z-a-z0-9_]*

string     :== ".*"
               string + ( string | number )
               name

Colour notes
============
These are keywords
These terms are defined elsewhere
These values can be replaced by random or by numbers 0,1,2...

Index

Definitions

There is a program that is run before your program is run which defines the colours and background etc:
# main var
define background image stars.png at 0, 480 tile 40 by 40

# colours
define red 0xFF0000
define yellow 0xFFFF00
define lightyellow 0xFFFFE0 	   
define orange 0xFF7F00
define lightgreen 0x90EE90 	   
define green 0xFF00
define lightblue 0xADD8E6 	   
define blue 0xFF
define indigo 0x4B0082
define violet 0x8B00FF
define cyan 0x00FFFF
define magneta 0xFF00FF
define white 0xFFFFFF
define lightgray 0xD3D3D3 	   
define gray 0x808080
define darkgray 0xA9A9A9 	   
define black 0x000000

# some basic items
define platform
       image platform.png
       action stand
       tile 5 by 1

define ladder
       image ladder.png
       action climb
       tile 1 by 5

define elevator
       image elevator.png
       action stand
       move up 300 then reverse
       speed slow

define fireball
      image fireball_right.png
      move left 1200 then restart
      action die

# other images
define water image water.png
define lava image lava.png
define grass image grass.png
define clouds image clouds.png
define concrete image concrete.png
define brick_grey image brick_grey.png

# special var
define exit image exit_right.png action finish at 595, 260
define screen "" at 200, 600 
define man image man_r1.png at 10 370

Index

Questions

I'm currently developing the language so things are in a state of flux. My current issues are:
  • I need a better name for the language
  • should I have if then else?
  • should I allow grouping of multiple statements into a define?
  • should I allow multiple screens in one script?
  • should the language be case sensitive?
  • do I need a statement separator ie ";"?
  • should I have an "=" in assignments?
  • is the loop statement easy to understand?
  • what colours should I allow ie red, marine, aqua-blue etc?
  • do I need permissions?
  • should system var (width, height, seed, screen) have some sort of prefix?
  • how can users add new images?
  • should I handle arrays or lists?
  • features for schools?

Index

image water.png tile 32 by 5 at 0 50 loop x 0 to 640 step 20 image water.png at x 50 move up 10 then reverse action die end platform at 10 100 loop n 12 elevator at random random move random 100 then reverse end