2D Toolkit Forum
2D Toolkit => Support => Topic started by: blazingriver on July 19, 2014, 03:11:12 pm
-
Hi,
I am fairly new to unity and especially new to the 2D toolkit so please forgive any of my mistakes. Also, I am sorry if this topic has been discussed to death (which I am sure it has), but I am having difficulty comprehending the instructions on resolutions and screen sizes given within the 2D toolkit's documentation. I know screen sizes and resolutions are two separate issue, which have to both be undertaken separately. Could someone give me a simple step by step guide on how to make a 2D iOS (the platform that I am targeting) game have a resolution compatible with all the different generations of iOS devices and platforms (e.g. iPhone/iPad/(mini)) and how to make the screen size adapt to the different devices (e.g. iPhone 5s and 3gs). I am familiar with the overrides discussed within the documentation but I am unsure how to specifically apply it to the resolutions. A step by step guide on both the resolution and screen size compatibility (to make it a universal app) would really be helpful since I am generally unsure about both topics.
Also, would I use the lower resolution of the 3gs or the higher resolution of the 5s or the resolution of the iPad as the native resolution?
Thanks in advance! (and sorry if anything I have mentioned is obvious, since as I mentioned, I am new to Unity so please forgive me :) )
-
Start with 3gs resolution artwork. Add a tk2d camera with 1 wildcard override set to fit visible. It should work on all your platforms. Try the different things there on different device resolutions to figure out how they work. It should be pretty straightforward to understand when you see it working.
-
I kind of get it now, thanks! However, I am still unsure on exactly how overrides work and how you use them. I read the documentation, but I am still unsure on how to apply the overrides. Does there happen to be any mobile 2D toolkit demos that have been developed so that they are compatible with all iOS device sizes and resolutions which I could look at or any (video) tutorials which investigate mobile compatibility of ratios and resolutions (such as the whack a mole tutorial but for mobile devices).
Thanks!
-
There are no demos for this, everyones needs are different. You should really just try this with some images, all you need to do is switch the game window resolution to preview what it will look like on each device. Once you get the hang of what its doing with one override, switch the overrides to see what results you can get. Start with 1 tk2dcamera, with 1 wildcard override, set to fit visible.
-
Thanks for your reply! I have a few more questions (sorry!) First of all, is it possible to detect the platform the game is loading on so I can use this script as mentioned in the documentation "tk2dSystem.CurrentPlatform = "2x";" and its 4x and 1x iterations depending on the platform that is being used (could this be done through the override system?).
With the normal wildcard override (regarding the different screen sizes and aspect ratios), the background looked fine (non-streched) on all platforms other than iPhone 5 wide (16:9) and iPad wide (4:3) where it stretched. I tried to fix this by using another override (screenshot attached) but it didn't make a difference and it still uses the wildcard (it doesn't detect the aspect ratio). I know that I am doing something wrong but I can't figure out exactly what. Additionally on the iPad wide (1024x768) the background is letter boxed. How would you recommend to overcome both the stretching and letter boxing. Currently for the letter boxing I am using the fill override when it detects the 1024x768 resolution (but then some of the image is cut out since the background is enlarged to fill so I am open to other suggestions). Is it possible to provide and use separate background sprites depending on the detected aspect ratio so that there is no clipping on the iPhone 5 and iPad and so the background is designed to specifically fit that device? Also, what exactly do you mean by switch overrides (do you mean change the scale mode?).
Thanks once again! :)
-
You will need to detect the platform, etc using Unity functions. There are many different ways of doing this, eg. detecting screen size, detecting device by name, etc. Check the unity forums / answers for more details on what you can do to detect this. The override system is specific to the camera, and doesn't tie in with the platform switching at all - the 2 systems are independent to one another.
If you switch to the General tab, it'll tell you that the tk2dcamera can't detect the resolution. In the game window, you should use a fixed resolution rather than an aspect ratios, or simply choose the resolution to simulate in Presets.
By switching overrides I mean change the scale modes mainly. The offset isn't really going to affect the result as much.
-
When you say that the tk2dcamera can't detect the resolution, does that mean that you cannot use the resolution option under the "Match By" drop down to target specific screen resolutions? And if so does that mean the wildcard option is the only override choice? Under the general tab I don't get any warnings telling me that the tk2d camera can't detect the resolution.
Also is it possible to use custom, specific sprite collections (designed for specific device) depending on the devices resolution, to prevent letter boxing on devices with different aspect ratios (iPhone 5+ and iPads)? (That is, if the tk2d camera can detect resolutions?)
Thanks
-
About detecting the resolution - your game window screenshot shows you've set the size to iPhone 5 Wide (16:9). This is what we can't detect. Set the resolution to a fixed number, and everything will work a lot better.
The sprite collection switching only supports 1x, 2x and 4x sizes.
-
There is one more question that I have about overrides. With the resolution system included in the toolkit is it possible to reposition the various different elements of the scene (e.g. the GUI and possibly sprites) so that they move to the corner or closer to the side of the screen etc?
-
You can use tk2d Camera anchors to do that.
-
I just had another thought, could you not load the game with all the different sprite backgrounds specifically designed for each of the targeted platforms (e.g. one designed for the iPhone 5, iPhone 3gs/4/s, iPad) and then detect the device's platform and hide all the other sprites/backgrounds leaving only the respective background for that device showing? It may not take full advantage of tk2d's resolution and override features but do you think that it could be a potential effective strategy?
-
If you do that in Unity, you'll have the memory overhead of every single one of them. One way to do it is to load the correct background at runtime using Resources.Load to load the correct prefab.
-
Do you know if such a thing could be done with playmaker using their actions instead of through scripting, since I am relatively new to coding?
-
Sorry, I don't know enough about playmaker to tell you that. Maybe someone else will be able to help you - it might be worth asking on their forums as well.
-
Thanks for all your help so far!
I found this script:
using UnityEngine;
using System.Collections;
public class Main : MonoBehaviour
{
void Awake()
{
Application.targetFrameRate = 60;
if(Screen.width > 1136) {
tk2dSystem.CurrentPlatform = "4x";
}
else if( Screen.width > 480 ) {
tk2dSystem.CurrentPlatform = "2x";
}
else {
tk2dSystem.CurrentPlatform = "1x";
}
Debug.Log("CURRENT PLATFORM (main) : " + tk2dSystem.CurrentPlatform );
Debug.Log("Device data:");
Debug.Log("Screen resolution: " + Screen.width + " x " + Screen.height );
Application.LoadLevel("Game");
}
}
Source: https://gist.github.com/AdamDrobotij/10770946#file-2dtoolkit-main
Would you say that this would work to help set and apply the 1x, 2x and 4x textures? I wouldn't know since I am not familiar with programming, but does it look alright to you? Would I simply make an Init game object and give it this script and would it work? (if i change the Application.LoadLevel scene to my own scene).
Nevermind, I just realised it does work! I just made a little mistake while adjusting it.
-
Yeah looks like it will do it. You'll probably need to change Screen.width depending on your needs but it should work.
-
Also, each time I commit a sprite collection I get a pair of errors (attached). They occur on every 2D Toolkit project I have made. Is it a known bug and will it affect my game in anyway?
I also had a shot at coding (it was bound to happen eventually) derived from the code that I found to identify the device through its width.
There is an issue with the <GameObject> part and I get an error saying:
Assets/Scripts/LoadCustomBackground.cs(11,40): error CS1525: Unexpected symbol `<', expecting `identifier'
I am trying to load the prefab sprites that I made for each background. How would I correct this error and are there any other improvements that you would make to the code?
Also, I guess with this code I would have to run it on every scene/level. Do you have any suggestions on how to make it run on the init scene simultaneously with the init script that I posted earlier, so that it would detect what device (and therefore what background sprite prefab to load) in the init scene and would automatically load the respective background for each scene/level automatically? Thanks.
-
Looks like a Unity bug. I don't remember seeing it, but it shouldn't affect your game in any way.
-
Looks like I edited my last post at the same time you posted your reply! :P Would you be able to have a look at the script I made to help reduce the memory overhead that you mentioned earlier and look at the questions I had about it?
Thanks
-
It should be Resources.Load<GameObject>
not Resources.Load.<GameObject>
-
Thanks, but now i get another error saying that unityengine.screen.width cannot be assigned to (it is read only)? And do you have any advice on automatically loading the right background without running this script in every scene?
-
= should be ==
in Screen.width =
You only need to do this once, this setting is permanent.
-
Ok, I have corrected the custom background script but I can't figure out how I would get it work or how I use it (despite the fact that I wrote some of it!) So I add the script along with the init resolutions script into an empty game object in a initialiser scene. I have the background sprite prefabs in the resource folder. The init scene instantly automatically loads to the first game scene and I should of already loaded the right prefab using the background script. However, how do I get the background sprite to appear? Essentially I am asking how I would get it to work :P I assume the script works fine, but am I missing something out, such as an additional script? Would it be possible if you could walk me through getting the script set up?
Thanks again! :)
-
What is in your bg script right now?
-
The same as before (with the corrections):
using UnityEngine;
using System.Collections;
public class LoadCustomBackground : MonoBehaviour
{
void Awake()
{
Application.targetFrameRate = 60;
if(Screen.width == 480) {
Resources.Load<GameObject>("Background_iPhone");
}
else if(Screen.width == 960) {
Resources.Load<GameObject>("Background_iPhone_4");
}
else if(Screen.width == 1024) {
Resources.Load<GameObject>("Background_iPad");
}
else if(Screen.width == 1136) {
Resources.Load<GameObject>("Background_iPhone_5");
}
else if(Screen.width == 2048) {
Resources.Load<GameObject>("Background_iPad_Retina");
}
Debug.Log("Device data:");
Debug.Log("Screen resolution: " + Screen.width + " x " + Screen.height );
}
}
And I am also getting this error (on an unrelated topic to the script that I posted above):
NullReferenceException: (null)
UnityEditor.SerializedObject..ctor (UnityEngine.Object[] objs)
UnityEditor.Editor.GetSerializedObjectInternal ()
UnityEditor.Editor.get_serializedObject ()
UnityEditor.MaterialEditor.OnEnable ()
It doesn't seem to have any effect on the editor, but I only get it when I use sprite collections.
-
You need to instantiate after Resources.Load...
Instantiate(Resources.Load...)
-
Another question, is there a way to make it so that a sprite automatically scale their size, so that they look the same size on any device irrespective of their pixel density. What I mean is if you have a sprite (with 1x,2x and 4x iterations), which is a logo on a splash screen, if you load this on a iPhone 3gs, 4, 5, iPad and iPad Retina, the logo would have different sizes in their real life appearance (i.e. when you use it/ how it appears on their device). Is there anyway to overcome this?
Thanks
-
1. The 1x, 2x and 4x sprites are all the same physical size.
2. The camera changes what you can see depending on resolution / override.
You can either scale the sprite to be the same size on screen on all devices, or change the camera override to fit vertical, or something like that.
-
Thanks for your reply. From what I can see in the game view that seems to work. However, I will check it on my device later to confirm it. However, now with the override it scales the background up along with the sprite. Is there anyway to make the background exempt from the override since I am using custom device backgrounds instead?
-
Use a different camera for the background, thats the easiest way to go about this. Otherwise you'll have to perform the opposite transformation the camera does to get the background to scale to fit.
-
How would you accomplish this? Would you create a background layer, which the backgrounds are assigned to, and on the original tk2d camera with the override would you deselect the background layer on the culling mask option and then create a new tk2d camera without an override with only the background layer selected on the culling mask option?
Also, what exactly does the pixels per meter option mean and do? My option is set by default to 100, is this something that I would ever really need to change? And if so when would I need to change it?
Thanks
-
Yes, thats how you'd assign 2 cameras.
pixels per meter is some way to tell the system how big your sprites are going to be. You dont need to change it unless you need to for some specific reason, eg. if you need your sprites to be a particular size in 3d space to fit in with other models.
-
I tried this and the single colour background from the original tk2d camera is displayed and the custom backgrounds aren't. I have set it up the same way which I posted earlier, with the layer (next to the tag option in the inspector) of the background prefabs set to the background layer and with the 2nd tk2d camera having only the background layer selected in the culling mask and with the initial camera with the background layer deselected. Yet, the background fails to show and the white background from the initial camera is displayed instead. I have tried the inverse (background culling mask only selected on initial camera, background mask deselected on 2nd camera), this time the sprites didn't appear. What have I done wrong? Have I set up the 2nd camera in the wrong way?
-
Screenshots, please? I'm not 100% sure what you've ticked and what you havent
-
Hi, the screenshots are of the two camera setups and the result. Hopefully they will be sufficient in determining the problem in my setup. I got an error when i tried to upload the attachments. You can find them here (http://qwertyfish.imgur.com/all/) instead.
Thanks.
-
Both your cameras are clearing the background, and draw order isn't defined.
Set depth to 0 for the bg camera, 1 for the fg camera.
Set Clear flags on the foreground camera to none so it doesn't clear what that bg camera draws.