AJ Canvas Enhanced

By doggirlie.

A Phantom plugin that adds layers to Animal Jam Classic's art studio canvas, with undo and redo that never run out.

• Paint panel takes the place of the studio's whole left column (its colours, tools, brush sizes and undo button are hidden while it's open), and spreads into the plain wood either side of it to be wider, dressed like Animal Jam's own boards: a polished wooden frame with brass nails, jungle vines and flowers, each section's name on a wooden sign, glossy outlined buttons, and the game's own Tiki Land headings and Digital Delivery text (fonts built into the game, which the panel finds there; if it can't use them, Windows' Trebuchet MS and Segoe UI stand in, and the plugin log says why). It stays put:
• a colour picker: press and drag round the ring for the hue, and in the square for how strong and how bright; it follows the mouse until you let go;
• an eyedropper (the button beside the colour code): press it, move over the picture to preview the colour, and click to take it. Press it again to cancel;
• 16 recent colours: the colour you last painted with goes in the first slot and the rest move along one. It starts with a set of everyday colours;
• the tools (Brush, Eraser, Spray, Smudge, Fill, Line, Box, Circle), each with its own picture; the one in use lights up blue. The Eraser takes the brush size from the slider and clears the layer you're on where it goes, so the layers below show through, and shows them while you erase rather than painting white (the plugin's own brush erases, and the layers below show through its stroke as it goes, with nothing redrawn each frame, so it keeps up). A stroke starts the moment you press, and the next one doesn't wait for the last to be put on its layer; each can be undone like any stroke;
• the Lasso: drag round part of the picture to select it on the layer you're on, then drag inside the selection to move it, or press Delete to clear it. Esc, Deselect or picking another tool lets it go. Moves and deletes undo like strokes;
• a brush size slider (1 to 100) with its size written underneath and a preview of the brush in your colour. At full hardness the studio's own brush paints every size (the plugin tells it the width), so lines and shapes take the size too. A softer brush paints with the plugin's own, and a ring the brush's size follows the mouse over the canvas. A hard brush 1 wide is the plugin's too, drawn without smoothing, so its line is solid whole pixels rather than a faint blur;
• a brush opacity slider (10 to 100%) under it. A stroke shows see-through while you draw it, just as it will land. This is separate from each layer's Opacity;
• a hardness slider (0 to 100%): 100% is the studio's sharp edge, and lower makes the brush and eraser softer at the edge. A soft eraser clears only as much as its edge covers, and shows it while you erase;
• the layers list (up to 25 layers), with a scroll bar beside it to drag, click or use the mouse wheel on when there are more than fit, then New, Delete, Move up and Move down (as icons), Merge, Hide/Show, Opacity (100, 75, 50, 25%) and Name, then Lock and Clip, then Undo and Redo, with how many steps each has written underneath. Lock (lock transparency) keeps a layer's see-through parts see-through, so you can shade inside what's already painted; the eraser still erases. Clip (clipping layer) shows a layer only where the layer under it has paint, and hides it with that layer. Both light up blue when on, and the list marks those layers "lock" and "clip";
• My Colours at the bottom: 16 slots of your own. Click an empty slot (+) to put the colour you're using in it, and a filled one to paint with it. Press Edit to change them: a filled slot then takes the colour you're using, or empties if it already has it. They're remembered.
• Import images: press Import images in the panel (or run Import images from the plugin menu). A menu opens in the game, over the panel: press Choose image to pick a PNG, JPEG or GIF from your computer, and it shows on the canvas. Pick Fit (all of it shows), Fill (covers the canvas) or Actual size, then press Add as new layer. It lands on a new layer above the one you're on, already picked up with the lasso, so you can drag it into place and press Esc. One undo takes it away again, and see-through parts stay see-through. The studio counts it as a brush stroke, so you can submit or save the picture straight away. Cancel or Esc closes the menu.
• Drawing on a lower layer stays under the layers above, even while the stroke is in progress.
• Saving keeps layers. When you save a picture with more than one layer, its layers are kept on your computer, and loading that picture again brings them back.
• Ctrl+Z undoes, Ctrl+Y (or Ctrl+Shift+Z) redoes. Hold them to repeat. There is no limit, and layer changes (new, delete, move, merge) are undone too.
• Zoom: the − and + buttons under the hardness slider zoom the canvas in and out (up to 8×), and the + and − keys do the same. Click the Zoom % sign to go back to 100%. While zoomed, hold Space and drag to move around the picture.
• Keybinds: B brush (press again for spray), P brush, E eraser, J smudge, G fill, U shapes (press again for line, box, circle), I eyedropper, L lasso, [ and ] brush size, Ctrl+Shift+N new layer, Ctrl+E merge down, + and − zoom. Letters do nothing while you're typing. The first time the panel opens it lists them, and the Keybinds command (plugins menu or Ctrl+K) shows them again.
• The studio's own Undo button uses the same history, and its Clear button can now be undone.
• Everything is on your screen only. The studio submits exactly the flattened picture you see, so hidden layers are left out.
• Works alongside other canvas plugins. Whatever another plugin paints on the canvas goes on your active layer like any stroke, and the plugin never paints over it while it redraws. Its own pieces over the canvas are named (starting ajCanvasEnhanced), so other plugins can tell them apart.

