Asset Importer and Editors
by Simon Love · 08/24/2016 (1:32 pm) · 7 comments
Hola, T2D devs!
With Ludum Dare 36 starting on Friday, August 26th, I've decided to revamp my favorite engine : Torque2D.
At first I thought I'd keep this update to myself but...
a) Competition rules require that the project's source code be provided before the start.
b) I just can't help myself; I need to share with you guys. It makes us all stronger.
Simply grab the starter Project, drop in a T2D executable from the latest development branch (some ImageAsset bugs needed fixin'!) and drop in the Editors. Everything described here is strictly script-based.
Grab the updated Starter Project here
Grab the editors here
Grab the Master Modules (discussed here) at this location
Bugs exist, UI clunkyness exists. The editors have been designed/tested for a resolution of 1024x768; Maximizing the window or stretching it will result in ugly.
However, since you, as a human, have access to the source and to the github repository, feel free to submit pull requests and log issues. I will gladly try and alleviate the issues of the folks brave enough to point them out.
Every editor here loads from / saves to the MyAssets module. This is to speed up dev time; in the context of a game jam, separating assets per module is not really an issue. The idea is to draw something, drop it on the game, adjust it, create an animation or Particle Effect from it and keep going. Eventually, the ability to choose modules might be added.
Drag any .png file onto your application window. The file will be copied to (by default) the MyAssets module. The ImageSlicer (discussed below) will then be launched.
Drag any .ogg or .wav file onto your application window. The file will be copied to (by default) the MyAssets module and an asset definition file will be automatically created.
The ImageSlicer is launched automatically when you drag an image file to the application window.
It will display the image and allow you to pan & zoom using the Mouse Wheel and Right Mouse button.
It will also display the Image Size and allow you to rename the asset as well as toggle its Filtering mode.
If you change your mind, click the Red X button in the upper right to return to your application.
Switching Slicing modes will reset your changes so be careful!
If you click Apply & Save, the imageasset definition file will be created in the MyAssets modules, under /assets/images/.
From there, you can use "MyAssets:theImageName" wherever in your code to automatically use the asset. You can also move the asset file and image file to any other module as there are no hard-coded dependencies.
Note that there is currently no way to edit the imageassets which already exist on disk. The goal here is quick development, not thorough user-friendlyness. You will have to edit the asset file directly or delete it and reimport.
Pretty simple, look at the image, change its name, adjust its filtering mode and save it.
In this mode, you get access to all the Image Asset parameters (read the wiki!).
The Cells will be visually displayed on top of the image and updated whenever you change the parameters. The code will also try to prevent invalid assets (cells outside of the image, etc.) which might modify the values for you. Keep an eye out for that!
The tool will let you specify floating point values, which might lead to weird image slicing patterns. Keep a calculator nearby and try to keep it all to integers!
Crazy-ass mode, which lets you define weird cell sizes, even overlapping ones!
The funnest tool by far, simply drag frames directly on the image. Once you release the mouse, you can then click and drag the frame around for adjustments.
You can also choose the color of the frame (only for visual refernce, this doesn't get transferred to the on-disk asset) and give a unique name to each frame
Double-click any Frame in the frame list to select it and click REM to remove the selected frame.
By default, hit F2 to summon the animation builder.
On the left, you will see a list of all ImageAssets contained in the MyAssets module. If you drag&drop a new image asset, simply click Refresh at the bottom of the list to add the new asset to the list.
Double-click the Image Asset and the first frame will be shown in the central area.
The Dump button will automatically create an animation sequence from all the frames declared in the imageasset.
The Cycle checkbox determines whether the animation is set to loop (on by default).
The RND checkbox will start the animation on a random frame.
On the right, you will see a preview of the animation, built from the frame list beneath the image.
Click + to add the currently selected frame (in the center area) to the animation list.
Click - to remove the currently selected frame in the animation list.
Click Duplicate to Duplicate the currently selected frame to the slot directly after it. (Selected Frame Index + 1)
The << and >> buttons will cycle frames in the animation list while Play/Pause will will stop and resume the animation.
The slider will let you change the Animation Time (time taken to cycle through all frames).
The Text Edit Box will let you name the animation and the red X button will cancel everything and return to the game.
By default, hit F3 to create a new Particle FX, F4 to load an existing effect
This is just an update to my already-available Partice FX editor, now fully independent. This means that you can drop it in any project and use it right away!
I won't go over the entire thing here but feel free to watch the video walkthrough!
The most notable changes are the red X button to close the editor and the Save PFX button which saves it automatically to the MyAssets module.
With Ludum Dare 36 starting on Friday, August 26th, I've decided to revamp my favorite engine : Torque2D.
At first I thought I'd keep this update to myself but...
a) Competition rules require that the project's source code be provided before the start.
b) I just can't help myself; I need to share with you guys. It makes us all stronger.
Simply grab the starter Project, drop in a T2D executable from the latest development branch (some ImageAsset bugs needed fixin'!) and drop in the Editors. Everything described here is strictly script-based.
Grab the updated Starter Project here
Grab the editors here
Grab the Master Modules (discussed here) at this location
--DISCLAIMER--
Bugs exist, UI clunkyness exists. The editors have been designed/tested for a resolution of 1024x768; Maximizing the window or stretching it will result in ugly.
However, since you, as a human, have access to the source and to the github repository, feel free to submit pull requests and log issues. I will gladly try and alleviate the issues of the folks brave enough to point them out.
Every editor here loads from / saves to the MyAssets module. This is to speed up dev time; in the context of a game jam, separating assets per module is not really an issue. The idea is to draw something, drop it on the game, adjust it, create an animation or Particle Effect from it and keep going. Eventually, the ability to choose modules might be added.
Drag And Drop Asset Importer
Drag any .png file onto your application window. The file will be copied to (by default) the MyAssets module. The ImageSlicer (discussed below) will then be launched.
Drag any .ogg or .wav file onto your application window. The file will be copied to (by default) the MyAssets module and an asset definition file will be automatically created.
Image Asset Editor
The ImageSlicer is launched automatically when you drag an image file to the application window.
It will display the image and allow you to pan & zoom using the Mouse Wheel and Right Mouse button.
It will also display the Image Size and allow you to rename the asset as well as toggle its Filtering mode.
If you change your mind, click the Red X button in the upper right to return to your application.
Switching Slicing modes will reset your changes so be careful!
If you click Apply & Save, the imageasset definition file will be created in the MyAssets modules, under /assets/images/.
From there, you can use "MyAssets:theImageName" wherever in your code to automatically use the asset. You can also move the asset file and image file to any other module as there are no hard-coded dependencies.
Note that there is currently no way to edit the imageassets which already exist on disk. The goal here is quick development, not thorough user-friendlyness. You will have to edit the asset file directly or delete it and reimport.
- Single Image -
For images that are to be used as Backgrounds (1 frame for the entire image).Pretty simple, look at the image, change its name, adjust its filtering mode and save it.
- Parameter Slice -
For tilesets or spritesheets with regular tile sizes.In this mode, you get access to all the Image Asset parameters (read the wiki!).
The Cells will be visually displayed on top of the image and updated whenever you change the parameters. The code will also try to prevent invalid assets (cells outside of the image, etc.) which might modify the values for you. Keep an eye out for that!
The tool will let you specify floating point values, which might lead to weird image slicing patterns. Keep a calculator nearby and try to keep it all to integers!
- Explicit mode -
Crazy-ass mode, which lets you define weird cell sizes, even overlapping ones!
The funnest tool by far, simply drag frames directly on the image. Once you release the mouse, you can then click and drag the frame around for adjustments.
You can also choose the color of the frame (only for visual refernce, this doesn't get transferred to the on-disk asset) and give a unique name to each frame
Double-click any Frame in the frame list to select it and click REM to remove the selected frame.
Animation Builder
By default, hit F2 to summon the animation builder.
On the left, you will see a list of all ImageAssets contained in the MyAssets module. If you drag&drop a new image asset, simply click Refresh at the bottom of the list to add the new asset to the list.
Double-click the Image Asset and the first frame will be shown in the central area.
The Dump button will automatically create an animation sequence from all the frames declared in the imageasset.
The Cycle checkbox determines whether the animation is set to loop (on by default).
The RND checkbox will start the animation on a random frame.
On the right, you will see a preview of the animation, built from the frame list beneath the image.
Click + to add the currently selected frame (in the center area) to the animation list.
Click - to remove the currently selected frame in the animation list.
Click Duplicate to Duplicate the currently selected frame to the slot directly after it. (Selected Frame Index + 1)
The << and >> buttons will cycle frames in the animation list while Play/Pause will will stop and resume the animation.
The slider will let you change the Animation Time (time taken to cycle through all frames).
The Text Edit Box will let you name the animation and the red X button will cancel everything and return to the game.
Particle Fx Editor
By default, hit F3 to create a new Particle FX, F4 to load an existing effect
This is just an update to my already-available Partice FX editor, now fully independent. This means that you can drop it in any project and use it right away!
I won't go over the entire thing here but feel free to watch the video walkthrough!
The most notable changes are the red X button to close the editor and the Save PFX button which saves it automatically to the MyAssets module.
About the author
I am here to help. I've worked at every imaginable position in game development, having entered the field originally as an audio guy.
#3
Every archive unzip to a directory and then start exe?
08/25/2016 (9:38 am)
@Simon, tell us how to intall everything?Every archive unzip to a directory and then start exe?
#4
Step 2 : Drop in the Editors modules (unzip or copy) to /modules/
Step 3 : Launch the game/application. Drag a png file on the application to launch the image asset editor, press F2 to start the animation builder, F3 for the particle FX editor and F4 to load an existing Particle Effect.
Is it working for you? @yurembo?
08/25/2016 (10:52 am)
Step 1 : Get the starter project and binaries from the dev branch as of August 22nd, 2016.Step 2 : Drop in the Editors modules (unzip or copy) to /modules/
Step 3 : Launch the game/application. Drag a png file on the application to launch the image asset editor, press F2 to start the animation builder, F3 for the particle FX editor and F4 to load an existing Particle Effect.
Is it working for you? @yurembo?
#5
08/25/2016 (10:52 am)
@Peter : We are all heroes in the Torque2D League
#6
this is not work as you tell (
Your starter project doesn't work correctly (
09/24/2016 (11:26 am)
@Simonthis is not work as you tell (
Your starter project doesn't work correctly (
Associate Peter Robinson