microsoft / pxt-arcade

Arcade game editor based on Microsoft MakeCode

Casual game editor using Microsoft MakeCode

• Try it https://arcade.makecode.com
• Forum

This repo contains the Arcade editor built with Microsoft MakeCode (PXT).

Creating and editing a package

In the editor, you will find a GitHub icon next to the save icon. Use the GitHub integration to build a library package. You do not need to install the local dev server; everything can happen in the editor.

Local server setup

This setup gives you a local version of the editor and the ability to load packages from your machine. This is the setup to develop new packages.

Setup

• install Node.js 8+ (you might need to restart afterwards so all your environment variables are applied correctly)
• clone https://github.com/microsoft/pxt-arcade to pxt-arcade folder. For example, from a git bash

git clone https://github.com/microsoft/pxt-arcade

• go to pxt-arcade and run

cd pxt-arcade
npm install

Don't forget to periodically git pull and npm install to get the latest changes.

git pull
npm install

Launching the server

This command launches a local web server. Note that this web server is meant for development purposes only. It was not designed or secured to be run on a web server.

npm run serve

Refreshing the community.md file

Run this command, then patch description, improve the screenshot (or record gifs) if necessary.

pxt ddt featured-game --md docs/community.md

This command requires ImageMagick (https://imagemagick.org/index.php) to be installed and available at the command line as "magick".

Updating pxt-arcade-sim version

When changing the version of pxt-arcade-sim referenced by pxt-arcade, you need to change the version in three places:

1. package.json
2. .github/workflows/pxt-buildmain.yml
3. .github/workflows/pxt-buildpush.yml

In the two yml files, you'll find the version in the ref field under the step that checks out pxt-arcade-sim.

Update playlists in markdown

Get a Google API key and store it in the GOOGLE_API_KEY environment variables (turn on data from the app).

pxt downloadplaylists

How to create sprite packs

Packs of images can be added to the editor using PXT packages. To create a package of images.

1. Create a package (see steps above)
2. Prepare your sprites in a spritesheet: All sprites in a sheet must be the same size and arranged in a grid with no gaps. Spritesheets must be PNG files. An example spritesheet is located here
3. Inside the package directory, create a subdirectory where the assets will be placed and copy the spritesheet containing your images into it.
4. Create a file named meta.json in the directory you created. An example meta.json can be found here and documentation on all of the options can be found here
5. Create another .json file with the same basename as the spritesheet.
6. Inside that file add a single property called frames which maps to an array of names for the sprites. Indices start in the top left of the sheet and proceed left to right. For a sample file see here
7. From the root of your package, run the command pxt buildsprites SUBDIR where SUBDIR is the name of the directory containing the assets.
8. Two files will be generated in the package root, one with the extenstion .ts and one with the extension .jres. Add both to the package's pxt.json
9. You're done! The images will show up in the Image category when the package is added to a project

Local Dev setup

These instructions allow you to test changes to pxt-core and pxt-common-packages. They are more involved as you need to clone and link 3 repos.

• install Node.js 8+ (you might need to restart afterwards so all your environment variables are applied correctly)
• (optional) install Visual Studio Code

Automated setup

• Download setup.cmd to your local machine and place it on the folder you'd like to do your development work
• Run the following command

setup.cmd /firsttime

This call should automatically do the steps outlined in the manual setup and will clone and link all three repos.

Manual setup

• install the pxt command line tool

[sudo] npm install -g pxt

In a common folder,

• clone https://github.com/microsoft/pxt to pxt folder
• clone https://github.com/microsoft/pxt-common-packages to pxt-common-packages folder
• clone https://github.com/microsoft/pxt-arcade to pxt-arcade folder
• go to pxt and run

npm install
npm run build

• go to pxt-common-packages and run

npm install
npm link ../pxt

• go to pxt-arcade and run

npm install
npm link ../pxt
npm link ../pxt-common-packages

to run the local server

From root github folder,

cd pxt-arcade
pxt serve --rebundle

More instructions at https://github.com/microsoft/pxt#running-a-target-from-localhost

to watch for changes

To rebuild automatically when changes are made, we need gulp.

Install gulp:

npm install -g gulp

and in a seperate terminal from pxt serve and in the pxt/ folder, run:

gulp watch

Using setup.cmd

Instead of having to go to each repo, pull and link each one individually you may now use the setup.cmd file. The usage is outlined as follows with these options:
/firsttime Sets up developer environment - will clone 3 repos (pxt, pxt-arcade, and pxt-common-packages) and then run /link option
/pull Does a git pull on 3 repos (pxt, pxt-arcade, and pxt-common-packages)
/link Runs npm install and links the 3 repos
/run Runs local server and watches for changes using gulp

Viewing documents

Documents are rendered at the server and are viewable when received by the browser. Special styles and extended formatting are used which prevent them from rendering properly as generalized Markdown. While you can browse them here in the repo, they are not meant to render properly as GitHub document.

Contributing

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

MICROSOFT, the Microsoft Logo, MAKECODE, and MAKECODE ARCADE are registered trademarks of Microsoft Corporation. They can only be used for the purposes described in and in accordance with Microsoft’s Trademark and Brand guidelines published at https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general.aspx. If the use is not covered in Microsoft’s published guidelines or you are not sure, please consult your legal counsel or MakeCode team ([email protected]).

pxt-arcade's Issues

Sprites category sluggish to open

edit button from shared link goes to makecode.come home

there are 2 edit button when code is opened form shared user content link. The one on the right corner of the editor on the tool bar with the block/JS views goes to the makecode.com home page.

"render" output on controller interfers with gamepad "down" control

Snake broken

This is an interaction with trying to raster directly to screen and sprite engine. Snake called "control.screenRefresh". We should provide a frame handler for rastering operations instead.

Serial editor is all the same color

Everything is blue! We need to set whatever colors in pxtarget.json are required to get a nicer theme.

Play button should set focus to game for WASD & Arrow controls

Pushing button should set focus to game - refresh should work too

currently have to click on game screen to enable WASD & Arrow

Show code editor while running console view

code editor not available with console view screen turns blue

TODO

Simulator

• add SVG around the screen
• add buttons in SVG, especially for usage on a mobile phone
• scale the screen - need to first print on 128x128 canvas and then print this canvas scaled on the actual canvas - there's example in EV3 @samelhusseini
• gray out the simulator and display big play button over it, when it has no focus - otherwise it cannot get key events

APIs

• implement dx in scroll()
• add splash-screen and instruction functions
• some menu system?
• high score storage support (per-script in localStorage)
• add ellipse drawing (filled and empty)
• add empty rectangle drawing (using lines)
• think about frame handler order (see sprite.ts for a list)
• think if we want to support devices with very low memory (eg SAMD21 has 32k and one screen is 8k; we need double buffering, and also some other random memory which leaves around 1 screen worth of memory for the user)
• nice design for GAME OVER - probably should avoid text - localization
• nice design for splash
• better animations for sprites
• some rigid-body physics - make it easy for players to stop on platforms
• come up with a better color palette (we at least need gray)
• make palette swappable
• game loop (frame.ts) should use requestAnimationFrame()

Sharing

• save screenshots during game play
• encode LZMA compressed program sources in the screenshot and have it download on "Download" button
• implement loading of such PNG files

• [ ] show simulator in sharing page

Unsorted

• split game into HUD vs sprites, hud should be a scene
• shape drawing
• collisition detection
• simple physics
• sprite animations
• scenes
• "menu scene" -> start menu, game over
• sounds
• music (background)
• templates for specific types of games: runner, platformer, schmup, etc...
• skinning @samelhusseini
• add SVG around the screen
• add buttons in simulator SVG, especially for usage on a mobile phone; see http://arcade.readyplayeronemovie.com/
• gray out the simulator and display big play button over it, when it has no focus - otherwise it cannot get key events

ability to easily copy image blocks around

They are nested shadow blocks so it is impossible to clone these blocks right now.

Stop and Wait Network Protocol game

Game Request

Scenario: stop and wait protocol simulation

We can code as below or reverse the automated side which may be easier for students not having to type words but having the fun of timeout pressure.

Receiver

create an automated receiver that

• randomly drops incoming msg and outgoing received msg acknowledgement
• can randomly send Ack msg after the sender timeout duration

Message

• message could contain msg_num, ver_num, text
• Ack could contain msg_num, ver_num

Sender

player is the sender

• The sender sends words 1 at a time ex. sentence "Clear messages follow rules"
• sender is tasked with following the send, wait and resend rules semi-manually within the game.
  • enter the msg number 0-9
  • enter the version number 0-9
  • enter the text payload

Game Play

Game ends and displays current msg on receiver side

• After msg is sent successfully and acknowledged
• After 10 replies from automated receiver
• When sender chooses to end

crazy deluxe

would be cool to show sending animation and showing when fails

example of the scenarios

https://www.youtube.com/watch?time_continue=3&v=XLEBBBYnE8U

Default new sprite should always have something in it

Might a tiny circle or something but completely transparent looks broken.

Page title is "Pixels for MakeCode"

I guess it should be MakeCode arcade?

Move sprite editors to pxt/common packages

It breaks the game package as those editors don't exist anywhere else.

prompt api

We need a way to get inputs from the user. I guess various prompt for number, string, boolean?

Failed to decompile `No instances of Image found`

Try decompiling the snake game back to blocks

no instances of Image found (anonymous) @ pxtblocks.js:2867 (anonymous) @ pxtblocks.js:2830 buildBlockFromDef @ pxtblocks.js:2825 initBlock @ pxtblocks.js:2720 init @ pxtblocks.js:2647 Blockly.Block @ blockly_compressed.js:1584 Blockly.BlockSvg @ blockly_compressed.js:1649 Blockly.WorkspaceSvg.newBlock @ blockly_compressed.js:1482 Blockly.Xml.domToBlockHeadless_ @ blockly_compressed.js:1455 Blockly.Xml.domToBlock @ blockly_compressed.js:1453 Blockly.Flyout.show @ blockly_compressed.js:1915 Blockly.Toolbox.TreeControl.setSelectedItem @ blockly_compressed.js:1965 Blockly.Toolbox.TreeControl.setSelectedItem @ pxtblocks.js:4156 goog.ui.tree.BaseNode.select @ blockly_compressed.js:1073 Blockly.Toolbox.TreeNode.onClick_ @ pxtblocks.js:4142 goog.ui.tree.TreeControl.handleMouseEvent_ @ blockly_compressed.js:1131 goog.events.fireListener @ blockly_compressed.js:271 goog.events.handleBrowserEvent_ @ blockly_compressed.js:274 b @ blockly_compressed.js:263

Simulator pixel-sampling issue

If you view the simulator in desktop mode you get what I assume are weird pixel sub-sampling issues.

For example, if I draw this sprite:

This is what it looks like in the simulator:

For smaller renderings of the screen we may need to lock the simulator size into a multiple of 128x128 (the simulator on my screen is 320x320). I tried both 256x256 and 384x384 and both of those don't have this issue but also don't fit the simulator pane (too small and too large respectively). The fullscreen view of the simulator looks great.

There is a similar issue in the preview of sprites from the sprite editor but I feel like that's less important of a scenario.

Red over green is problematic

Red (variables) and green (sprites) is the most common mix of block colors. We need to find a better pair.

Cross the Road Game Request

Game Request

frogger style game

AI Game Request - with adjustible parameters

Game Request

AI game

demonstrate basic "AI" behavior that a student can adjust, such as using events to update parameters that influence the AI behavior

More-better

• Several games that implement different complexities of algorithm so beginner can understand simplest implementation
• fundamental functions/classes students can leverage to build own games or simulations

"hang-man" style game request

Create a game that

• uses an array of words or phrases to randomly build a game
• show boxes or under lines for missing letters, and leave spaces for spaces between words (if needed)
• show list of previously picked letters (always or with a button)
• Build the image (hangman or a creative alternative image build like robot, bike...) for misses
• nice to have: keyboard input although it doesn't translate to device
• Must have: on screen letter/number input that can work on game device

Upload/Download text file

Ability to upload or download a text file

• perform CRUD operations on text file

runtime blows up on empty string

let paddle = sprite.create(img`

`)

Need custom field editor for palette

Simulator should display grid in "debug mode"

"Debug mode" should display a full grid to help students with coordinates.

Gamepad is too small for touch

We have room, let make those gamepad buttons bigger.

server should not be connection to serial device

[run] cd C:\gh\pxt-32\node_modules\pxt-common-packages\sim; node ../node_modules/typescript/bin/tsc
serial: connecting to COM3 by Intel (PCI\VEN_8086&DEV_9D3D&SUBSYS_224E17AA&REV_21\3&11583659&0&B3)
serial: connected to COM3 by Intel (PCI\VEN_8086&DEV_9D3D&SUBSYS_224E17AA&REV_21\3&11583659&0&B3)
log strings: 8 files; 0 strings -> sim-strings.json

Call Array.sort causes a stackoverflow with #sprites > 65

let a: number[] = []
for (let index = 0; index < 100; index++) {
    a.push(index)

}
a.sort((i, j) => i * j);

When fixed, put back the sprite z-index

Jumper example doesn't open.

Probably some Apis changed..

mysprite.y changes to mysprite.x when js viewed as blocks

REPO: open https://makecode.com/_8kzVqd9kyARq and edit, change to blocks
RESULT: player1.y changes to player1.x

add .toFixed()

enable.toFixed() in JavaScript _ (optional for Blocks)

less important is .toPrecision() - just a nice to have

Fail to decompile onOverlap

let sprite: Sprite = null
sprite.onOverlap(function (other) {
    game.over()
})

Encryption Password simulator or game

Need a game that would demo encryption implementation that student can update the encryption to be more complex

• could be hash generation
• some non-clear text storage (some guess the password game but code obscures the solution)

Missing 32 x 8, 32 x16 sizes

Also abaility to specify "full screen".

1x1 sprite can't be edited

create 1x1 sprite by hand in JS and try to edit it in blocks - the color palette is super-tiny. Probably similar effect with other small sprites

Image drop down pixelates images

Sprite editor todos

Tracking further todos

• select a non-transparent color by default when opening
• shrink to avoid resizing block
• display background otherwise block looks empty
• touch support.
• cursor
• height/width display
• shape support
• "full screen" mode

ability to delete projects form "My Projects" queue

Since My Projects is fairly persistent should be able to remove the ones don't want to see. My list goes back 19 days.

String methods support

Support common string methods in JavaScript (nice to have for Blocks but not required)

• .toUpperCase()
• .toLowerCase()
• .replace()
• endsWith()
• startswith()
• .search()
• .trim()
• .parseFloat()

See the following exist already: .charAt(), .concat(), charCodeAt(), substr(), .length, .compare(), parseInt()

Stop using google fonts

Missing Array.forEach

A/B text item should not be selectable

Try double click on the butotn

"There are too many darn palettes!"

I think we have 3 copies of the palette sprinkled around. Let's clean up eventually.

Focus issue about simulator / keyboard needs to be more explicit

Grey is not enough. We should display a X-ed keyboard or something saying "click to play" as greying is too subtle.

Need an enum to pick colors

Remembering numbers in the palette is too hard.

`setFlag` doesn't decompile

try using sprite.setFlag(...), editing it in JS, and switching back to blocks - it complains about custom field editor (the switch I guess) not supporting literals.

blocks comments all at top of file in JavaScript

Comments do not stay associated with the code "blocks" when converted to JavaScript.

May also be impacting roundtrip form blocks to JS and back.

Example https://makecode.com/_e07T0KAwqgv3

Support for uploading screenshot in pxt32

Cloud-side could check that source is embeded + send to CVS. Needed to make script page more engaging.

Keys captured by simulator should prevent default

Otherwise if a scrollbar exists it would keep scrolling the page up and down as you use the up and down arrow key.

explorer only shows up with console.log()

Should always be present

field picker for keys

That displays the direction page and a/b, any keys.