Tutorial RPGM Is there a tool or a way to stitch back multi layered assets in a game?

Nerozing

Newbie
Apr 17, 2018
56
60
Loads of games (like Nymphomania Priestess) layer their visual assets in a separate file. Usually logically named, these files can be stitched back together to form a complete image. But it is time consuming and sometimes with games having more than 5-6k of such files, it can be downright impossible to do in a timely manner.

Is there a method or a tool to automatically stitch these files together without having a person to do it.
Below is a example given of said situation.
 

osanaiko

Engaged Member
Modder
Jul 4, 2017
2,090
3,332
Loads of games (like Nymphomania Priestess) layer their visual assets in a separate file. Usually logically named, these files can be stitched back together to form a complete image. But it is time consuming and sometimes with games having more than 5-6k of such files, it can be downright impossible to do in a timely manner.

Is there a method or a tool to automatically stitch these files together without having a person to do it.
Below is a example given of said situation.
The short answer is no. how would a computer know where to put each part so it looked "correct"?
The only way I could think of is to screen cap the "arranged" images when they show in the game
 

Surgy

Member
Modder
Apr 23, 2018
340
1,317
It's technically possible, though.

The final positions and geometry of each part are probably stored in the standard binary moc3 files from Live2D (most likely generator of such sprites). So one way is to decompile them and then stitch the images according to the part data with a script; but the methods for doing so are scarce, as the format developers have been going after its reversers.

The other way would be to load the models and render them to HTML canvas using the official js library and then dump the result, which seems pretty realistic. With something like this (node.js; it's AI-generated, so don't rely on it as is):
JavaScript:
const fs = require('fs');
const path = require('path');
const { Live2DCubismFramework as cubismframework } = require('@framework/live2dcubismframework');

// Initialize Cubism Framework
cubismframework.startUp();

// Load model directory
const modelDirectory = './www/img/live2d/';
fs.readdir(modelDirectory, (err, files) => {
  files.forEach((file) => {
      // Check if the file is a model file
      if (path.extname(file) !== '.model3.json') return;

      // Load the model
      const model = cubismframework.loadModel(path.join(modelDirectory, file));

      // Create a canvas for rendering
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Set the canvas size to the model's size
      canvas.width = model.getDrawableWidth();
      canvas.height = model.getDrawableHeight();

      // Render the model
      model.update(0);
      model.draw(ctx);

      // Save the rendered image as a PNG file
      const outputPath = path.join('./renders/', `${path.basename(file, '.model3.json')}.png`);
      const buffer = canvas.toBuffer('image/png');
      fs.writeFileSync(outputPath, buffer);
  });
});
But it would require programming skills and probably be a paid task if you can't do it yourself.
 
Last edited:
  • Like
Reactions: osanaiko