Using the PXT Editor Asset Tool Tutorial

Arcade Show & Tell
,
1

Greetings my fellow MakeCode Arcade beings!

I figured out how to use a custom color palette and export the image to use with MakeCode Arcade using the official PXT Editor Asset Tool.

Steps to get Everything Ready

  1. Create a .txt with your color palette. NOTE: Do NOT add the transparency 000000 to the file or it won’t work!
.txt File Example

txtfilepic

  1. Open up your game in MakeCode Arcade.
  2. Navigate to the JavaScript tab at the top.
  3. Expand the Explorer menu on the left.
  4. Go to pxt.json and click on it.
  5. Click “Edit Settings As text.”
  6. Scroll down until you see the line “preferredEditor”: “tsprj” and add a comma after the last quotation mark for “tsprj”.
    8.Insert the code belo after that line, changing the hex codes to match your color palette.
    NOTE: Make sure that the order is EXACTLY the same as it is in the .txt file, or it won’t work correctly!
Palette Code Example 
    "palette": [
        "#000000",
        "#1a1c2c",
        "#5d275d",
        "#b13e53",
        "#ef7d57",
        "#ffcd75",
        "#a7f070",
        "#38b764",
        "#29366f",
        "#3b5dc9",
        "#41a6f6",
        "#73eff7",
        "#f4f4f4",
        "#94b0c2",
        "#566c86",
        "#333c57"
    ]
  1. Check that the color palette is correct in the Assets tab.
Example Color Palette

colorpalettepic
colorpalettepic778×953 40.9 KB

Creating the Assets

  1. Go to the PXT Editor Extension Tool.
  2. Drag the .txt file you create earlier onto the webpage.
Palette Upload Example

pxtassettoolexample1
pxtassettoolexample11498×483 20 KB

  1. Drag your .png file onto the webpage.
Summary

pxtassettoolexample2
pxtassettoolexample21462×716 35.9 KB

  1. Click on the dropdown box under Palette, and select the color palette you uploaded.
  2. Click in the box on to the right of your asset.
  3. Either select all of it manually, or press CTRL + A at the same time to select all of the text.
    NOTE: The Copy button does not work!
  4. Navigate to the JavaScript tab and make sure that main.ts is selected.
  5. At the top, hit Enter a few times, then paste the code from the website.
  6. Let your project save, then go to the Blocks tab.
  7. You should see the asset in the on start block.
  8. Rejoice.

I hope my tutorial was helpful! If you have any questions, please feel free to ask!

(I didn’t know where to put this. Mods, feel free to move it.)

5 Likes
2

Awesome, now we can share eachother’s color palletes a lot easier! : D

2 Likes