DEV Community: platoro nical

Thinking about lightweight formats that can be used for avatars and looping animations -02

platoro nical — Fri, 31 Jan 2025 15:24:28 +0000

Continuation of the previous post

https://qiita.com/platoronical/items/650a5a34c0e4999e8791

I don't think I've been able to convey what I want to do, but I'll continue for a little while longer

Extending the JSON from the previous post

“canvasWidth”: 4096, // texture width size
“canvasHeight”: 4096, // texture height
“layerCount”: 2,
“baseCanvasWidth”: 1920, // render canvas size
“baseCanvasHeight”: 1080, // render height
“TextureNum”: [ // how many textures to use
{
“imageCount”: 1,
“texImg”: [“texture_room_4096.png”]
}
],
“layers”: [
{
“basefileName”: “01.png”,
“imgType”: “Texture”, // Texture or Sprite
“assignID”: “layer_1”, // Reference name
“animID”:“”, 
“x”: 0,
“y“: 0,
”width“: 1920,
”height“: 1080,
”basePosition_x“: 0,
”basePosition_y“: 0,
”textureZIndex“: 0
}
],
”sprites“:[ //Sprite animation definition
{
”anim01“:[  //Animation
{
”fps":8,
“loop“: 1, // 0 is no loop, 1 is loop
”useTex“:[
”s_01“,”s_02“,”s_03“,”s_04“,”s_05“,”s_06“,”s_07“,”s_08“,”s_09“,”s_10"
]
}

]
}
]
}

Added specifications

Defined canvas size and rendering area
Allows multiple textures
Allows definition of Sprite animation
fps
Loop
Specify textures to use in an array

JSON sample

{
“canvasWidth”: 4096,
“canvasHeight”: 4096,
“layerCount”: 2,
“baseCanvasWidth”: 1920,
“baseCanvasHeight”: 1080,
“TextureNum”: [
{
“imageCount”: 1,
“texImg“: [”texture_room_4096.png“]
}
],

”layers“: [
{
”fileName“: ‘01.png’,
”imgType“: ‘Texture’,
”assignID“: ‘layer_1’,
”animID“:”“,
”x“: 0,
”y“: 0,
”width": 1920,
“height“: 1080,
”basePosition_x“: 0,
”basePosition_y“: 0,
”textureZIndex“: 0
},
{
”fileName“: ‘02.png’,
”imgType“: ‘Sprite’,
”assignID“: ‘s_01’,
”animID“:”anim01“,
”x": 0,
“y“: 1080,
”width“: 408,
”height“: 336,
”basePosition_x“: 415,
”basePosition_y“: 563,
”textureZIndex“: 1
},
{
”fileName“: ‘02.png’,
”imgType": ‘Sprite’,
“assignID“: ‘s_02’,
”animID“:”anim01“,
”x“: 408,
”y“: 1080,
”width“: 408,
”height“: 336,
”basePosition_x“: 415,
”basePosition_y“: 563,
”textureZIndex": 1
}
],

“sprites“:[
{
”anim01“:[
{
”fps“:8,
”loop“: 1,
”useTex“:[
”s_01“,”s_02“,”s_03“,”s_04“,”s_05“,”s_06“,”s_07“,”s_08“,”s_09“,”s_10”

]
}
]
}
]
}

Since rendering didn't work well with pygame, I'm rendering with canvas this time

The animation is played back partially using a single texture

Sorry for using a rather large image (and for the confusing sample).
There is plenty of room in the original texture, so it is possible to animate in several places.

There are three main objectives

To make it beautiful, it has to be large
It's hard to make and hard to learn
The specifications are unclear

