🧪 Test Sequences

Interactive test demonstrations with play controls and source code

Character Movement

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8
┌────────────┐ │████████████│ │█··········█│ │█··········█│ │█··········█│ │█··········█│ │█··········█│ │█·····@····█│ │████████████│ └────────────┘ Legend: @ = Player spawn position █ = Brick wall (128x128 pixels) ║ = Ladder (128x128 pixels) · = Empty space (128x128 pixels)
{ "metadata": { "name": "Character Movement", "width": 12, "height": 8 }, "layers": { "tiles": { "parallax_factor": 1.0, "objects": [ { "id": "brick_0_0", "type": "brick", "x": 0, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_0", "type": "brick", "x": 128, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_0", "type": "brick", "x": 256, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_0", "type": "brick", "x": 384, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_0", "type": "brick", "x": 512, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_0", "type": "brick", "x": 640, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_0", "type": "brick", "x": 768, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_0", "type": "brick", "x": 896, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_0", "type": "brick", "x": 1024, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_0", "type": "brick", "x": 1152, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_0", "type": "brick", "x": 1280, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_0", "type": "brick", "x": 1408, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_1", "type": "brick", "x": 0, "y": 128, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_1", "type": "brick", "x": 1408, "y": 128, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_2", "type": "brick", "x": 0, "y": 256, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_2", "type": "brick", "x": 1408, "y": 256, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_3", "type": "brick", "x": 0, "y": 384, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_3", "type": "brick", "x": 1408, "y": 384, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_4", "type": "brick", "x": 0, "y": 512, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_4", "type": "brick", "x": 1408, "y": 512, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_5", "type": "brick", "x": 0, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_5", "type": "brick", "x": 1408, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_6", "type": "brick", "x": 0, "y": 768, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_6", "type": "brick", "x": 1408, "y": 768, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_7", "type": "brick", "x": 0, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_7", "type": "brick", "x": 128, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_7", "type": "brick", "x": 256, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_7", "type": "brick", "x": 384, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_7", "type": "brick", "x": 512, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_7", "type": "brick", "x": 640, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_7", "type": "brick", "x": 768, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_7", "type": "brick", "x": 896, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_7", "type": "brick", "x": 1024, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_7", "type": "brick", "x": 1152, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_7", "type": "brick", "x": 1280, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_7", "type": "brick", "x": 1408, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] } ] } }, "player": { "spawn_x": 768, "spawn_y": 768 } }

8 frames • Click play to see the sequence in action

Jumping & Falling

Frame 1 Frame 2 Frame 3 Frame 4
┌────────────┐ │████████████│ │█··········█│ │█··········█│ │█··········█│ │█··········█│ │█··········█│ │█·····@····█│ │████████████│ └────────────┘ Legend: @ = Player spawn position █ = Brick wall (128x128 pixels) ║ = Ladder (128x128 pixels) · = Empty space (128x128 pixels)
{ "metadata": { "name": "Jumping & Falling", "width": 12, "height": 8 }, "layers": { "tiles": { "parallax_factor": 1.0, "objects": [ { "id": "brick_0_0", "type": "brick", "x": 0, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_0", "type": "brick", "x": 128, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_0", "type": "brick", "x": 256, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_0", "type": "brick", "x": 384, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_0", "type": "brick", "x": 512, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_0", "type": "brick", "x": 640, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_0", "type": "brick", "x": 768, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_0", "type": "brick", "x": 896, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_0", "type": "brick", "x": 1024, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_0", "type": "brick", "x": 1152, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_0", "type": "brick", "x": 1280, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_0", "type": "brick", "x": 1408, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_1", "type": "brick", "x": 0, "y": 128, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_1", "type": "brick", "x": 1408, "y": 128, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_2", "type": "brick", "x": 0, "y": 256, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_2", "type": "brick", "x": 1408, "y": 256, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_3", "type": "brick", "x": 0, "y": 384, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_3", "type": "brick", "x": 1408, "y": 384, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_4", "type": "brick", "x": 0, "y": 512, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_4", "type": "brick", "x": 1408, "y": 512, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_5", "type": "brick", "x": 0, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_5", "type": "brick", "x": 1408, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_6", "type": "brick", "x": 0, "y": 768, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_6", "type": "brick", "x": 1408, "y": 768, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_7", "type": "brick", "x": 0, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_7", "type": "brick", "x": 128, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_7", "type": "brick", "x": 256, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_7", "type": "brick", "x": 384, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_7", "type": "brick", "x": 512, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_7", "type": "brick", "x": 640, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_7", "type": "brick", "x": 768, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_7", "type": "brick", "x": 896, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_7", "type": "brick", "x": 1024, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_7", "type": "brick", "x": 1152, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_7", "type": "brick", "x": 1280, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_7", "type": "brick", "x": 1408, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] } ] } }, "player": { "spawn_x": 768, "spawn_y": 768 } }

4 frames • Click play to see the sequence in action

Brick Breaking

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8
┌────────────┐ │············│ │············│ │············│ │············│ │············│ │····████····│ │····@·······│ │████████████│ └────────────┘ Legend: @ = Player spawn position █ = Brick wall (128x128 pixels) ║ = Ladder (128x128 pixels) · = Empty space (128x128 pixels)
{ "level_file": "levels/test_brick_breaking.json", "level_data": { "metadata": { "name": "Brick Breaking Test Level", "width": 12, "height": 8 }, "layers": { "tiles": { "parallax_factor": 1.0, "objects": [ { "id": "brick_0_7", "type": "brick", "x": 0, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_7", "type": "brick", "x": 128, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_7", "type": "brick", "x": 256, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_7", "type": "brick", "x": 384, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_7", "type": "brick", "x": 512, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_7", "type": "brick", "x": 640, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_7", "type": "brick", "x": 768, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_7", "type": "brick", "x": 896, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_7", "type": "brick", "x": 1024, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_7", "type": "brick", "x": 1152, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_7", "type": "brick", "x": 1280, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_7", "type": "brick", "x": 1408, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "breakable_brick_1", "type": "brick", "x": 512, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "breakable_brick_2", "type": "brick", "x": 640, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "breakable_brick_3", "type": "brick", "x": 768, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "breakable_brick_4", "type": "brick", "x": 896, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] } ] } }, "player": { "spawn_x": 512, "spawn_y": 768 } }, "actions": [ { "keys": [ 1073741903 ], "duration": 20 }, { "keys": [ 32 ], "duration": 30 } ] }

8 frames • Click play to see the sequence in action

Ladder Climbing

Frame 1 Frame 2 Frame 3 Frame 4 Frame 5 Frame 6 Frame 7 Frame 8
┌────────────┐ │████████████│ │█··········█│ │█··········█│ │█··········█│ │█····║║····█│ │█····@║····█│ │█··········█│ │████████████│ └────────────┘ Legend: @ = Player spawn position █ = Brick wall (128x128 pixels) ║ = Ladder (128x128 pixels) · = Empty space (128x128 pixels)
{ "metadata": { "name": "Ladder Climbing", "width": 12, "height": 8 }, "layers": { "tiles": { "parallax_factor": 1.0, "objects": [ { "id": "brick_0_0", "type": "brick", "x": 0, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_0", "type": "brick", "x": 128, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_0", "type": "brick", "x": 256, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_0", "type": "brick", "x": 384, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_0", "type": "brick", "x": 512, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_0", "type": "brick", "x": 640, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_0", "type": "brick", "x": 768, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_0", "type": "brick", "x": 896, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_0", "type": "brick", "x": 1024, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_0", "type": "brick", "x": 1152, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_0", "type": "brick", "x": 1280, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_0", "type": "brick", "x": 1408, "y": 0, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_1", "type": "brick", "x": 0, "y": 128, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_1", "type": "brick", "x": 1408, "y": 128, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_2", "type": "brick", "x": 0, "y": 256, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_2", "type": "brick", "x": 1408, "y": 256, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_3", "type": "brick", "x": 0, "y": 384, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_3", "type": "brick", "x": 1408, "y": 384, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_4", "type": "brick", "x": 0, "y": 512, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "ladder_5_4", "type": "ladder", "x": 640, "y": 512, "width": 128, "height": 128, "color": [ 139, 69, 19 ] }, { "id": "ladder_6_4", "type": "ladder", "x": 768, "y": 512, "width": 128, "height": 128, "color": [ 139, 69, 19 ] }, { "id": "brick_11_4", "type": "brick", "x": 1408, "y": 512, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_5", "type": "brick", "x": 0, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "ladder_5_5", "type": "ladder", "x": 640, "y": 640, "width": 128, "height": 128, "color": [ 139, 69, 19 ] }, { "id": "ladder_6_5", "type": "ladder", "x": 768, "y": 640, "width": 128, "height": 128, "color": [ 139, 69, 19 ] }, { "id": "brick_11_5", "type": "brick", "x": 1408, "y": 640, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_6", "type": "brick", "x": 0, "y": 768, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_6", "type": "brick", "x": 1408, "y": 768, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_0_7", "type": "brick", "x": 0, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_1_7", "type": "brick", "x": 128, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_2_7", "type": "brick", "x": 256, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_3_7", "type": "brick", "x": 384, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_4_7", "type": "brick", "x": 512, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_5_7", "type": "brick", "x": 640, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_6_7", "type": "brick", "x": 768, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_7_7", "type": "brick", "x": 896, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_8_7", "type": "brick", "x": 1024, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_9_7", "type": "brick", "x": 1152, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_10_7", "type": "brick", "x": 1280, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] }, { "id": "brick_11_7", "type": "brick", "x": 1408, "y": 896, "width": 128, "height": 128, "color": [ 135, 90, 60 ] } ] } }, "player": { "spawn_x": 640, "spawn_y": 640 } }

8 frames • Click play to see the sequence in action