Train

Demo: https://campaigns.lucky-cycle.com/utils/games?game=train

1. Configuration

2. Options

3. Assets

Configuration

JSON

{
  "options": {
    "aspect_ratio": "1:1",
    "cars": 3,
    "trail": 1,
    "train_size": 400,
    "reveal_size": 800,
    "train_y": 325,
    "box_y": -100,
    "box_padding": 50,
    "box_rotation": 10,
    "halo": "rgba(255, 255, 255, 0.25)",
    "animation_duration": 500,
    "reveal_fps": 120,
    "speed": 1.5,
    "use_reward_image": false
  },
  "texts": {
    "en": {},
    "fr": {},
    "nl": {}
  },
  "images": {
    "background": GAME_URL + "/background.png",
    "head": GAME_URL + "/head.png",
    "cars": [ GAME_URL + "/car.png" ],
    "box": GAME_URL + "/box.png",
    "halo": "",
    "win": GAME_URL + "/win.png",
    "lose": GAME_URL + "/lose.png",
    "rewards": {}
  }
}

Options

Key	Type	Explanation	Default
aspect_ratio	String	Ratio of the game (default is square).	"1:1"
cars	Int	Number of cars in the train (head not included).	3
trail	Int	Number of empty "spaces" before the train loops back.	1
train_size	Int	Size of a car (square, x = y).	400
reveal_size	Int	Final size of the reveal animation (square, x = y).	800
train_y	Int	Vertical positioning of the train (relative to the container).	325
box_y	Int	Vertical positioning of the box (relative to the train car).	-100
box_padding	Int	Space around the box (to make it smaller than the car).	50
box_rotation	Int	Rotation of the box (reversed between cars).	10
halo	String	Background color for the reveal (circle shaped).	"rgba(255, 255, 255, 0.25)"
animation_duration	Int	Duration (in milliseconds) of the reveal animation.	500
reveal_fps	Int	Frames per second for the reveal animation.	120
speed	Int	Speed of the train (horizontal).	1.5
use_reward_image	Boolean	Decides if the animation should use the default win visual for the animation, or a specific one per reward (lose can't be changed).	false

Assets

Key	Size	Explanation	Default
background	1000 x 1000	Background of the game.	/background.png
head	500 x 500	Head of the train.	/head.png
cars	500 x 500	Car of the train.	/car.png
box	400 x 400	Box (closed).	/box.png
halo	500 x 500	Halo (can replace, or used in combination with the halo color option)	/
win	(500*sprite) x 500	Win sprite (each one must be square).	/win.png
lose	(500*sprite) x 500	Lose sprite (each one must be square).	/lose.png