Menú
Platform Link: https://arcade.makecode.com/
"Imagine building your own video game world - with MakeCode Arcade, you become the designer, artist, and programmer all in one!"
micro:bit Connection:
Try This! Connect your micro:bit and make it show a smiley face:
basic.showIcon(IconNames.Happy)
1. Character Creation: Draw your hero using our template:
Body: 4x6 pixels Head: 3x3 pixels Legs: 2x4 pixels
3. Create Your Storyboard:
Level | Theme | Challenge |
---|---|---|
Forest | Jump over rivers | Avoid falling logs |
Ice Cave | Slide on ice | Dodge snowballs |
Volcano | Jump lava streams | Collect fireproof gear |
Tools You'll Love:
Animation Secret: Create smooth motion with just 4 frames!
Frame 1: Right foot forward Frame 2: Standing position Frame 3: Left foot forward Frame 4: Standing position (repeat)
1. Character Creation: Draw your hero using our template:
// Create your hero let hero = sprites.create(img` . . . . . . . . . . 3 3 3 . . . . 3 3 3 3 3 . . . 3 1 3 1 3 . . . 3 3 3 3 3 . . . . 3 . 3 . . . . . 3 . 3 . . . . . . . . . . . `, SpriteKind.Player)
Tilemap Designer Guide:
1. Click "Scene" > "New Tilemap"
2. Paint with these special tiles:
Physics Magic:
// Set gravity force const GRAVITY = 1500 scene.setGravity(0, GRAVITY)
// Make character fall hero.ay = GRAVITY
Pro Tip: Try moon gravity! Set GRAVITY = 300 for floaty jumps.
Character Control System:
controller.A.onEvent(ControllerButtonEvent.Pressed, function () { if (hero.isHittingTile(CollisionDirection.Bottom)) { hero.vy = -200 // Jump height } }) controller.left.onEvent(ControllerButtonEvent.Held, function () { hero.vx = -100 // Move left animation.setAction(hero, ActionKind.RunningLeft) })
Create Smart Enemies:
// Bouncing enemy let enemy = sprites.create(enemyImg, SpriteKind.Enemy) enemy.vx = Math.randomRange(-50, 50) // Wall bounce logic enemy.onUpdate(function() { if (enemy.isHittingTile(CollisionDirection.Left)) { enemy.vx = 50 } })
Collection System:
sprites.onOverlap(SpriteKind.Player, SpriteKind.Coin, function(sprite, coin) { coin.destroy() info.changeScoreBy(10) music.baDing.play() // Reward sound })
Animation Creation:
// 1. Create animation container let runAnim = animation.createAnimation(ActionKind.Running, 100) // 2. Add frames runAnim.addAnimationFrame(img`frame1`) runAnim.addAnimationFrame(img`frame2`) runAnim.addAnimationFrame(img`frame3`) // 3. Attach to character animation.attachAnimation(hero, runAnim)
Pro Techniques:
1. Jump Float Effect:
jumpAnim.addAnimationFrame(img`jump_start`) for (let i=0; i<8; i++) { jumpAnim.addAnimationFrame(img`jump_top`) // Repeat top frame } jumpAnim.addAnimationFrame(img`jump_end`)
2. Direction Matters:
if (hero.vx < 0) { animation.setAction(hero, ActionKind.RunningLeft) } else { animation.setAction(hero, ActionKind.RunningRight) }
3. Shared Animations:
// All coins use same animation const coinAnim = animation.createAnimation(...) coins.forEach(coin => animation.attachAnimation(coin, coinAnim))
Button Controls:
// Use micro:bit buttons input.onButtonPressed(Button.A, function() { hero.vy = -200 // Jump with button A })
Tilt Control:
// Move with micro:bit tilt input.onGesture(Gesture.TiltLeft, function() { hero.vx = -100 })
Life Display:
// Show lives on LEDs basic.forever(function() { basic.showNumber(info.life()) })
Custom Controllers:
// Use fruit to control game let banana = game.createSprite(2, 2) banana.onTouch(function () { // Jump when touching fruit })
Sound Effects:
// Jump sound controller.A.onEvent(ControllerButtonEvent.Pressed, function() { music.playSound(music.melodyPlayable("C5-")) }) // Coin collection sprites.onOverlap(SpriteKind.Player, SpriteKind.Coin, function() { music.playSound(music.melodyPlayable("Ding")) })
Special Effects:
// Screen shake when hit sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function() { scene.cameraShake(4, 500) }) // Background effects effects.clouds.startScreenEffect()
Debugging Tips:
Advanced Ideas:
Weather System:
// Rain effect in water levels
effects.blizzard.startScreenEffect()
Power-Up System:
sprites.onOverlap(SpriteKind.Player, SpriteKind.PowerUp, function() {
// Enable special abilities
hero.say("FIRE POWER!")
})
Time Challenge:
// 60-second countdown
game.splash("Race against time!")
info.startCountdown(60)
Secret Areas:
// Hidden warp zone
if (hero.tileKindAt(TileDirection.Center, assets.tile`warp`)) {
tiles.teleportToMap(tilemap`secret_level`)
}
Creative Spark:
Development Path:
Troubleshooting Guide:
Problem | Solution |
---|---|
Character stuck | Jump over rivers |
Animation glitch | Slide on ice |
Control unresponsive | Jump lava streams |
Performance slow | Reduce sprite count/complexity |
Final Challenge: Build a game with:
"Remember: Your first game doesn't need to be perfect - start small, test often, and most importantly, have fun creating!"
Technique | When to Use |
---|---|
Frame Repeats | Jump over rivers |
Shared Animations | Slide on ice |
State Switching | Jump lava streams |
Physics Visualization | Reduce sprite count/complexity |
Directional Art | Making movement look natural |
The Artist's Mindset: "Think of animation as digital flipbook art - each frame is a drawing, and code flips the pages for you!"
Start creating today