[SOLVED] Sprite Atlas with Unity Tiny

How to use Sprite Atlas with Unity Tiny?

Using Sprite Atlas from the docs wasn't clear on how to do so, specially the 3rd step:
"3.Follow the steps in Simple Sprite Rendering. Select a sprite from the Sprite Atlas."

I created a new SpriteAtlas added a folder of 20 Textures (each contains 20 sprite), all of them appear to be correctly included inside the atlas when I click "Pack Preview".

YES, I checked "Flying Yolk Project" but I don't get where's the difference?!
I used the same code in the "SkinSystem", but I feel I must do something else in the editor, wiring of some sorts!

Code (TypeScript):

1. let path = "assets/sprites/" + Testing.atlasName + "/Page_"+ this.getRandomInt() + "_" +this.getRandomInt();
2. console.log(path);
3. renderer.sprite = this.world.getEntityByName(path);

Lastly, I checked the included assets in the build of the "Flying Yolk Project" and all the sprites are included, idk how!, not all of them are tied to an Entity(that's the only way I currently know about to include assets inside the build.

P.S. I get this error when pressing the Play button, just from adding the sprites to the SpriteAtlas! if it's empty it will work fine.

Code (Error):

1. Build step 'Packaging Assets' failed with exception: System.IO.FileNotFoundException: Could not find file "F:\UnityProjects\TinyUnity\TinyExport\_MyTinyProject\html5\development\artifacts\assets\sactx-2048x2048-Uncompressed-MySpriteAtlas-8199bb61.jpg"
2. File name: 'F:\UnityProjects\TinyUnity\TinyExport\_MyTinyProject\html5\development\artifacts\assets\sactx-2048x2048-Uncompressed-MySpriteAtlas-8199bb61.jpg'
3.   at System.IO.FileStream..ctor (System.String path, System.IO.FileMode mode, System.IO.FileAccess access, System.IO.FileShare share, System.Int32 bufferSize, System.Boolean anonymous, System.IO.FileOptions options) [0x0019e] in <ac823e2bb42b41bda67924a45a0173c3>:0
4.   at System.IO.FileStream..ctor (System.String path, System.IO.FileMode mode, System.IO.FileAccess access, System.IO.FileShare share) [0x00000] in <ac823e2bb42b41bda67924a45a0173c3>:0
5.   at (wrapper remoting-invoke-with-check) System.IO.FileStream..ctor(string,System.IO.FileMode,System.IO.FileAccess,System.IO.FileShare)
6.   at System.IO.File.OpenRead (System.String path) [0x00000] in <ac823e2bb42b41bda67924a45a0173c3>:0
7.   at System.IO.File.ReadAllBytes (System.String path) [0x00000] in <ac823e2bb42b41bda67924a45a0173c3>:0
8.   at Unity.Tiny.TinyHTML5Builder+BuildStepPackageAssets.Run (Unity.Tiny.TinyBuildContext context) [0x00194] in F:\UnityProjects\TinyUnity\Library\PackageCache\com.unity.tiny@0.14.3-preview\Editor\Export\HTML5\TinyHTML5Builder.cs:220
9.   at Unity.Tiny.TinyBuildPipeline.RunBuildSteps (Unity.Tiny.TinyEditorUtility+ProgressBarScope progress, Unity.Tiny.TinyBuildContext context) [0x00060] in F:\UnityProjects\TinyUnity\Library\PackageCache\com.unity.tiny@0.14.3-preview\Editor\Export\TinyBuildPipeline.cs:554
10. UnityEngine.Debug:LogError(Object)
11. Unity.Tiny.TinyBuildPipeline:RunBuildSteps(ProgressBarScope, TinyBuildContext) (at Library/PackageCache/com.unity.tiny@0.14.3-preview/Editor/Export/TinyBuildPipeline.cs:563)
12. Unity.Tiny.TinyBuildPipeline:Build(TinyBuildOptions) (at Library/PackageCache/com.unity.tiny@0.14.3-preview/Editor/Export/TinyBuildPipeline.cs:520)
13. Unity.Tiny.TinyBuildPipeline:BuildAndLaunch() (at Library/PackageCache/com.unity.tiny@0.14.3-preview/Editor/Export/TinyBuildPipeline.cs:410)
14. Unity.Tiny.ExportOnPlay:HandlePlayStateChanged(PlayModeStateChange) (at Library/PackageCache/com.unity.tiny@0.14.3-preview/Editor/Utility/ExportOnPlay.cs:30)
15. UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)

 

I thought about deleting this thread but it might be helpful to someone, I'll leave that to the admins.

Solution:
I quote from the Using Sprite Atlas, "A Sprite Atlas will not be exported with the project if none of its sprites is referenced by a Tiny entity (e.g. in a Sprite2DRenderer component). In this case, you can add an explicit reference to one of its sprites in the Assets tab. By doing so, the Sprite Atlas should be exported properly and its sprites should be accessible in runtime."

I was using the sprites already before creating the Atlas, removed all of them, reattached one of them again (one is enough per atlas), marked the sprite itself as explicit in, NOT the Texture(parent), in the Assets included with the build.

 

