Make tabs for code and sprite editors
This commit is contained in:
parent
a3abb0d2d3
commit
9d2dc99a32
@ -18,6 +18,10 @@ export const drawSprite = (x: number, y: number, spr: number) => {
|
|||||||
setPixelsInRect(x, y, 8, sprites[spr]);
|
setPixelsInRect(x, y, 8, sprites[spr]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const drawIcon = (x: number, y: number, icon: Array<number>, color: number) => {
|
||||||
|
setPixelsInRect(x, y, 8, icon.map(n => n*color));
|
||||||
|
}
|
||||||
|
|
||||||
export const drawChar = (x: number, y: number, char: string, color: number) => {
|
export const drawChar = (x: number, y: number, char: string, color: number) => {
|
||||||
setPixelsInRect(x, y, 4, font[char].map(n => n*color));
|
setPixelsInRect(x, y, 4, font[char].map(n => n*color));
|
||||||
}
|
}
|
||||||
|
52
editmode.ts
52
editmode.ts
@ -2,11 +2,58 @@ import { clearScreen, fillRect } from "./window.ts";
|
|||||||
import { codetab } from "./codetab.ts";
|
import { codetab } from "./codetab.ts";
|
||||||
import { spritetab } from "./spritetab.ts";
|
import { spritetab } from "./spritetab.ts";
|
||||||
import { COLOR } from "./colors.ts";
|
import { COLOR } from "./colors.ts";
|
||||||
|
import { mouseClick, mousePos } from "./mouse.ts";
|
||||||
|
import { drawIcon } from "./builtins.ts";
|
||||||
|
import { inRect } from "./util.ts";
|
||||||
|
|
||||||
// deno-lint-ignore prefer-const
|
type TabName = "code" | "sprite" | "map" | "sfx" | "music";
|
||||||
let tab: "code" | "sprite" | "map" | "sfx" | "music" = "sprite";
|
|
||||||
|
let tab: TabName = "sprite";
|
||||||
|
|
||||||
|
const codeIcon = [
|
||||||
|
0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
0, 0, 1, 0, 0, 1, 0, 0,
|
||||||
|
0, 1, 1, 0, 0, 1, 1, 0,
|
||||||
|
0, 1, 0, 0, 0, 0, 1, 0,
|
||||||
|
0, 1, 0, 0, 0, 0, 1, 0,
|
||||||
|
0, 1, 1, 0, 0, 1, 1, 0,
|
||||||
|
0, 0, 1, 0, 0, 1, 0, 0,
|
||||||
|
0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
];
|
||||||
|
|
||||||
|
const spriteIcon = [
|
||||||
|
0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
0, 0, 1, 1, 1, 1, 0, 0,
|
||||||
|
0, 1, 1, 0, 1, 1, 1, 0,
|
||||||
|
0, 1, 1, 1, 1, 0, 0, 0,
|
||||||
|
0, 1, 1, 1, 0, 0, 0, 0,
|
||||||
|
0, 1, 1, 1, 1, 1, 1, 0,
|
||||||
|
0, 0, 1, 1, 1, 1, 0, 0,
|
||||||
|
0, 0, 0, 0, 0, 0, 0, 0,
|
||||||
|
];
|
||||||
|
|
||||||
|
const buttons: Array<{update: () => void, draw: () => void}> = [];
|
||||||
|
const makeTabButton = (tabname: TabName, x: number, y: number, icon: Array<number>) => {
|
||||||
|
buttons.push({
|
||||||
|
update() {
|
||||||
|
if (mouseClick()) {
|
||||||
|
const {x: mouseX, y: mouseY} = mousePos();
|
||||||
|
if (inRect(mouseX, mouseY, x, y, 8, 8)) {
|
||||||
|
tab = tabname;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
draw() {
|
||||||
|
drawIcon(x, y, icon, tab === tabname ? COLOR.YELLOW : COLOR.WHITE);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
makeTabButton("code", 88, 0, codeIcon);
|
||||||
|
makeTabButton("sprite", 88+8, 0, spriteIcon);
|
||||||
|
|
||||||
const update = () => {
|
const update = () => {
|
||||||
|
buttons.forEach(button => button.update());
|
||||||
if (tab === "code") {
|
if (tab === "code") {
|
||||||
codetab.update();
|
codetab.update();
|
||||||
} else if (tab === "sprite") {
|
} else if (tab === "sprite") {
|
||||||
@ -23,6 +70,7 @@ const draw = () => {
|
|||||||
}
|
}
|
||||||
fillRect(0, 0, 128, 8, COLOR.RED);
|
fillRect(0, 0, 128, 8, COLOR.RED);
|
||||||
fillRect(0, 120, 128, 8, COLOR.RED);
|
fillRect(0, 120, 128, 8, COLOR.RED);
|
||||||
|
buttons.forEach(button => button.draw());
|
||||||
}
|
}
|
||||||
|
|
||||||
export const editmode = {
|
export const editmode = {
|
||||||
|
10
spritetab.ts
10
spritetab.ts
@ -3,6 +3,7 @@ import { drawSprite } from "./builtins.ts";
|
|||||||
import { COLOR } from "./colors.ts";
|
import { COLOR } from "./colors.ts";
|
||||||
import {getSheet, setSheet} from "./sheet.ts";
|
import {getSheet, setSheet} from "./sheet.ts";
|
||||||
import { mouseHeld, mousePos } from "./mouse.ts";
|
import { mouseHeld, mousePos } from "./mouse.ts";
|
||||||
|
import { inRect } from "./util.ts";
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
selectedSprite: 0,
|
selectedSprite: 0,
|
||||||
@ -39,15 +40,6 @@ const sheetY = 88;
|
|||||||
const sheetW = 16;
|
const sheetW = 16;
|
||||||
const sheetH = 4;
|
const sheetH = 4;
|
||||||
|
|
||||||
const inRect = (x: number, y: number, rectX: number, rectY: number, rectW: number, rectH: number) => {
|
|
||||||
return (
|
|
||||||
x >= rectX &&
|
|
||||||
x < rectX+rectW &&
|
|
||||||
y >= rectY &&
|
|
||||||
y < rectY+rectH
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const reGrid = (x: number, y: number, gridX: number, gridY: number, cellW: number, cellH: number) => {
|
const reGrid = (x: number, y: number, gridX: number, gridY: number, cellW: number, cellH: number) => {
|
||||||
return {
|
return {
|
||||||
x: Math.floor((x-gridX)/cellW),
|
x: Math.floor((x-gridX)/cellW),
|
||||||
|
Loading…
x
Reference in New Issue
Block a user