web-based tileset extractor/editor tool

Discussion in 'Skins' started by Thunk, Apr 16, 2011.

  1. Thunk

    Thunk Level 3: Paratroopa

    http://tkod.comuf.com/
    Should work on newest Chrome, Opera. Firefox is slower and may or may not work.

    Clicking on the big window at the top paints tiles.
    w/a/s/d or arrow keys scrolls around after you click on it or press tab.

    There are three rows of buttons at the bottom which are
    Export Tiles, Import Tiles
    Export Data, Import Data
    Export Level, Import Level

    Importing uploads a file from your computer and loads it onto the editor.
    Exporting displays an image under the button of the chosen type. You probably want to save the image by right clicking on it.

    Level is just an image of the whole level.

    Tileset stores one of each unique 16x16 tile in the level. You can click on tiles in the tileset to choose which one you paint with. It is always a 256x256 image. Maximum of 256 tiles.

    Data is an image that stores the tile indexes that make up the level in the red channel of an image. It looks like a small black strip, but if you bring it in an image editor you can see it actually has many dark shades of red.

    BASIC USE GUIDE:

    Level editing:
    Save the level you want to edit to your computer.
    click the button to the right of Export Level, choose the file you saved.
    Click export tiles. Click the tile you want to draw with. Click in the window at the top to draw with that tile.
    click export level, right-click the exported level image and save to your computer.

    Tileset editing:
    Save the level you want to edit to your computer.
    click the button to the right of Export Level, choose the file you saved.
    Click export tiles.
    Rightclick on the image that contains all of the tiles, save to your computer.
    Edit the image using an image editing program.
    click the button to the left of Export Tiles, choose the tileset you edited.
    click export level, right-click the exported level image and save to your computer.


    The stuff at the top:

    Fps: self explanatory.
    Error: how much your frame-rate is fluctuating in milliseconds
    Draw: how many milliseconds to draw the level
    Idle: how many milliseconds the browser isn't drawing
    FPS Links: chooses a target FPS. Pick the one closest to your refresh rate.
    1x,2x,3x, etc: Scales up the window that many times. Over 2x is much slower

    drawfill: Clears the empty space behind the level. Leave this on.
    drawlevel: draws the level. Why would you turn this off?
    drawsprites: draws 400 angry spacealiens. For benchmarking. I would like for people to let me know what kind of fps they get with this on at each scale factor. If it works well, maybe I'll try to make a shump?

    Does not work on IE only because I am Lazy to fix the file loading code in IE9, which sucks a bit cause IE9 is fast enough to render at HD resolutions.

    BUGS/Problems:
    ALWAYS make your image size a multiple of 16.
    Don't use transparency in the level image or tileset.
    Remove enemies from the level before editing.

    Tiles need to be aligned on 16 pixel boundaries. Most levels in the wiki are offset by 8 pixels in the horizontal, so try cropping the top 8 pixels before loading if all of the tiles are cut in half.

    If you have an easily reproducible bug, tell me the steps to reproduce it.

    UPDATE: I improved file loading. Large files work much better now.
     
  2. MegaGEN50

    MegaGEN50 Level 1: Goomba

    I need Help!
     
  3. Thunk

    Thunk Level 3: Paratroopa

    I can't help if you don't tell me what the problem is...
     
  4. HeliosCentaur

    HeliosCentaur Level 1: Goomba

    Looks great! Maybe Thunk can do a video tutorial? :)
     

Share This Page