Settings

In the plugin's settings in Phantom:

• Open the paint panel in the studio (on to start with). Turned off, the studio stays exactly as it is until you run Show paint panel.
• Single-key tool keybinds (on to start with). Turned off, the letter keys (B, E, G, L and the rest) and + − are left to the game; the Ctrl keys still work while the panel is open.

How to use it

1. Install AJ Canvas Enhanced from the Phantom plugin store and allow its permissions.
2. Turn it on for your game: open the plugin in Phantom's Plugins page, go to its Games tab and switch on the game you play. It does nothing until you do this.
3. Open (or reopen) the art studio's painting easel. The paint panel takes the place of the studio's left column. If it goes missing, run Show paint panel from the game's plugin menu.

Run Keybinds from the plugin menu (or Ctrl+K) to see the keys.

Limits worth knowing

• Animal Jam only stores the flat picture. The layers are kept separately in the game's local storage on this computer (the last 12 pictures), so they don't follow you to another computer, and a picture that's changed after saving (or one saved with a single layer) loads flat.
• Undo history starts fresh when a picture is loaded or the studio is closed.
• A stroke from the studio's own tools is filed onto the active layer by comparing the canvas before and after, so the soft edges of spray or smudge strokes keep the colours they blended with at the time. A stroke of the plugin's own brush that shows in the live view (below) is filed from its shape instead, so its soft edges stay see-through. If the game turns any step of that down, the stroke is drawn onto the canvas and filed by comparing instead, so it still lands, and the plugin log says which step it was.
• While a stroke would land looking different from how the studio paints it (the eraser, a see-through brush or layer, Lock, Clip), a picture of the result is shown over the canvas and redrawn every frame of the stroke, which takes a little more work from the game. It is only set up the first time it's needed. An ordinary stroke on the top layer costs almost nothing: it is filed, and the canvas is left as it is.
• An imported image is placed on the canvas, so anything past the edges is cut off. Flash only opens your computer's file window from a real click in the game, so Choose image is covered by a small see-through button made for this (picker/), loaded into the game when the menu first opens. It only opens pictures, never runs the file, and sends it nowhere.
• Painting on a hidden layer shows it again, since the stroke would otherwise vanish.
• The plugin's own brush takes over the brush and eraser only: Spray and Smudge use the studio's nearest size.
• While the eraser is out, a clear sheet lies over the easel (as with the lasso), so the studio doesn't paint the eraser's strokes as well: only the plugin's brush erases, and the studio is told the picture changed so it can still be submitted and saved.

Permissions it asks for

It asks for one permission, Act in the game (game: act, which includes seeing the game). It uses it to:

• keep each layer as a bitmap in the game, and save layers to the game's local storage;
• draw the paint panel, and hide the studio's own left column while it's open;
• hear the studio's strokes, clears and undos, and set its colour, tool, brush size and widths;
• load the importer's file picker into the game, and open the image you choose there;
• keep the Ctrl shortcuts from the game while the studio is open, and find Animal Jam's fonts and draw the panel's words with them.

It never sends anything to Animal Jam's servers itself, and needs no network access.

Develop

To run it from this folder instead (needs Node.js 22 or newer): run npm install (again after updating, since 1.1.0 moved to the 0.2 SDK and its tools), then npm run dev and leave it running. In Phantom, turn on Developer mode under Plugins; the plugin appears marked Development. Turn off the store version while you do.

| Command | What it does | | ------------------ | --------------------------------------------------------------- | | npm run dev | Serves the plugin to Phantom with hot reload | | npm run typecheck| Type-checks src | | npm test | Runs the layers, undo, redo, saving, fonts and importer against a simulated game | | npm run validate | Checks the manifest | | npm run pack | Builds the .tgz Phantom's store takes | | npm run picker | Rebuilds the file picker (needs Haxe 4) |

• src/layers.ts keeps the layers and history; src/saves.ts keeps them with saved pictures.
• src/panel.ts lays out the paint panel, src/art.ts paints its wood, vines, flowers, icons and shine, and src/color.ts is the picker and swatch maths.
• src/index.ts starts and stops it with the studio and binds the shortcuts.
• src/fonts.ts finds the game's fonts (in gui.Fonts, Flash's font list and the game's own text), checks each draws, and tells the panel's text fields to draw with built-in fonts, which Phantom's overlay doesn't do by itself.
• src/importer.ts is the Import images menu's work in the game: the file picker, the preview on the canvas and the new layer. The picker itself is picker/ajcanvasenhanced/ImagePicker1.hx; npm run picker builds it to picker/picker.swf and writes it into src/picker.ts. Its class name has a number, raised whenever it changes, since the game keeps the first one it loads.
• @rollup/plugin-inject, buffer and process are in devDependencies only because @phantomclient/plugin-cli 0.2.0 needs them to build and doesn't install them itself.