I'm creating this prototype to solve the above issues
(I'm also putting the implementation JS below, but the main part is JSON and texture files)

To make it pretty, it has to be big

What gets bigger is the file size and rendering cost
When I thought about implementing lo-fi girl, I thought that there was no format dedicated to looping animation
You could use APNG or GIF, but even in this demo, you need to prepare 10 PNGs of the same size and compress them
Also, as I'll point out next, there is a big issue that you can't embed interactive elements if you make it into a single video file
Sprite animation is an approach that has been around for a long time, but I think it's a good solution to the problem.
The problem of image quality deteriorating during compression is an unavoidable issue with video.

It's hard to make and hard to learn

The learning cost of tools for creating video and avatars is high.
I think it would be advantageous for content creators if it didn't become fat as middleware.

The specifications are unclear

The specifications should be clear.
Both Flash and MMD have a history of working against them due to their black box nature.
At the very least, it would be better for everyone if it was in a form that anyone could touch, even in the indie scene.

The document ChatGPT wrote for me

JSON data documentation

This document explains the data structure of room_texture.model.json and how to use it.

1. Overview of JSON data

This JSON file is used to manage 2D graphic layers and set up sprite animations.

Texture
Data for drawing static images on a canvas.
Sprite
A layer with animation, switching between different images for each frame.
Texture information
Information about the texture file to be used.
Sprite animation settings
Including frame rate and loop settings.

2. JSON structure

{
“canvasWidth”: 4096,
“canvasHeight”: 4096,
“layerCount”: 2,
“baseCanvasWidth”: 1920,
“baseCanvasHeight“: 1080,
”TextureNum“: [
{
”imageCount“: 1,
”texImg“: [”texture_room_4096.png“]
}
],
”layers“: [...],
”sprites": [...]
}

3. Details of each field

(1) `canvasWidth` / `canvasHeight`

“canvasWidth”: 4096,
“canvasHeight”: 4096,

Specify the overall canvas size
This value is different from the normal drawing area, and is the size of the original texture
Use baseCanvasWidth / baseCanvasHeight for actual drawing

(2) `baseCanvasWidth` / `baseCanvasHeight`

“baseCanvasWidth”: 1920,
“baseCanvasHeight”: 1080,

The canvas size in the first JSON is applied
The second and subsequent JSONs are scaled down in proportion to baseCanvasWidth

(3) `TextureNum` (texture information)

“TextureNum”: [
{
“imageCount”: 1,
“texImg”: [“texture_room_4096.png”]
}
]

Specify the image file name of the texture in texImg
If there are multiple textures, they can be managed using imageCount

(4) `layers` (layer information)

Specify the image placement and type for each layer.

“layers”: [
{
“imgType”: “Texture”,
“assignID”: “layer_1”,
“animID”: “”,
“x”: 0, “y”: 0, “width”: 1920, “height”: 1080,
“basePosition_x“: 0, ‘basePosition_y’: 0,
”textureZIndex“: 0
},
{
”imgType“: ‘Sprite’,
”assignID“: ‘s_01’,
”animID“: ‘anim01’,
”x": 0, ‘y’: 1080, ‘width’: 408, ‘height’: 336,
“basePosition_x“: 415, ‘basePosition_y’: 563,
”textureZIndex“: 1
}
]

Details of each field
| Field name | Description |
|-------------|------|
| imgType | ”Texture“ (static image) or ”Sprite" (animation) |
| assignID | Unique ID (also used for sprite animations) |
| animID | Animation ID if the sprite is animated |
| x, y | Coordinates within the texture (crop the image from this range) |
| width, height | Size of the crop area |
| basePosition_x, basePosition_y | Drawing position on canvas |
| textureZIndex | Drawing order (larger value means closer to the front) |

(5) `sprites` (sprite animation settings)

“sprites”: [
{
“anim01”: [
{
“fps”: 8,
“loop“: 1,
”useTex“: [
”s_01“, ‘s_02’, ‘s_03’, ‘s_04’,
”s_05“, ‘s_06’, ‘s_07’, ‘s_08’,
”s_09”, ‘s_10’
]
}
]
}
]

Details of each field
| Field name | Description |
|-------------|------|
| animID | Sprite animation ID (anim01) |
| fps | How many times per second to update the frame |
| loop | 1 → Loop, 0 → Play only once |
| useTex | Specify assignID to determine the order of the animated images |

4. How to use

(1) Load JSON

fetch('room_texture.model.json')
.then(response => response.json())
.then(jsonData => addJsonToCanvas(jsonData));

(2) Render to the canvas

function renderCanvas() {
const canvas = document.getElementById('textureCanvas');
const ctx = canvas.getContext('2d');

jsonData.layers.forEach(layer => {
const textureImage = new Image();
textureImage.src = “texture_room_4096.png”;

textureImage.onload = () => {
ctx.drawImage(
textureImage,
layer.x, layer.y, layer.width, layer.height,
layer.basePosition_x, layer.basePosition_y, layer.width, layer.height
);
};
});
}

(3) Sprite animation

function startSpriteAnimation(ctx, jsonData, layer, textureImage) {
const spriteConfig = jsonData.sprites[0][layer.animID][0];

function animateSprite() {
const frameIndex = animationFrames[layer.assignID] % spriteConfig.useTex.length;
const frameAssignID = spriteConfig.useTex[frameIndex];
const frameLayer = jsonData.layers.find(l => l.assignID === frameAssignID);

if (frameLayer) {
ctx.drawImage(
textureImage,
frameLayer.x, frameLayer.y, frameLayer.width, frameLayer.height,
frameLayer.basePosition_x, frameLayer.basePosition_y, frameLayer.width, frameLayer.height
);
}

animationFrames[layer.assignID]++;
if (spriteConfig.loop === 1) {
setTimeout(animateSprite, 1000 / spriteConfig.fps);
}
}

animateSprite();
}

5. Summary

Specify texture information (TextureNum)
Set layer information in layers
“Texture” is a static image
“Sprite” is for animation
Manage sprite animation with sprites
Control behavior with fps and loop
Specify frames with useTex

Please refer to this document and use JSON data appropriately! 🚀

Next time

I want to think about the structure of JSON a little more and do something about the player part

The material for this room was borrowed from Nico Nico Monz.
https://commons.nicovideo.jp/works/agreement/nc225712
Thank you, Nanbu Yasumi-san!

Extra

js sample

document.getElementById('loadJsonButton').addEventListener('click', () =&gt; {
const fileInput = document.getElementById('jsonFileInput');
const file = fileInput.files[0];

if (!file) {
alert('Please select a JSON file.');
return;
}

const reader = new FileReader();
reader.onload = function (event) {
const jsonData = JSON.parse(event.target.result);
addJsonToCanvas(jsonData);
};
reader.readAsText(file);
});

document.getElementById('resetCanvasButton').addEventListener('click', resetCanvas);

let jsonDataList = [];
let baseCanvasSizeSet = false;
let secondLayerOffset = { x: 0, y: 0 };
let secondLayerCanvas = null;
let secondLayerScale = 1;
let animationFrames = {};
let activeAnimations = {};

// Set up slider events
document.getElementById('sliderX').addEventListener('input', (event) =&gt; {
secondLayerOffset.x = parseInt(event.target.value);
requestRender();
});
document.getElementById('sliderY').addEventListener('input', (event) =&gt; {
secondLayerOffset.y = parseInt(event.target.value);
requestRender();
});

let renderRequested = false;

function requestRender() {
if (!renderRequested) {
renderRequested = true;
setTimeout(() =&gt; {
renderCanvas();
renderRequested = false;
}, 50);
}
}

function addJsonToCanvas(jsonData) {
jsonDataList.push(jsonData);

if (!baseCanvasSizeSet) {
// First JSON is drawn immediately
document.getElementById('textureCanvas').width = jsonData.baseCanvasWidth;
document.getElementById('textureCanvas').height = jsonData.baseCanvasHeight;
baseCanvasSizeSet = true;
renderCanvas();
} else {
// The second JSON is drawn on an off-screen canvas and scaled down
secondLayerCanvas = document.createElement('canvas');
secondLayerCanvas.width = jsonData.baseCanvasWidth;
secondLayerCanvas.height = jsonData.baseCanvasHeight;
const secondLayerCtx = secondLayerCanvas.getContext('2d');

const textureInfo = jsonData.TextureNum[0];
const textureImage = new Image();
textureImage.src = textureInfo.texImg[0];

textureImage.onload = () =&gt; {
jsonData.layers.forEach(layer =&gt; {
secondLayerCtx.drawImage(
textureImage,
layer.x, layer.y, layer.width, layer.height,
layer.basePosition_x, layer.basePosition_y, layer.width, layer.height
);
});

let scaleW = document.getElementById('textureCanvas').width / secondLayerCanvas.width;
let scaleH = document.getElementById('textureCanvas').height / secondLayerCanvas.height;
secondLayerScale = Math.min(scaleW, scaleH);

requestRender();
};
}
}

function renderCanvas() {
const canvas = document.getElementById('textureCanvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);

jsonDataList.forEach((jsonData, index) =&gt; {
const textureInfo = jsonData.TextureNum[0];
const textureImage = new Image();
textureImage.src = textureInfo.texImg[0];

textureImage.onload = () =&gt; {
const sortedLayers = jsonData.layers.sort((a, b) =&gt; a.textureZIndex - b.textureZIndex);
sortedLayers.forEach(layer =&gt; {
if (index === 0) {
// immediately draw the first JSON layer
ctx.drawImage(
textureImage,
layer.x, layer.y, layer.width, layer.height,
layer.basePosition_x, layer.basePosition_y, layer.width, layer.height
);
} else if (index === 1 &amp;&amp; secondLayerCanvas) {
// Second JSON is drawn scaled down
ctx.drawImage(
secondLayerCanvas,
0, 0, secondLayerCanvas.width, secondLayerCanvas.height,
secondLayerOffset.x, secondLayerOffset.y,
secondLayerCanvas.width * secondLayerScale, secondLayerCanvas.height * secondLayerScale
);
}
});

// Start sprite animation
jsonData.layers.forEach(layer =&gt; {
if (layer.imgType === “Sprite”) {
startSpriteAnimation(ctx, jsonData, layer, textureImage);
}
});
};

textureImage.onerror = () =&gt; {
console.error(“Failed to load texture image:”, textureImage.src);
};
});
}

function startSpriteAnimation(ctx, jsonData, layer, textureImage) {
const spriteConfig = jsonData.sprites[0][layer.animID][0];
if (!spriteConfig) return;

animationFrames[layer.assignID] = 0;
activeAnimations[layer.assignID] = true;

function animateSprite() {
if (!activeAnimations[layer.assignID]) return;

const frameIndex = animationFrames[layer.assignID] % spriteConfig.useTex.length;
const frameAssignID = spriteConfig.useTex[frameIndex];
const frameLayer = jsonData.layers.find(l =&gt; l.assignID === frameAssignID);

if (frameLayer) {
ctx.clearRect(frameLayer.basePosition_x, frameLayer.basePosition_y, frameLayer.width, frameLayer.height);
ctx.drawImage(
textureImage,
frameLayer.x, frameLayer.y, frameLayer.width, frameLayer.height,
frameLayer.basePosition_x, frameLayer.basePosition_y, frameLayer.width, frameLayer.height
);
}

document.getElementById('updateLog').textContent = `Animating ${layer.assignID}: Frame ${frameIndex + 1}`;

animationFrames[layer.assignID]++;
if (spriteConfig.loop === 1 || animationFrames[layer.assignID] &lt; spriteConfig.useTex.length) {
setTimeout(animateSprite, 1000 / spriteConfig.fps);
} else {
activeAnimations[layer.assignID] = false;
}
}

animateSprite();
}

function resetCanvas() {
jsonDataList = [];
baseCanvasSizeSet = false;
secondLayerOffset = { x: 0, y: 0 };
secondLayerCanvas = null;
secondLayerScale = 1;
animationFrames = {};
activeAnimations = {};
document.getElementById('textureCanvas').width = 0;
document.getElementById('textureCanvas').height = 0;
document.getElementById('sliderX').value = 0;
document.getElementById('sliderY').value = 0;
renderCanvas();
}

You can load the second json, but if you do that with a canvas, it will break, so it's something to think about

Loading the second image

Considering lightweight formats that can be used for avatars and looping animations -01

platoro nical — Fri, 31 Jan 2025 15:13:46 +0000

Postscript: 1/29 0:20

Do you use lofi hip hop radio as background music?
Do you watch voiceroid videos? I like nikko-ken
Also, it seems that PNGTuber is popular

I'm always thinking about whether there is a format that is a little easier to handle, such as looping animations where only the avatar or part of the video moves.
As for the avatar, there was a similar solution, so I'll introduce the article.
https://note.com/lilish_works/n/n956ef62ea2e9

In this prototype, I used photoshop to export PNGs for each layer and write the coordinates into a json file, and then used pygame to output a player that plays those images.

This time, we used the Zundamon character from Mr. Sakamoto Duck.
https://www.pixiv.net/artworks/92641351
Thank you

The state on photoshop

A group of files exported from Photoshop

Demo played with pygames

You can see that the layers are being recreated in the demo.

{“canvasWidth”:1082,“canvasHeight”:1650,“layers”:
[
{“fileName”:“Path to file”,
“x”: X coordinate from the top left of the canvas,“y”: Y coordinate from the top left of the canvas,
“width“: width of image,”height“: height of image},
{”fileName“:”01.png“,”x“:258,”y“:109,”width“:549,”height":1473},
{“fileName”:“02.png”,“x”:460,“y”:474,“width”:66,“height”:61},
{“fileName”:“03.png”,“x”:466,“y”:496,“width”:58,“height”:16},
{“fileName”:“04.png”,“x”:480,“y”:487,“width”:33,“height”:39},
{“fileName”:“05.png”,“x”:366,“y”:351,“width”:250,“height”:107},
{“fileName”:“06.png”,“x”:383,“y”:305,“width”:216,“height”:18}
]
}

The json is output as shown above

Next, I'm thinking of packing them as a single texture to make them easier to handle.
I've also extended the json format.

I'll use pillow to pack the textures.

pip install pillow

When packing, I'll also export the json.
At this time, I'll save the x and y coordinates from when the original sequential pngs were loaded separately.
Packed images

The json that is output

{
“canvasWidth“: 1082,
”canvasHeight“: 1650,
”layers“: [
{
”fileName“: ‘01.png’,
”x“: 0,
”y“: 0,
”width“: 549,
”height“: 1473,
”basePosition_x“: 258,
”basePosition_y": 109
},
{
“fileName”: “02.png”,
“x”: 549,
“y”: 0,
“width”: 66,
“height”: 61,
“basePosition_x”: 460,
“basePosition_y”: 474
},
{
“fileName”: “03.png”,
“x”: 615,
“y”: 0,
“width“: 58,
”height“: 16,
”basePosition_x“: 466,
”basePosition_y“: 496
},
{
”fileName“: ‘04.png’,
”x“: 673,
”y“: 0,
”width“: 33,
”height“: 39,
”basePosition_x": 480,
“basePosition_y“: 487
},
{
”fileName“: ‘05.png’,
”x“: 706,
”y“: 0,
”width“: 250,
”height“: 107,
”basePosition_x“: 366,
”basePosition_y“: 351
},
{
”fileName": ‘06.png’,
“x“: 0,
”y“: 1473,
”width“: 216,
”height“: 18,
”basePosition_x“: 383,
”basePosition_y": 305
}
]
}

Next, I want to animate it

I'm having trouble

I can't get the layer name in photoshop jsx, so I get an error, so I'm making it a sequential number

If you know how to do this, please leave a comment!

If you know of any similar solutions, please let me know!

Extra
The following code was output by ChatGPT
It's just a demo, but if it's of any use

photoshop script

// Photoshop script: Output PNG for each layer and save position in JSON (map not used)

#target photoshop

try {
// Let the user select the output folder
var outputFolder = Folder.selectDialog(“Please select the output folder.”);
if (!outputFolder) {
alert(“The output folder was not selected.”);
throw new Error(“The output folder was not selected.”);
}

// Array to store JSON data
var layerData = [];

// Get the current document
var doc = app.activeDocument;

// Get the document canvas size
var canvasWidth = doc.width.as(“px”);
var canvasHeight = doc.height.as(“px”);

// Set the options for saving as PNG
function saveAsPNG(file) {
var pngOptions = new PNGSaveOptions();
pngOptions.interlaced = false;
doc.saveAs(file, pngOptions, true, Extension.LOWERCASE);
}

// Alternative function for checking arrays
function isArray(obj) {
return Object.prototype.toString.call(obj) === “[object Array]”;
}

// Function to manually construct a JSON string
function buildJSON(data) {
var json = “{”;
for (var key in data) {
if (data.hasOwnProperty(key)) {
var value = data[key];
if (typeof value === “string”) {
value = '“‘ + value + ’”'; // Enclose strings in double quotes
} else if (typeof value === “object”) {
if (isArray(value)) {
var arrayItems = [];
for (var i = 0; i < value.length; i++) {
arrayItems.push(buildJSON(value[i])); // Recursively process array elements
}
value = “[” + arrayItems.join(“,”) + “]”;
} else {
value = buildJSON(value); // Recursively process objects
}
}
json += '“‘ + key + ’”:' + value + “,”;
}
}
json = json.replace(/,$/, “”); // Remove the last comma
json += “}”;
return json;
}

// Function to export layers individually (process in reverse order)
function processLayers(layerSet, parentX, parentY, layerIndex) {
for (var i = layerSet.layers.length - 1; i >= 0; i--) { // Process from bottom layer
var layer = layerSet.layers[i];

// If the layer is a layer set, process recursively
if (layer.typename === “LayerSet”) {
layerIndex = processLayers(layer, parentX, parentY, layerIndex);
} else {
if (!layer.visible) continue; // Skip hidden layers

// Get the layer's position
var bounds = layer.bounds;
var x = bounds[0].as(“px”) + parentX;
var y = bounds[1].as(“px”) + parentY;

// Duplicate the layer and create a new document
app.activeDocument.activeLayer = layer;
layer.copy();
var tempDoc = app.documents.add(layer.bounds[2] - layer.bounds[0], layer.bounds[3] - layer.bounds[1], doc.resolution, “TempDoc”, NewDocumentMode.RGB, DocumentFill.TRANSPARENT);
tempDoc.paste();

// Create file names with sequential numbers
var fileName = (“00” + layerIndex).slice(-2) + “.png”;
var filePath = new File(outputFolder + “/” + fileName);

// Save as PNG
saveAsPNG(filePath);

// Add to JSON data
layerData.push({
fileName: fileName,
x: x,
y: y,
width: tempDoc.width.as(“px”),
height: tempDoc.height.as(“px”)
});

// Close temporary document
tempDoc.close(SaveOptions.DONOTSAVECHANGES);

// Increment the index for the next sequential number
layerIndex++;
}
}
return layerIndex;
}

// Process the layers (the sequential index starts from 1)
processLayers(doc, 0, 0, 1);

// Save as a JSON file
if (layerData.length > 0) {
var jsonFile = new File(outputFolder + “/layer_data.json”);
jsonFile.open(“w”);

// Manually construct JSON data
var outputData = {
canvasWidth: canvasWidth,
canvasHeight: canvasHeight,
layers: layerData
};
jsonFile.write(buildJSON(outputData)); // Use the manual JSON construction function
jsonFile.close();

alert(“Layer export completed!”);
} else {
alert(“There were no processed layers.”);
}
} catch (e) {
alert("An error occurred: ” + e.message);
}

pygame playback section
Additions
A texture packing button and a json switching button have been added.

pip install pygame

import pygame
import json
from PIL import Image

# Default JSON file
current_json_file = “layer_data.json”

# Load JSON file
with open(current_json_file, “r”) as file:
data = json.load(file)

# Get canvas size
canvas_width = data[“canvasWidth”]
canvas_height = data[“canvasHeight”]

# Initialize Pygame
pygame.init()
screen = pygame.display.set_mode((canvas_width, canvas_height))
pygame.display.set_caption(“Layer Drawing”)

# Dictionary to manage layer visibility
layer_visibility = {layer[“fileName”]: True for layer in data[“layers”]}

# Initialize font
font = pygame.font.Font(None, 24)

# Create texture function
def create_texture():
texture = Image.new(“RGBA”, (canvas_width, canvas_height), (255, 255, 255, 0))
texture_layers = []

# Manage the current placement coordinates
next_x = 0
next_y = 0
row_height = 0

for layer in data[“layers”]:
if layer_visibility[layer[“fileName”]]:
img = Image.open(layer[“fileName”])
img = img.resize((layer[“width”], layer[“height”]))

# If a new line is needed
if next_x + layer[“width”] > canvas_width:
next_x = 0
next_y += row_height
row_height = 0

# Add the image to be placed
texture.paste(img, (next_x, next_y), img)
texture_layers.append({
“fileName”: layer[“fileName”],
“x”: next_x,
“y”: next_y,
“width”: layer[“width”],
“height”: layer[“height”],
“basePosition_x“: layer[”x“],
”basePosition_y“: layer[”y“]
})

# Calculate the next position
next_x += layer[”width“]
row_height = max(row_height, layer[”height“])

texture.save(”texture.png“)
print(”Texture image 'texture.png' has been created!")

# Save the texture-compatible JSON
texture_json = {
“canvasWidth”: canvas_width,
“canvasHeight”: canvas_height,
“layers”: texture_layers
}
with open(“texture.json”, “w”) as json_file:
json.dump(texture_json, json_file, indent=4)
print(“Texture JSON ‘texture.json’ has been created!”)

# Function to switch JSON files
def switch_json(file_name):
global data, layer_visibility, canvas_width, canvas_height, screen, current_json_file
current_json_file = file_name
with open(file_name, “r”) as file:
data = json.load(file)
canvas_width = data[“canvasWidth”]
canvas_height = data[“canvasHeight”]
screen = pygame.display.set_mode((canvas_width, canvas_height))
layer_visibility = {layer[“fileName”]: True for layer in data[“layers”]}
print(f"‘{file_name}’ has been loaded!

# Main loop
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False

# Switch display on/off with mouse click
if event.type == pygame.MOUSEBUTTONDOWN:
x, y = event.pos
button_height = 30

# Layer switching button
for index, layer in enumerate(data[“layers”]):
button_y = index * button_height
if 10 <= x <= 200 and button_y <= y <= button_y + button_height:
layer_visibility[layer[“fileName”]] = not layer_visibility[layer[“fileName”]]

# Texture creation button
texture_button_y = len(data[“layers”]) * button_height + 10
if 10 <= x <= 200 and texture_button_y <= y <= texture_button_y + button_height:
create_texture()

# JSON switching button
switch_button_y = texture_button_y + 40
if 10 <= x <= 200 and switch_button_y <= y <= switch_button_y + button_height:
if current_json_file == “layer_data.json”:
switch_json(“texture.json”)
else:
switch_json(“layer_data.json”)

screen.fill((255, 255, 255)) # Set the background to white

# Draw the layers
for layer in data[“layers”]:
if current_json_file == “texture.json”:
if layer_visibility[layer[“fileName”]]:
img = pygame.image.load(“texture.png”)
cropped_img = img.subsurface(pygame.Rect(layer[“x”], layer[“y”], layer[“width”], layer[“height”]))
screen.blit(cropped_img, (layer[“basePosition_x”], layer[“basePosition_y”]))
elif layer_visibility[layer[“fileName”]]:
img = pygame.image.load(layer[“fileName”]) # Load PNG file
img = pygame.transform.scale(img, (layer[“width”], layer[“height”]))
screen.blit(img, (layer[“x”], layer[“y”]))

# Draw UI buttons
for index, layer in enumerate(data[“layers”]):
button_y = index * 30
color = (0, 200, 0) if layer_visibility[layer[“fileName”]] else (200, 0, 0)
pygame.draw.rect(screen, color, (10, button_y, 190, 30))
text = font.render(layer[“fileName”], True, (255, 255, 255))
screen.blit(text, (15, button_y + 5))

# Texture creation button
texture_button_y = len(data[“layers”]) * 30 + 10
pygame.draw.rect(screen, (0, 0, 200), (10, texture_button_y, 190, 30))
texture_text = font.render(“Create Texture”, True, (255, 255, 255))
screen.blit(texture_text, (15, texture_button_y + 5))

# JSON switching button
switch_button_y = texture_button_y + 40
pygame.draw.rect(screen, (200, 200, 0), (10, switch_button_y, 190, 30))
if current_json_file == “layer_data.json”:
switch_text = font.render(“Switch to Texture JSON”, True, (0, 0, 0))
else:
switch_text = font.render(“Switch to Layer Data JSON”, True, (0, 0, 0))
screen.blit(switch_text, (15, switch_button_y + 5))

pygame.display.flip()

pygame.quit()

pygame It looks pretty good
python drawing is really convenient

github
https://github.com/yuno-pxr/spriteAnimat