2023-10-15 Official microStudio Tutorial

Official microStudio learning material

microStudio Tour

Main Menu

• Explore: discover new projects created by other users
  • view source and assets
• Clone to fork your own copy
• Create: start a new project
• Create: find your own projects or start a new one
• Tutorials: learn microStudio and game development topics
  • records progress with XP and achievement system
• Documentation: full microStudio application, programming, and API docs
• About: learn more about microStudio

Project Window

Project Menu

• Code: write, execute, test, debug
• Sprites: sprite editor
• Maps: map editor
  • uses sprites from Sprites
• Docs: documentation editor
  • markdown
• Settings: Project settings
  • including title and URL slug for sharing
• Publish: publishing options panel

First Project

three primary functions

• ​init​​
• ​update​​
• ​draw​​

draw = function()
  screen.drawSprite("sprite", x, y, 20)
end

autovivification, so (x, y)​​ is initially (0, 0)​​.

​update​​ takes care of event handling.

update = function()
  if keyboard.LEFT then x = x-1 end
  if keyboard.RIGHT then x = x+1 end
  if keyboard.UP then y = y+1 end
  if keyboard.DOWN then y = y-1 end
end

Programming

Introduction

The Console is a microScript REPL

Variables

​=​​ for assignment

speed = 1000

Variables are autovivified. They get a zero value if initialized without an explicit value.

Variable names are ^[a-Z A-Z][a-z A-Z 0-9 _ ]*​​

Available types:

• numeric
• text / string
• function
• list
• object

Variables are global by default.

Functions

Mostly look like Lua functions

average = function(x, y)
	return (x + y) / 2
end

Any expression can be used as a parameter

average(10+2, average(10, 20))

​local​​ to declare a scoped variable

sum_squares = function(a, b)
  local sum = 0
  sum = sum + a*a
  sum = sum + b*b
  return sum
end

Lists

0-based

They have associated methods

list = []
list.push("element 1")
list.insert("element 2")
print("Length: " + list.length)
print(list.indexOf("element 2"))
list.remove(1)

Conditions

Your basic if​​ else​​ elsif​​ then​​ end​​ stucture

test = function(number)
  if number<0 then
    print( "the number is negative" )
  elsif number == 0 then
    print( "The number is zero")
  else
    print( "The number is positive" )
  end
end

Loops

​for​​ loops

for i=1 to 10
	print(i)
end

you can specify increment of the loop

for i=1 to 10 by 2
	print(i)
end

It can iterate through lists

list = ["dog", "cat", "mouse"]

for animal in list
	print(animal)
end

​while​​ loops

i = 1

while i < 1000
  print(i)
  i = i*2
end

Objects

Both prototype and class style of OOP is supported.

​object​​ creates something like a hash. They’re basically JavaScript objects.

myChair = object
  legs = 4
  color = "white"
  material = "wood"
end

print(myChair.legs)
myChair["color"] = "blue"
prop = "material"
myChair[prop] = "steel"

Properties can be any valid type, including functions and other objects

myRoom.addFurniture = function(piece)
  furniture.push(piece)
end

​for​​ can iterate through object properties.

for prop in myChair
	print(prop + " = " + myChair[prop])
end

Drawing

Shapes

screen.fillRect(0,0,50,50,"#F00")

colors can be anything a browser can take

​(0, 0)​​ is the middle of the screen

​screen.fillRect()​​ draws a filled rectangle. screen.drawRect()​​ draws a rectangle outline. There’s also fillRound​​ and drawRound​​.

Colors

Hex, rgb, rgba, HSL, etc

If you omit color, microStudio uses the last color specified. setColor​​ is handy for setting explicitly color for bulk drawing operations.

screen.setColor("rgb(0,255,255)")  // cyan
screen.fillRect(0,0,50,50)

color - CSS Cascading Style Sheets MDN

Lines and polygons

screen.drawLine(0,0,100,50,"rgb(255,255,255)")
screen.drawPolygon(-50,50,50,50,0,0,-50,50,"rgb(0,255,255)")
points = [-50,50,50,50,0,0,-50,50]
screen.drawPolygon(points,"rgb(0,255,255)")
points = [-50,50,50,50,0,0,-50,50]
screen.fillPolygon(points,"rgb(0,255,255)")

screen.fillPolygon(30,-40,70,20,-12,-20,"rgba(255,128,0)")

Text

draw = function()
  screen.clear()
  screen.drawText("Some Text",0,0,20,"rgb(255,255,255)")
end

You can specify the font.

draw = function()
  screen.clear()
  screen.setFont("Awesome")
  screen.drawText("Some other Text",0,0,20,"rgb(255,255,255)")
end

Built-in fonts are listed in global.fonts​​. See the visual details at the fonts demo.

microStudio Global Fonts Demo

Sprites and maps

​screen.drawSprite​​ works for static and animated sprites.

​setFrame​​ to manually force a reset on animated sprites.

draw = function()
  screen.clear()
  sprites["my_animated_sprite"].setFrame(0)
  screen.drawSprite("my_animated_sprite",0,0,100)
end

You can also draw a specific static frame of an animated sprite.

draw = function()
  screen.clear()
  screen.drawSprite("my_animated_sprite.0",0,0,100)
end

​drawMap​​ to draw maps

draw = function()
  screen.clear()
  screen.drawMap("map1",0,0,320,200)
end

Gradients

Set your gradient, and then draw something.

screen.setLinearGradient(0,0,100,0,"rgb(255,0,0)","rgb(0,255,255)")
screen.fillRect(0,0,500,500)

Gradient gets thrown away as soon as you set a color.

Transparency, transforms

Transparency

You can explicitly set opacity without remembering rgba​​ or anything like that.

screen.setAlpha(0.5)
screen.fillRect(0,0,50,50,"rgb(255,255,255)")
screen.fillRect(20,20,50,50,"rgb(255,255,255)")

Reset opacity when you’re done, though!

screen.setAlpha(1)

Rotation

Set rotation with setDrawRotation​​, resetting by calling with a zero parameter.

screen.setDrawRotation(45)
screen.fillRect(0,0,100,100,"rgb(255,255,255)")
screen.setDrawRotation(0)
screen.fillRect(0,0,100,100,"rgba(255,255,255, 0.5)")

Scaling

screen.setDrawScale(-1,1)  // x axis will be inverted
screen.drawSprite("sprite",0,0,100)
screen.setDrawScale(1,1) // reset to the default value 1,1

Create a game

This just walks through making a speed runner.