osamansr2o1oo, do you can access atlas sprite exactly by the path "assets/sprites/<ATLAS_NAME>/<SPRITE_NAME>"?
Сurrently I'm trying to do the same steps as you have describe - only "assets/sprites/<SPRITE_NAME>" returns sprite for me.
Atlas is available by the path "assets/textures/<ATLAS_NAME>", and I was unable to get sprite from the it. I can get it's entity and SpriteAtlas component but I have no idea how to extract sprite from it by the sprite name.

 

@reallyhexln sorry for the delay, I'm not sure what happens when u use "assets/sprites/<ATLAS_NAME>/<SPRITE_NAME>"

But it's exactly like I said, I get the path to the sprite then pass it to "world.getEntityByName(<SPRITE_PATH>)" then assign it to the SpriteRenderer.
(note: code snippet is in the Thread Head)

And don't forget to explicitly reference at least a single sprite in the Assets settings


P.S. I won't be online for a long time in a couple of days, sorry about that, I'll try to check back here before I go, cheers

 

@osamansr2o1oo, thank you for feedback!

Currently, I'm trying to load the sprite from atlas with the following line:

Code (JavaScript):

1. world.getEntityByName("assets/sprites/my_atlas1/sprite1")

and it returns None entity for me.

When I trying to load the sprite with the next line:

Code (JavaScript):

1. world.getEntityByName("assets/sprites/sprite1")

it returns the valid sprite for me, but there is no atlas name in such path, so there will be name collisions when different sprites with the same name will be presented in multiple atlases.

I believe it's a problem with export settings of the project.

I have added explicit references to all sprites from atlas, and still no luck.

I will try to recreate the entire project, may be there are problems with it.

 

You are welcome @reallyhexln, I wish I could be of more help to you.
1.) What's the returned type when u call getEntityByName() with the AltasName included ?
2.) Are you sure u create the Atlas properly ?

It's working on my side but I doubled checked the Sprite2DRenderer class, it has sprite property which is of type Entity, so getEntityByName() returning the sprite image as an Entity is logical

 

osamansr2o1oo, oh, thank you for helping.

Okay, I have create a new project, recreate my atlas, and nothing changes.

The following steps I made:

1. Create ui_pack.png atlas file with sprites:
   
   
2. Create new 2D project in Unity.
3. Add Tiny package to the project.
4. Create new Tiny project in the current project.
5. Create folder "Images" in the "Assets" folder of project.
6. Place ui_pack.png to the folder "Images".
7. Set the following settings for atlas:
   
8. Click the "Sprite Editor" button and slice the entire image into 4 sprites:
   
9. Click Close and next Save changes:
   
   
10. Next, I open the Tiny project settings and add explicit reference to the atlas and to all its sprites:
    
    
11. Next, I create New Component System with the following code:
    
    Code (JavaScript):

    1. namespace game {
    2.  
    3.     /** New System */
    4.     export class NewSystem extends ut.ComponentSystem {
    5.  
    6.         OnUpdate(): void {
    7.             // returns None entity
    8.             let atlasEntity1: ut.Entity = this.world.getEntityByName("assets/sprites/ui_pack");
    9.             // returns atlas entity
    10.             let atlasEntity2: ut.Entity = this.world.getEntityByName("assets/textures/ui_pack");
    11.             // returns None entity
    12.             let atlasSpriteEntity1: ut.Entity = this.world.getEntityByName("assets/sprites/ui_pack/ui_pack_0");
    13.             // returns None entity
    14.             let atlasSpriteEntity2: ut.Entity = this.world.getEntityByName("assets/textures/ui_pack/ui_pack_0");
    15.             // returns sprite entity
    16.             let spriteEntity: ut.Entity = this.world.getEntityByName("assets/sprites/ui_pack_0");
    17.         }
    18.     }
    19. }
12. Then I build the project.
13. Generated assets.js file looks like:
    
    
    Code (JavaScript):

    1. ...
    2. var UT_ASSETS_SETUP = function(world) {
    3.     var arch0 = world.createArchetype(ut.Core2D.Image2D, ut.Core2D.Image2DLoadFromFile, ut.EditorExtensions.AssetReferenceTexture2D)
    4.     var e0 = world.createEntity(arch0);
    5.     world.setEntityName(e0, "assets/textures/ui_pack");
    6.     var arch1 = world.createArchetype(ut.Core2D.Sprite2D, ut.EditorExtensions.AssetReferenceSprite)
    7.     var e1 = world.createEntity(arch1);
    8.     world.setEntityName(e1, "assets/sprites/ui_pack_1");
    9.     var e2 = world.createEntity(arch1);
    10.     world.setEntityName(e2, "assets/sprites/ui_pack_2");
    11.     var e3 = world.createEntity(arch1);
    12.     world.setEntityName(e3, "assets/sprites/ui_pack_3");
    13.     var e4 = world.createEntity(arch1);
    14.     world.setEntityName(e4, "assets/sprites/ui_pack_0");
    15.     var c0 = new ut.Core2D.Image2DLoadFromFile();
    16.     c0.imageFile = "ut-asset:ui_pack";
    17. ...

My results are exactly the same as in the comments for the step 11. I get None Entity for the path "assets/sprites/ui_pack/ui_pack_0".

What I'm doing wrong?