Giter VIP home page Giter VIP logo

pxt-arcade's Introduction

Casual game editor using Microsoft MakeCode Build Status

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

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

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+
  • (optional) install Visual Studio Code
  • install the pxt command line tool
[sudo] npm install -g pxt

In a common folder,

npm install
npm run build
  • go to pxt-common-packages and run
npm install
pxt link ../pxt
  • go to pxt-arcade and run
npm install
pxt link ../pxt
pxt 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

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 People

Contributors

pelikhan avatar mmoskal avatar jwunderl avatar riknoll avatar abchatra avatar ganicke avatar darzu avatar shakao avatar chasemor avatar guillaumejenkins avatar samelhusseini avatar alex-kulcsar avatar tballmsft avatar jamesadevine avatar sehodges avatar dharinirajah avatar jacobbovee avatar roboerikg avatar toledoal avatar ikeras avatar eanders-ms avatar eric-camplin avatar gabrielsroka avatar gbraad avatar hristoramirez avatar indefinitelee avatar felixtsu avatar greg-norris avatar tsunyi avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.