archaicvirus / Pic-2-Tic

A web-app designed specifically for use with the tic80 fantasy console, to convert images to a usable format.

Pic-2-Tic

A web-app designed to convert images to 16-color format, for use with the TIC-80 fantasy console.

• Images can be exported for use anywhere.

To run the app

• Run the web app - Hosted via github pages.
• Or download the source folder and host it locally (run on your machine)
• Written in pure javascript, html, and css.
• Utilizes RgbQuant.js for dithering, palette application, and palette retrieval.
• I made this tool while developing Craptorio a wip Factorio de-make for the TIC-80, then it occured to me that this could be useful to fellow TIC-80 developers/creators.

Features

• Load any image, reduce it to 16-colors using a preset palette, or automagically.
• Over 100+ palettes imported from lospec included as presets
• • Additional custom and retro computer palettes
• Automatically creates a new palette for each image, based on image colors, for optional use instead of presets.
• Drag & drop images onto canvas to load, or click the '+' icon on the canvas
• Operate on multiple images at once, with independant settings
• Download image button
• Copy any palette to clipboard
• Paste any palette from clipboard (to use custom palette)
• Copy or paste any palette directly between TIC-80's sprite editor and Pic2Tic.
• Palette string is a 96-character string where each 6 digits (0-F) represent a palette color 16 colors * 6 = 96 total characters, excluding any quotes or #'s
• Click any palette color to customize with color picker
• Output image to TIC-80's pixel or sprite format, paste into your code for immediate import
• Non-destructive workflow (palette applications are always performed on a copy of the original source image)
• Resize images using the anchor on the bottom right of each widget (Does not affect output scale)
• Drag and reposition image widget by dragging the top 'bar'
• Notifications pop up and fade over time, indicating user actions
• When pasting a custom palette using the clipboard button-icon, invalid palette strings are ignored, keeping the current palette.

Choose a Palette

• Click on the 'Select Palette' button to toggle the dropdown list
• You can also type here to search for a palette

Image Settings

• Here you can choose the dithering kernel, enable serpentine dithering pattern, and toggle using the image's natural palette instead of the preset.

Download Image

• Downloads a copy of the currently displayed image

Reset Image

• Click to restore original image

Copy Pixel Data

• Outputs a 1-dimensional table of all the pixels (converted to palette indices) to the clipboard
• For drawing arbitrary sized images, 240x136 or smaller (tic80 screen size). It can easily handle any size images, though.
• Accompanied by a drawing function (used within TIC-80) to draw each pixel to the screen using pix() - See below
• Example pixel data

Copy Sprite Data

• Paste this data between your <SPRITES> </SPRITES> or <TILES> </TILES> tags in your TIC80 cart file.
• Example sprite data:

Copy Image Palette

• Copies the image's natural palette to the clipboard

Copy Selected Palette

• Copies the current palette-preset (including custom palettes) to the clipboard

Paste/Import Palette

• Click to paste a copied palette from Pic2Tic, TIC80 or any source
• Example palette 010413efefefffffff0b2049184179152409263512c8d2db473f1b5d5233162e36806a47c0a2752b53897d95b2e2e1df

Customizing Palette

• Click on any of the color cells within the palette, to change with color picker
• Adjust the RGB sliders, or manually type numbers in text-input box to the right
• Click the x to cancel changes or the check to accept the new color
• Hover any color cell to show it's palette index (same order as TIC80)

Copy & Paste Palette from TIC80

• Click the switch on the top left to enter advanced mode
• Click the 3-sliders icon on the bottom right for edit palette mode
• Click either of the two copy/paste buttons to copy or paste palette
• Can copy & paste these palettes directly between TIC80 and Pic2Tic

Draw image function for TIC-80 in lua

function draw_image(x, y, width, height, pixel_data, color_key)
  color_key = color_key or -1
  for i = 0, width - 1 do
    for j = 0, height - 1 do
      local index = j * width + i
      if pixel_data[index] ~= color_key then
        pix(x + i, y + j, pixel_data[index])
      end
    end
  end
end

• x, y - The x,y screen coordinates to draw the image
• width, height - The natural width and height of the image in pixels
• pixel_data - A lua table copied from 'copy pixel data' button
• color_key - Transparency, eg. will not draw this color/palette index
• For importing fullscreen images to TIC-80, x, y should be 0, 0 and width, height should be 240, 136 (TIC-80's screen resolution)
• • Although with a custom draw function, you could import larger images, and have a method to pan the screen, to see images larger than 240x136 within TIC-80.

Legacy

• For the old Pic2Tic, see the Legacy branch.