pxt-arcade 1.12.7 → 1.12.10

package/docs/test/hardware/cardboard-arcade.md

@@ -0,0 +1,139 @@
+# MakeCode Arcade Shoebox Controller
+
+Want to create your very own DIY Arcade Video Game experience with fun joysticks and buttons? It’s easier than you think! Follow these instructions to use a shoebox as your controller for Arcade games that you play on a computer. Note that these instructions will also work if you want to create a full Arcade cabinet, but instead of using a [Raspberry Pi](https://arcade.makecode.com/hardware/raspberry-pi/cardboard-control-panel), use a computer to power it.
+
+![Shoebox controller connected](/static/hardware/shoebox-controller/shoebox.jpg)
+
+## Materials
+
+* Computer – 1 USB port (or 2 USB ports for 2-player games), internet connection
+* Shoebox
+* 2nd Shoebox (optional) – if you want to be able to support 2-player games
+* 1 joystick, 4 buttons (or 2 joysticks, 6 buttons for 2 shoeboxes) with JST cables and USB – note that you usually order these in an Arcade Game Kit. We used the [Hikig 2-Player LED Arcade DIY Kit for USB](https://www.amazon.com/dp/B07JFXQSM5) which is $45 on Amazon.
+* Pen knife
+* 4 small zip ties (8 for 2 shoeboxes)
+* Pen or Pencil
+* Decorating materials – paint, markers, glitter, stickers, etc.
+
+![Project materials](/static/hardware/shoebox-controller/materials.jpg)
+
+## Instructions
+
+### Map out the Controls
+
+* With a Pen or Pencil, draw out where you would like to place the Joystick and buttons on the top of the shoebox.
+
+![Placement of the controls](/static/hardware/shoebox-controller/placing-controls.jpg)
+
+* You will need space for:
+
+>* Joystick
+>* **A** button
+>* **B** button
+>* **Menu** button
+>* **Reset** button
+
+* Here is how we mapped out our controller panel:
+
+![Layout of player 1 controls](/static/hardware/shoebox-controller/p1-controller.png)
+
+### Determine orientation of your Joystick
+
+* Connect the JST cable between the Joystick and the USB encoder board – you may want to refer to the documentation in your kit to figure out which port to connect to. For our kit, there was only 1 port the right size for the joystick cable.
+
+![Testing joystick wiring](/static/hardware/shoebox-controller/testing-joystick1.jpg)
+
+* Attach the USB cable between the encoder board and your computer.
+* Open up a MakeCode Arcade game in the browser – i.e. https://makecode.com/_XsCCsy5L1eXr.
+* Use the Joystick to move the player around the screen and mark the correct directions on the Joystick.
+
+![Testing joystick in game](/static/hardware/shoebox-controller/testing-joystick2.jpg)
+
+![Orientation of the joystick](/static/hardware/shoebox-controller/joystick-orientation.jpg)
+
+## Install Joystick and buttons on shoebox
+
+* Disconnect the Joystick from the cable and make sure the black plastic washer and Joystick knob handle are removed.
+* Using the pen knife cut out a small hole in the top of the shoebox to fit the Joystick handle through.
+
+![Cut out the handle hole for joystick](/static/hardware/shoebox-controller/joystick-handle-hole.jpg)
+
+* From inside the box, push the Joystick handle through the hole.
+
+![Insert the handle of the joystick](/static/hardware/shoebox-controller/insert-joystick-handle.jpg)
+
+* From outside the box, drop the large washer and twist the top ball onto the Joystick handle threads.
+
+![Joystick mounted in the shoebox](/static/hardware/shoebox-controller/joystick-installed.jpg)
+
+* On the inside of the box, use the pen knife to cut 2 holes in each of the 4 corners of the Joystick mount plate – one through the plate opening, and one on the outside edge of the plate.
+* Make sure the orientation of the Joystick is correct (up is at the top).
+* Thread a zip tie through each of these holes securing the Joystick plate to the top of the box.
+
+![Zip ties securing the joystick](/static/hardware/shoebox-controller/joystick-zip-ties.jpg)
+
+* Using the pen knife, cut holes for the buttons in the top of the box – make sure you don’t cut the holes too big so the buttons don’t fall through.
+
+![Cut holes for the buttons](/static/hardware/shoebox-controller/cutting-button-holes.jpg)
+
+* Push the buttons through the top of the box.
+
+![Install the buttons](/static/hardware/shoebox-controller/install-button.jpg)
+
+* Then from the inside of the box, turn the black nuts onto the threads at the bottom of the buttons to secure them.
+
+![Attach the buttons with nuts](/static/hardware/shoebox-controller/button-nuts.jpg)
+
+## Install USB Encoder Board in shoebox
+
+* Using the pen knife, make a small hole in the front side of the Shoebox and thread the USB cable through it.
+
+![Make a hole for the USB cable](/static/hardware/shoebox-controller/usb-hole.jpg)
+
+* Place the USB encoder board inside the shoebox.
+* Connect the USB encoder board to the USB cable.
+
+![Encoder board in the shoebox](/static/hardware/shoebox-controller/installing-encoder-board.jpg)
+
+## Wire the Joystick and buttons to the USB Encoder Board
+
+Different kits may have different ports, so you should check the wiring diagram that comes with your kit. We used the following connection diagram for the Hikig 2-Player Arcade Kit:
+
+![Encoder board pin diagram](/static/hardware/shoebox-controller/usb-encoder-board.png)
+
+* Connect the Joystick JST cable between the Joystick and the USB encoder board.
+
+![Wiring the joystick](/static/hardware/shoebox-controller/wiring-joystick.jpg)
+
+* Connect a JST cable between button **A** and the first pin (K1 in our kit) on the USB encoder board.
+
+![Wiring button A](/static/hardware/shoebox-controller/wiring-a.jpg)
+
+* Connect a JST cable between button **B** and the second pin (K2 in our kit) on the USB encoder board.
+
+![Wiring button B](/static/hardware/shoebox-controller/wiring-b.jpg)
+
+* Connect a JST cable between the **Reset** button and the K11 pin (2nd port from the end in our kit) on the USB encoder board.
+
+![Wiring Reset button](/static/hardware/shoebox-controller/wiring-reset.jpg)
+
+* Connect a JST cable between the **Menu** button and the Start pin (3rd port from the end in our kit) on the USB encoder board.
+
+![Wiring Menu button](/static/hardware/shoebox-controller/wiring-menu.jpg)
+
+## Test
+
+* Connect the USB cable to your computer and open up a MakeCode Arcade game in the browser – i.e. https://makecode.com/_XsCCsy5L1eXr.
+* Make sure the Joystick and the buttons all work as expected. If not, troubleshoot by attaching different wires to different pins on the USB encoder board.
+
+![Testing the controller](/static/hardware/shoebox-controller/test.gif)
+
+## Decorate!
+
+* Use Paint, Markers, Glitter, Tin Foil, Stickers or anything else to really customize your Arcade controller and make it your own!
+
+## Player Two Shoebox Controller (optional):
+
+If you want to use 2 Arcade controllers for 2-player games, create a second shoebox controller. You will follow the same directions as above for the single player controller, but don't include a **Reset** or **Menu** button. Connect both shoebox controller USB cables to your computer and open a 2-Player MakeCode Arcade game in the browser. Note that whichever controller is connected to the computer first will be the Player 1 controller.
+
+![Layout of player 2 controls](/static/hardware/shoebox-controller/p2-controller.png)

package/docs/test/hardware/full-size-kiosk.md

@@ -0,0 +1,101 @@
+# Wooden Arcade Cabinet
+
+These instructions will show you everything you need to build your own inexpensive full-size arcade cabinet with the help of your local maker space or woodshop.
+
+![Arcade cabinet](/static/hardware/raspberry-pi/wooden-cabinet/gallery.jpg)
+
+### ~ hint
+
+#### WARNING: Power Tools required
+
+To complete this project, you will need access to power tools.
+Make sure to follow all safety procedures or ask a professional for help.
+
+### ~
+
+## Materials
+
+The cabinet is built out of 3 - 8' x 4' plywood sheets of 1/2" thickness.
+
+* **3** - 8' x 4' x 1/2" maple plywood sheets. Feel free to use other sheets based on your availability.
+* **1** - arcade button set for 2 players (https://www.amazon.com/gp/product/B00WDQWK5M)
+* **1** - 22" monitor with HDMI input (https://www.amazon.com/gp/product/B072F3DL6P)
+
+Tools needed
+
+* jigsaw, router, table saw, impact driver, pin nail gun, wood glue, etc... The kind of tools you find in a wood shop.
+* **1/8"** wood drill bit
+* **1/2"** wood drill bit
+
+## Template
+
+Cut out this template precisely and keep as you master template for all future cuts.
+
+![Side template](/static/hardware/raspberry-pi/wooden-cabinet/template.jpg)
+
+## Cut list
+
+All units are in inches and degree angles. Add 1/4" to the length when a miter is present, 1/2" when 2 miters are present.
+
+| Thickness | Width | Length   | Location | Miter Angle
+| --------- | ----- | -------- | -------- | -------
+| 1/2       | 23    | 59 3/4   | K        | 22 1/2
+| 1/2       | 23    | 24 7/8   | B        | 0
+| 1/2       | 23    | 22 1/2   | A        | 0
+| 1/2       | 23    | 18 1/2   | F        | 0
+| 1/2       | 23    | 16 1/4   | E        | 0
+| 1/2       | 23    | 15 7/8   | J        | 22 1/2
+| 1/2       | 23    | 12 15/16 | I        | 22 1/2
+| 1/2       | 23    | 12       | G        | 31
+| 1/2       | 23    | 11 1/2   | C        | 25
+| 1/2       | 23    | 6 1/4    | H        | 31
+| 1/2       | 23    | 5        | D        | 25
+
+You will also need to cut out the 2 sides of the arcade cabinet.
+
+## Cut Instructions
+
+* Using your profile template, mark 2 profiles on the plywood and cut with a jigsaw.
+
+![Cutting the template](/static/hardware/raspberry-pi/wooden-cabinet/cuttemplate.jpg)
+
+* The cuts do not have to be perfect as the router will clean it up.
+
+![Rough edges](/static/hardware/raspberry-pi/wooden-cabinet/roughedges.jpg)
+
+* Use a router to clean the edges.
+
+![Route edges](/static/hardware/raspberry-pi/wooden-cabinet/routeedges.jpg)
+
+* Cut and miter all the cuts set aside.
+
+## Assembly instructions
+
+* Create 2 jigs that let you position boards 1/4" from the side.
+* Cut out various 1" x 1/2" strips needed to secure the boards.
+
+For each board,
+
+* Cut out 2 strips and glue/pin them to the side.
+* Use the jig to position the boards 1/4" from the sides.
+
+Once all the boards are secured, attach the upper side of the arcade and you're done!
+
+![Assembled cabinet](/static/hardware/raspberry-pi/wooden-cabinet/box.jpg)
+
+## Control panel
+
+Follow the wiring instructions of the [cardboard control panel](/hardware/raspberry-pi/cardboard-control-panel) to wire the buttons and joysticks to the raspberry pi.
+
+## Screen
+
+* Place the screen on the wood panel and mark the position where the screen touches the wood.
+* Pin nail the attachments to clamp the screen down.
+* Drill holes to allow power and HDMI cables to pass through the back of the screen.
+
+To make it easier, we recommend building a jig to position and build this part.
+
+## Decoration
+
+This is your cabinet, have fun decorating it and personalize it the way you like! We used the
+https://arcade-stencils.glitch.me/ to generate stencils and drawing on our cabinets.

package/docs/test/skillmap/dino/dino1.md

@@ -39,11 +39,10 @@ let mamaDino = sprites.create(img`.`, SpriteKind.Player)
 
 and snap it inside at **the bottom** of the ``||loops(noclick): on start||`` block already in the workspace.
 
-
 ~hint Show me how! 🕵🏽
 
 
-![Add the sprite block.](/static/skillmap/dino/add-sprite.gif "Add a sprite to your game.")
+![Add the sprite block.](/static/skillmap/mole/add-sprite.gif "Add a sprite to your game.")
 
 hint~
 
@@ -55,6 +54,31 @@ hint~
 let mamaDino = sprites.create(img`.`, SpriteKind.Player)
 ```
 
+## {Step 3}
+
+- :paint brush: Click the grey box inside
+```block
+let mamaDino = sprites.create(img`.`, SpriteKind.Player)
+```
+to open the
+image editor and then click the **My Assets** tab.
+
+
+![My Assets](/static/skillmap/assets/my-assets-three.png "Toggle to see the images for this game" )
+
+
+- :mouse pointer: Choose **Mama** dino and click **Done**.
+
+![Choose mama dino from My Assets gallery](/static/skillmap/collector/mama.png " " )
+
+
+
+
+#### ~ tutorialhint
+
+```blocks
+let mamaDino = sprites.create(assets.image`Mama`, SpriteKind.Player)
+```
 
 ## {3. Look at Your Game}
 
@@ -71,13 +95,15 @@ You should see Mama Dino in the middle of the screen.
 
 ## {Step 4}
 
-**Mama Dino needs to be able to move around the screen.**
+**Mama Dino needs to be able to up and down on the screen.**
+
 
+- :game: From the ``||controller: Controller||`` category, grab  
 
-- :game: From the ``||controller: Controller||`` category, grab <br/>
 ```block
 controller.moveOnlyOnscreenWithArrows(mamaDino, controller.Speeds.Fast)
 ```
+
 and snap it in at **the end** of the ``||loops(noclick): on start||`` block already in the workspace.
 
 
@@ -89,7 +115,6 @@ and snap it in at **the end** of the ``||loops(noclick): on start||`` block alre
 
 hint~
 
-
 #### ~ tutorialhint
 
 ```blocks
@@ -111,26 +136,31 @@ arrow keys, or **W** and **S** keys.
 
 ## {Step 6}
 
-**Let's set the scene**
+**Let's set the scene**<br/>
 🖼️ 🖼️ 🖼️
 
 ---
 
 - :paper plane:  From ``||scene:Scene||``, grab
-``||scene:set background image to [ ]||``
+
+```block
+scene.setBackgroundImage(img`.`)
+```
+
 and snap it into **the top**
 of the ``||loops:on start||`` container.
 
-- :paint brush:  Click the **grey square** in the new block and toggle to **My Assets** to choose the **Freeway** background.
+- :paint brush:  Click the **grey square** and toggle to **My Assets** to choose the **Freeway** background
+
+![Choose the freeway from My Assets gallery](/static/skillmap/collector/freeway.png " " )
 
 #### ~ tutorialhint
 
 ```blocks
-let mamaDino = sprites.create(assets.image`Mama`, SpriteKind.Player)
-controller.moveOnlyOnscreenWithArrows(mamaDino, controller.Speeds.Fast)
 //@highlight
 scene.setBackgroundImage(assets.image`Freeway`)
-
+let mamaDino = sprites.create(assets.image`Mama`, SpriteKind.Player)
+controller.moveOnlyOnscreenWithArrows(mamaDino, controller.Speeds.Fast)
 ```
 
 
@@ -142,19 +172,20 @@ scene.setBackgroundImage(assets.image`Freeway`)
 
 - :arrows alternate:  To make it look like the dino is walking along the road,
 go to ``||scroller:Scroller||`` and drag
-``||scroller:scroll background with vx [-50] vy [-50]||``
+
+```block
+scroller.scrollBackgroundWithSpeed(-50, 0)
+```
+
 into **the end**
 of the ``||loops:on start||`` container.
 
-- :mouse pointer:  Stop the background from scrolling vertically by changing the value of **vy** to **0**.
-
 #### ~ tutorialhint
 
 ```blocks
 scene.setBackgroundImage(assets.image`Freeway`)
 let mamaDino = sprites.create(assets.image`Mama`, SpriteKind.Player)
 controller.moveOnlyOnscreenWithArrows(mamaDino, controller.Speeds.Fast)
-mamaDino.setStayInScreen(true)
 //@highlight
 scroller.scrollBackgroundWithSpeed(-50, 0)
 ```
@@ -177,123 +208,42 @@ Let's add some baby dinos for the mama dinosaur to rescue 💚
 
 ---
 
-- :redo:  From ``||loops:Loops||``, grab a
-``||loops:forever||``
-loop container and drag it into
-an empty spot on the workspace.
-
-- :paper plane:  From ``||sprites:Sprites||``, grab
-``||variables(sprites):set [projectile] to projectile [ ] from side with vx [50] vy [50]||``
-and snap it into the empty
-``||loops:forever||`` container.
-
-- :paint brush:  Click the **grey square** in the new block and toggle to **My Assets** to choose the **Baby** sprite.
-
-#### ~ tutorialhint
-
-```blocks
-forever(function () {
-    let projectile = sprites.createProjectileFromSide(assets.image`Baby`, 50, 50)
-})
-
-```
-
-## {Step 10}
-
-- :mouse pointer:  To make the babies look like they're walking along the road, change
-[__*vx*__](#whatVX "horizontal velocity") (or horizontal speed) to **-90**.
+- :redo:  From ``||loops:Loops||``, grab the
 
-- :mouse pointer:  Change [__*vy*__](#whatVY "vertical velocity") (or vertical speed) to **0** so they don't float up or down.
-
-
-
-```blocks
+```block
 forever(function () {
-    let projectile = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
+    let babyDino = sprites.createProjectileFromSide(img`.`, -90, 0)
+    babyDino.y = randint(15, 115)
+    pause(1000)
 })
-
 ```
+loop container and drag it into an empty spot on the workspace.
+This will create a new baby dino every second at a random starting height. 
 
+- :paint brush:  Click the **grey square** in the ``||sprites:projectile [ ] from side||`` block for ``||variables(noclick):babyDino||`` and toggle to **My Assets** to choose the **Baby** sprite image.
 
-
-## {Step 11}
-
-**😲 They're flying 😲**
-
-If we leave them like this, we won't be able to see them properly.  Let's
-send the babies in from a random height each time.
-
----
-
-- :paper plane:  From  ``||sprites:Sprites||``, grab a
-``||sprites:set [mamaDino] [x] to [0]||``
-block and snap it into **the end** of the
-``||loops:forever||`` loop container.
-
-- :mouse pointer:  Change **mamaDino** to **projectile** using the first dropdown menu.
-
-- :mouse pointer:  To change their vertical starting point, change **x** to **y** using the other dropdown menu.
-
-#### ~ tutorialhint
-```blocks
+```blockconfig.local
 forever(function () {
-    let projectile = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
-    //@highlight
-    projectile.y = 0
+    let babyDino = sprites.createProjectileFromSide(img`.`, -90, 0)
+    babyDino.y = randint(15, 115)
+    pause(1000)
 })
-
 ```
 
-
-## {Step 12}
-
-**This is looking great, but they still hover around the top.**
-
----
-- :calculator:  In
-``||sprites:set [mamaDino] [y] to [0]||``,
-replace **0** with
-``||math:pick random [0] to [10]||``.
-(From the ``||math:Math||`` category)
-
-- :mouse pointer:  Help the babies spread out along the road by changing the smallest random number from **0** to **15** and the largest random number from
-**10** to **115**.
-
 #### ~ tutorialhint
-```blocks
-forever(function () {
-    let projectile = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
-    projectile.y = randint(15, 115)
-})
-```
-
-
 
-## {Step 13}
-
-- :redo:  Keep the babies from running out at the speed of light by
-adding a
-``||loops:pause [100] ms||``
-block (from the  ``||loops:Loops||``
-category) to **the end** of the
-``||loops:forever||`` loop.
-
-- :mouse pointer:  Change the pause time to **1000 ms** by clicking in the textbox and typing
-**1000** (or click the dropdown and select **1 second**.)
-
-#### ~ tutorialhint
 ```blocks
 forever(function () {
-    let projectile = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
-    projectile.y = randint(15, 115)
+    //@highlight
+    let babyDino = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
+    babyDino.y = randint(15, 115)
     pause(1000)
 })
-```
-
 
+```
 
 
-## {Step 11}
+## {Step 10}
 
 **🎆 Congrats 🎆**
 
@@ -305,8 +255,10 @@ When you're done playing, click **Done** to return to the main page and continue
 
 
 ```blockconfig.global
-let mamaDino = sprites.create(img`.`, SpriteKind.Player)
-
+let mamaDino = sprites.create(assets.image`Mama`, SpriteKind.Player)
+let babyDino = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
+scroller.scrollBackgroundWithSpeed(-50, 0)
+babyDino.y = 0
 ```
 
 
@@ -317,24 +269,15 @@ arcade-background-scroll=github:microsoft/arcade-background-scroll/
 
 
 ```ghost
-
-let projectile: Sprite = null
+let babyDino: Sprite = null
 
 scene.setBackgroundImage(assets.image`Freeway`)
-scroller.scrollBackgroundWithSpeed(-50, 0)
-let mamaDino = sprites.create(assets.image`Mama`, SpriteKind.Player)
 controller.moveOnlyOnscreenWithArrows(mamaDino, controller.Speeds.Fast)
-animation.runImageAnimation(
-mamaDino,
-assets.animation`Mama Moving`,
-100,
-true
-)
 
 forever(function () {
-    projectile = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
-    projectile.y = randint(0, 120)
-    pause(randint(1000, 2000))
+    babyDino = sprites.createProjectileFromSide(assets.image`Baby`, -90, 0)
+    babyDino.y = randint(0, 120)
+    pause(1000)
 })
 
 ```
@@ -359,17 +302,17 @@ namespace controller{
     */
     //% color="#d54322"
     //% blockId=move_only_onscreen_with_arrows
-    //% block="move $thisSprite=variables_get(mamaDino) on screen with speed $mySpeed"
+    //% block="move $thisSprite=variables_get(mamaDino) up or down with speed $mySpeed"
     //% mySpeed.defl=Speeds.Fast
     //% inlineInputMode=inline
     export function moveOnlyOnscreenWithArrows(thisSprite: Sprite, mySpeed: Speeds) {
         thisSprite.setStayInScreen(true)
         if (mySpeed == Speeds.Fast) {
-            controller.moveSprite(thisSprite, 225, 225)
+            controller.moveSprite(thisSprite, 0, 225)
         } else if (mySpeed == Speeds.Med) {
-            controller.moveSprite(thisSprite, 175, 175)
+            controller.moveSprite(thisSprite, 0, 175)
         } else {
-            controller.moveSprite(thisSprite, 100, 100)
+            controller.moveSprite(thisSprite, 0, 100)
         }
     }
 
@@ -387,4 +330,4 @@ namespace controller{
   "main.ts": "\n",
   "pxt.json": "{\n    \"name\": \"dino - assets only\",\n    \"description\": \"\",\n    \"dependencies\": {\n        \"device\": \"*\",\n        \"core\": \"*\",\n        \"arcade-background-scroll\": \"github:microsoft/arcade-background-scroll/\"\n    },\n    \"files\": [\n        \"main.blocks\",\n        \"main.ts\",\n        \"README.md\",\n        \"assets.json\",\n        \"images.g.jres\",\n        \"images.g.ts\"\n    ],\n    \"targetVersions\": {\n        \"branch\": \"v1.6.24\",\n        \"tag\": \"v1.6.24\",\n        \"commits\": \"https://github.com/microsoft/pxt-arcade/commits/5bea1575ea693e0648a647cbd86cda9776d58f48\",\n        \"target\": \"1.6.24\",\n        \"pxt\": \"7.2.25\"\n    },\n    \"preferredEditor\": \"blocksprj\"\n}\n"
 }
-```
+```