Program created to increase speed edition of images from Nintendo 3DS game "Ace Attorney Trilogy".
Read this in other languages: Português do Brasil, Español.
"Ace Attorney Trilogy" is a very big game, with lots of text images to be edited:
- White buttons with text in wine red color;
- Proof / Profile names, with dark gray background and texts in orange color;
- Proof / Profile subtitles, with light green background and texts in dark gray color;
- Proof / Profile descriptions, with dark gray background and texts in white color;
The traditional way of editing those graphics is through .PSD files in Adobe Photoshop, which ends up being an extremely repetitive and tiresome task for romhackers. This was the main reason why I created this software.
The "Ace Attorney Image Generator" is a program that can generate imagens on the same patterns of "Ace Attorney Trilogy" game. For such task, the following technologies were used:
- Web Version
- HTML5, for web page creation;
- CSS3, for text styling on images;
- JavaScript and jQuery, for fields' and buttons' programming;
- Html2canvas, for converting HTML elements to PNG images;
- Bootstrap, to become this page responsive;
- Bootstrap Slider, for scale and margin fields;
- Select2, to instantiate customizable select fields with HTML rendering support and ajax;
- stash, for storing local user settings, such as theme and language;
- JSZip, for creating zipped files with images;
- FileSaver.js, for saving files on the client-side, needed for batch image generation;
- Desktop Version
- Electron.js, for converting the web files into a cross platform desktop app;
- system-font-families, for getting a list of all user's installed fonts and mount a font selector field based on this list.
- A modern updated web browser. Google Chrome is recommended, since a few CSS behaviour differences can be seen on other browsers such as Firefox, Safari or IE;
- The "Arial" font installed on your computer. Needed for the right generation of some kinds of images, such as buttons per example (If you're using any Windows SO, you can ignore this);
- The "Vaud Book" font installed on your computer. Needed for the right generation of some kinds of images, such as descriptions of proofs / profiles;
- WEB VERSION ONLY: A web server. This software won't work if ran locally by user's web browser¹.
¹ Even if this software being totally local, the method used for image generation (conversion of HTML <canvas> elements to PNG images) can trigger an uncaught security error of tainted canvases , denying any attempts of data exporting. Thus, we recommend to run this software through a web server (Apache2, per example), even if it's only to serve files to clients.
- Select image type, by clicking on any of the tabs "Buttons", "Proof / Profile Names", etc;
- In the text field, type the text to be shown on the image;
- Optional: If applicable, change values of platform, scale, font and margins accordingly to the text you typed;
- Optional: If you wish to use external fonts, do the following:
- In "Font" field, choose "Another";
- In the text field on the right, type the name of the font;
- Once the font name is typed correctly, your browser will imediatelly make use of it, and show the result below;
- After you change values of any form fields, the image is automatically updated on the "Preview" below. Change the form fields as you wish, and check if the preview matches your needs;
- Recommended: Undo any custom zoom settings on your web browser, because this can result in wrongly-generated images. Keep your zoom settings always on default values (100%);
- Click on "Generate" button, and the image will be automatically generated and saved on PNG format. The filename will be set accordingly to the text you typed on form fields;
- Optional: If you messed with all default values, click on "Reset" button and all of them will be resetted to its default values.
If you find any bug, you can find me on the addresses below: