2D Toolkit - 2D in Unity made simple [RELEASED]

With an ortho camera, you're limited to letterboxing. Basically, you want to increase/decrease the ortho size by the right amount to fit the new height. The values are linearly scaled, so if you need to display more data, its newResolutionHeight / oldResolutionHeight * oldOrthoSize;

Alternatively you can use the tk2dCamera, which lets you do this and stretch to fit directly. It might not be suitable though, as the units are a lot bigger.

 

I have a question if 2D Toolkit support vector graphic? I have some art work created in Adobe Illustrator, and instead of exporting to PNG format, would it possible to have it read as a vector graphic format, such as SVG? Thank you.

 

No, it doesn't support vector formats.

 

Hello,

I'd like to know if there is any optimal way a sprite collection should be used with. For example, on what basis do I group my sprites? and so on.

 

What you want to think about is how sprites get used together. You want to minimise draw calls, so group sprites which get used together as much as possible.

 

i found problem. on unity 3.5 my object is selected as static but it moves with transform.Translate. on unity 4.0 with transform.Translate its origin moves but sprite image does not move.

 

This means it's ideal to put all your elements in a single sprite collection. If a sprite collection produced 2 atlases, does this mean that in this case there will be more draw calls? (I'm assuming it will be 2)?

 

Does the same thing work with a built in Unity box? It should behave identically there are no real differences between then,

 

If you can put everything into one collection it will be ideal.
Avoid multi atlas spanning if possible, as it creates multiple atlases - you can most certainly do much much better as you know a lot more about how things are going to be used.

If you have 2 collections, it will be a minimum of 2 draw calls, depending on how things are sorted in the Z. Assume you have sprite A from collection A and sprite B from collection B.

A = 1 draw call
AB = 2 draw calls
ABBBBBB = 2 draw calls
AAAABAAAAA = 3 draw calls
ABAB = 4 draw calls

You want to group things in z as much as possible, so you don't end up in situations like these. Again, try to avoid the atlas spanning feature, it makes it much harder to avoid situations like these.

 

2dtk sprites behave different on 3.5 and 4.0 for static property.

 

I'm sorry, I don't get what static property you're talking about... is it
Transform.Translate(sprite.transform, position)
?

 

Alright, I'm using a perspective camera and I am trying to use a tile map, but every now and then a glimmer of the background will shine through between vertical/horizontal gaps in the sprites that shouldn't be there. These gaps seem to appear between chunks, but othertimes they appear anywhere between them. I found this support thread: http://unikronsoftware.com/2dtoolkit/forum/index.php?topic=294.0 but it did not help (I am using Point instead of Bilinear to begin with). One other thing I am doing to the tilemap is I'm seeing the scale on a regular pixel perfect and setting the tilemap object's scale to that so I can get pixel perfect. I don't think that would cause a problem, but I thought I better mention it. Any idea why a gap sometimes shimmers through my tilemaps every now and then?

 

With a perspective camera there are a few things that can cause an issue.
How big is your tilemap? How many partitions do you get?
Does the gap happen at partition boundaries?

Next, do you have mipmaps on the sprite collection atlases?

 

The tilemap is pretty big. It's scaled to a bit above 5.77 so I can get it pixel perfect for the camera at a distance of -10. The dimensions are the default, 128x128, with partitions of 32x32. I use up nearly all the edges and in between, I get 16 chunks (Chunk 0-3 03), with one chunk having nothing in it, so there's a lot of partitions. I also have colliders set in the sprite collection, but I think I'm gonna do them custom because sometimes stuff slips through them and plus just having big box colliders would probably be best.

Often, but not always. The gaps happen in stretches between sprites aligned with an axis, and come in every now and then. The problem is not consistent at all so it is a bit difficult to test.

One spot that isn't along a partition is where there's a jag in the way tiles are laid out. It would actually make sense to have another smaller partition there, but there isn't as far as I can see

No, none on my textures, none on my sprite collection's atlas, and the sprite collection's texture setting's is set to user defined.

The problem is not consistent, it happens every now and then when moving around the game world. I always keep my z the same for the camera. I was thinking of hacking large black squares behind the tiles, but that'd be very hacky and bad (a very last resort)

 

static is a checkbox at inspector's upper right corner.

 

I take it you're on > Unity 3.5.2 - pre 3.5.2, you needed a slight z offset for physics which could cause this issue.

The time I've seen this happen is when texture filtering due to uv rounding errors pushes it to sample from an adjacent pixel. You can verify if this is the case - open up your sprite collection and in settings, set padding to 1 instead of Default (it defaults to 0 when point filtering is selected). Also, be sure to multiselect all sprites and set pad method to extend. Does it still happen with this set?

 

Oh that thing.
That checkbox is to mark an object as Static. You're not supposed to move static objects.

Unity has probably change the behaviour to not update state for static render objects - and rightfully so. It is a useful optimization.

 

At first when I tried this I thought "OMG this is working! I could've sworn I had tried this before"! But it still occasionally shows up... I think it might have helped though. Should I try changing my sprites from "Point" to "bilinear"?

I am in fact using Unity 3.5.6


EDIT: I've been trying to record this, and the problem seems to be on the right side, or bottom of the sprite. It's harder to reproduce now with the extra padding, but it's still popping up

 

Ok. Keep adding more padding. Does it ever go away?

Basically only one of two things could go wrong:
1. The texture sampler is sampling the wrong UV - if lots of padding fixes this, than this is the issue.
2. The interpolated positions are incorrect, i.e. the two sprites aren't ending up on EXACTLY the same points, and are getting pushed one way or the other.

We need to identify the problem first.

 

I jumped straight to 16 padding, and it still comes up (although rarely). I'll try other paddings in the morning.

I really appreciate your support on this! Especially on weekends (which is when I'm usually working on my game). We can move this to email/pm if you wish

 

Yup probably best to move to email.
support@unikronsoftware.com

 

@unikron for tk2d camera you used projection matrix. is it the same that using scale on an empty parent like ngui uses?

 

No idea. I don't use NGUI that much - I've worked with projects USING NGUI, but I personally don't use it.

 

I'm uncertain whether I should be using tk2DCamera or not, so am first trying to see what I can do without it. Also FWIW I'm using an older version of tk2D for my trial project to determine if/how we'll use Unity.

{As a complete aside, one thing I'm hoping the newer version of tk2D has is the ability to apply a global alpha value to a sprite.}

Anyhow, at this point I've created a "BackgroundSprite" prefab that has a single 1280x800 image in it (yes I know that's wasteful, but this is just a test run). The prefab has a Tk2DSpriteCollection script attached with "Target Height=800" and "Target Ortho Size=1". The Main Camera has "Size=1" and
"Normalized Viewport Rect" is "x,y=0,0" "w,h=1,1".

The image appears to take the entire screen on my iPhone 5 except for some banding on the sides, which is as expected. But on my iPad 3 the top, bottom, left, and right sides are all cut off, so you can only see the middle portion of the background bitmap.

Shouldn't tk2D automatically letter-box on the iPad or utilize the retina resolution like it seems to be doing on the iPhone?

Are you saying I need to detect the device I'm running on at boot time and adjust some variable within each SpriteCollection within one of my Awake() methods? I wasn't 100% clear on your recommendation.

My ultimate goal is having a 1-to-1 or at least computable relationship between touch coordinates and 2D screen coordinates. I need this because my background image is a roulette table with a gazillion little rectangles where chips can be placed, and it's not a regular/uniform grid. Without the easy touch-to-screen conversion I'd have to create a bunch of little collision boxes, but unfortunately the locations of all those boxes shifts around on different screens.

Just for some background, I'm moving from my own 2D OpenGL implementation, which rendered everything to a consistent "asset resolution" off-screen, then stretched the image into whatever viewport was available. This looked slightly distorted on some devices, but it's not nearly as bad as people make it out to be and it provided a very nice consistency for game implementors. It doesn't seem like Unity (or at least tk2D) supports such an architecture, but hopefully there's a way to get the same thing just with some letter boxing.

 

Regarding your question - yes, that is expected. In order to adjust for different aspect ratios, you will need to adjust the ortho size on the camera. You can't make it stretch to fit the screen though, that will require a custom matrix.

But... in your case, using tk2dCamera is almost 100% certainly going to be a win. It adjusts for aspect ratios automatically (add 1 override), 1 world unit = 1 pixel, and you can tell it to stretch to fit the contents into whatever resolution (I think it looks horrible, but you're free to use the feature...). Basically does almost everything you need it to. The only downside (if you can call it that), is that the origin of the tk2dCamera is at the bottom left, making it tricky to zoom in using the camera.

 

I'm not understanding why it works on the iphone 5 but not on the ipad 3, which would help me understand what it is I'm supposed to do to make it work on ipad 3.

Why does it work differently on the iphone 5? Both iphone 5 and ipad 3 have retina displays that are greater than 800 tall, so if it does banding on one it should do banding on the other, right?

I don't understand why on one device (iphone5) it zooms out to fit the entire bitmap on screen, but on the other device it zooms in so that only the center portion of the bitmap is shown. Why should I not expect such consistency?

Thanks for your help patience.

 

The ortho camera knows nothing of screen resolution (which is why we have a tk2dCamera, which does). Ortho camera size = height in world space. Whatever resolution it runs in, it will display the same amount of vertical data. It will NOT squish pixels horizontally, so it will clip/show more data outside the view.

The same thing should happen on iPad - you should see quite a lot clipped from the left right, and the image scaled vertically to fit. If you think this isn't what you're seeing, send me screenshots both in iPhone4 iPad mode and I'll tell you what I think. (support@unikronsoftware.com)

 

I'm trying to use the animationCompleteDelegate function, however it's not working, here is the code I'm using:

Now when I press A key the sprite will contiune playing the hit animation, however it should play the hit animation once and then play walk or idel, but this is not happening.

Please advise.

 

If "hit" is a looped animation, then the animation complete delegate will never be called, as the animation will never "complete" playing. Switch to a single animation and it should work. Is that what is happening?

 

I updated to the latest version of tk2d in the asset store (v1.8) so I could try the tk2dcamera option. Will let you know how it goes.

FYI there was an issue with another Unity Editor add-on that resulted in no "TK2D" menu in the "Create" menu. I believe the other add-on (iTween Editor) had some sort of script problem that prevented it from loading and Unity stopped trying to load anything else at that point?

 

Hello unikronsoftware,

Actaully if i set the Wrap mode to single I can select only 1 sprite so I can't select multiple sprite to make the animation.

However i fixed it by setting the wrap mode to "Once", now it's working just fine.

Thanks for the info.

 

That is unfortunate - Unity stops compiling everything when something breaks. There isn't much you can do about it apart from resolving the issue.

 

Hi,

Sorry about that. I meant to say "Once" not "Sinlge". My bad. Thankfully you've firgured it out

 

Hello.

So I've created a new project using tk2dcamera and created one sprite collection with a single 1280x800 image in it, but am still not able to get the behavior I need. While I can get the camera image in the Unity Editor to show the full 1280x800 image on a pixel-for-pixel basis with the viewport, I get completely different results on actual devices.

For example on an iPad I can see 1024x768 of the full image, but I need to see the entire image. It can be stretched to fit the screen (aspect ratio distortion is not a problem) or it can be letter-boxed, but either way it's not okay to see only part of the image. Does tk2dcamera provide stretching/shrinking or letter-boxing?

Perhaps one possibility is to render to an off-screen tk2dcamera that's 1280x800 and then somehow copy the contents of that camera to the "main" camera manually every frame? Only problem there is I'm not sure how to adjust touch input coordinates.

I can email you my Unity Project if you'd like, but that probably isn't going to help if I'm looking for functionality that isn't there...

 

The functionality is there to do this and a lot more.

What you are seeing is the default behaviour of the tk2dCamera - it will display 1:1 regardless of resolution. In this case, a 1280x800 image will always display 1280x800 pixels - even if it means clipping on one axis, or whatever.

Refer to the docs here:
http://unikronsoftware.com/2dtoolkit/doc/reference/tk2dcamera.html

Basically, what you want to do, is set the native resolution (1280x800)
Now add an override - the default one will scale letterbox to fit whatever resolution it is running on.

There are a lot more options, like adding overrides for different resolutions, etc.

 

Thanks! I tried again and got the stretching to work. Not sure why I couldn't get it working before, but I just didn't have the right combination of numbers in the right places. Between the Unity editor, camera, tk2dcamera, spritecollection, and sprite, there are at least half a dozen places containing screen resolution-like numbers...

Now for the follow-up obvious question: do touch mouse coordinates automatically work?

 

No, you will have to translate the coordinate system.
I tend to prefer using colliders and raycasts - they work irrespective of resolution.

But if you'd like local coordinates (local to the current resolution of the display), use the following snippet.

Code (csharp):

1. Vector3 localPos = cam.transform.worldToLocalMatrix * cam.ScreenToWorldPoint( Input.mousePosition );

It really depends what space you'd like your coordinates in. This is just one option.

 

Great, thanks! I will likely use colliders as well but wanted to explore options.

Does the tk2dcamera -1,-1 override account for the status bar on iOS?

 

No idea about that, never had the need for it. It depends on what screen resolution Unity says its running in.

 

If tk2d is getting the screen resolution from Unity, it's going to be different from the Window/View dimensions on both Android and iOS. This is due to the status bar on iOS and the "home bar" on Honeycomb+ and custom skins like Samsung HTC provide.

 

Surely the Screen.width Screen.height in Unity is adjusted for the status bar when it is visible, eg. returning 960x640 when not visible and something smaller when visible. If that is the case, then everything will work just fine.

 

The reason I don't think that's the case is because when I turn the status bar on off in the build settings it has no effect on display.

So in my aforementioned test app with one 1280x800 bitmap, using (-1,-1) on the tk2dcamera results in it being stretched to fit full-screen on both iPhone and iPad with status bar turned off. When I build with status bar on, the image still stretches to the full screen but the top 40 pixels or so gets covered up by the status bar.

The only possible conclusion one can (ahem) "draw" from this is that whatever Unity function is being queried by tk2dcamera for screen dimensions is returning the physical screen size without regard to the status bar.

 

First thing to do is to confirm what is going on.
Debug.Log(Camera.main.pixelWidth); Debug.Log(Camera.main.pixelHeight);
Debug.Log(Screen.width); Debug.Log(Screen.height);
somewhere in your code and check before and after values.

Once you know how to detect the state and you know what resolution you REALLY are running at, you can "convince" tk2dCamera to behave.

 

Hmm, those debug statements didn't work in my test app because I don't have a "Main" camera. Per the tk2d docs I only have a tk2d camera in the hierarchy. So I used "tk2dCamera.inst.mainCamera" instead -- is that the correct way?

Assuming it is the correct way, the values being returned are the same -- 2048 and 1536 on the iPad 3. Thus my image displays full-screen rather than full-screen minus status bar, so the top few pixels of the image are underneath the status bar.

I'm not sure what you mean by "before" and "after", so perhaps I'm not measuring correctly? I put the debug statements in both the "Awake()" and "Start()" methods attached to my image and got the same values both places.

 

Also, on a completely different thread...

I'm trying to use iTween to fade alpha on sprites but of course there is no "_Color" with the default tk2d renderer. Is there a "correct" way to change the alpha of a tk2d sprite?

Thanks much!

 

By Before and After I meant when the status bar is visible as opposed to when it is invisible. Looks like you have that information anyway - that it doesn't report the changed resolution. What it boils down to is this - if you can work out how much to offset by, it will be trivial to tell tk2dCamera to accommodate this. I haven't spotted this info anywhere in the Unity docs - how are you meant to work out how big the status bar is? (Fair enough its fixed size on iOS, but what about Android?)

 

What you need to modify is sprite.color property.
I don't know how you modify properties in iTween.

Here is a post on how to do it in Hotween:
http://unikronsoftware.com/2dtoolkit/forum/index.php/topic,542.msg2555.html#msg2555

Hope it is of some help.

 

Unfortunately it's not fixed size on iOS either. There are native calls to get the size, but that doesn't sound like fun. One would also need to offset the viewport by that amount. It doesn't seem like something Unity would miss, since Windows apps can be in a Window.

Poking around the Unity docs a bit I didn't see anything that directly mentions this issue, but perhaps the Screen.fullScreen flag does something with this? In any event, I've posted a question on the Unity Answers forum. Hopefully it's a quick, easy answer for someone in the know.

 

i have a prefab of 2dtksprite and an instance of this prefab.instance's collection is ColA, prefab's collection is ColB.

i use sprite.SwitchCollectionAndSprite (colA, id);. it keeps collectionA. i stop playing. instance's collection becomes ColB.

i use platform specific script. so i apply colA while it is still colA. when i apply this script when it is colB it changes collection to colA.

problem is; it backs to the prefab's collection. it should keep instances preferences before playing.

do i do something wrong?

Edit: i do this change in an Editor script. is it related with unity? should i commit something?

 

>> What you need to modify is sprite.color property.
That did the trick, thanks!