Universal assets in Scene Editor

How are we supposed to use the Scene Editor if we want to use universal image assets?


I have my .sks scene frame at 1024 x 768 resolution, because I'm targeting iPad primarily. If I add a SKSpriteNode in the Scene Editor and set it a texture, such as this one from the DemoBots sample project, it'll look fine on any device that conforms to the above resolution, namely iPad non-retina and retina. However, on any other resolution, such as iPad Pro or any iPhone, it doesn't convert to the universal device variant. I'm assuming this is because the sprite frame dimensions are defined in Scene Editor, and even if the image changes with the universal asset, it still gets rendered by the frame assigned in the Scene Editor.


If I add another SKSpriteNode of the same texture in code, it works fine. In the image below, the smaller image is added in code and the larger in Scene Editor:


http://i66.tinypic.com/29gfsj7.jpg


I'm sorta fine with designing element positions so that I only place them somewhat in the right place in Scene Editor and override the positions correctly in code. This allows me to be universal in positioning elements, although it's far from ideal. However, if I can't set the actual images in Scene Editor, it kinda defeats the purpose of using it altogether. Currently it looks like I would only be able to put placeholders of everything in Scene Editor and add all the actual images and positions in code.


Is the Scene Editor designed to completely disregard universal design? Or are we supposed to make separate scenes for each resolution (GameScene-iPad, GameScene-iPadPro, GameScene-iPhone, GameScene-tv, etc.)?

Just to follow up on this, we came up with an okay solution to it. We separated our scene files to -iPad, -iPadPro and -iPhone (with -tv in a separate target) for each scene. So GameScene.swift is connected in code to GameScene-iPad.sks/GameScene-iPadPro.sks/GameScene-iPhone.sks/ by what device family is being used. Then we have to build everything three times, which is not nice. Also, since there are no constraints or auto-layout in Scene Editor, we only put stuff somewhat in the right place in the scene files and change the positions in code upon initiation.


Currently we are handling the image-scaling issue by just having correct frame sizes in each scene file. It might be better to just rescale every element after initiation in code based on the device family, which would mean you only need one scene file, but we haven't really gone that route yet. In some way it's actually kinda nice to see what stuff looks like on each device family.


Any comments would be welcome!

You can use the same sks file for all the platforms.

The key is that the size of a scene can be changed on initialization.


Step 1: initialize your scene

let myScene = SKScene(size: someSize)

Say, you have a sks file that's 1024x768 based, just pick some similar scene size like 1365x768 for all iPhones, then the image size will be fine in it.


Step 2: load up your sks file into a template node:

var template = SKNode(fileNamed: name)


Step 3: move all the stuff in the template node into your scene:

let container = template!.children.first!
container.removeFromParent()
container.position = CGPointMake(myScene.size.width*0.5, myScene.size.height*0.5)
myScene.addChild(container)

This example have a root node called container which contains all the other nodes as its children.


And... there you have it.

In your code example I don't see any scaling of your nodes. When I do the same approach as you I end up with very big nodes on an iPhone 5s of even 4s.

So I'm assuming I would need to do some scaling for that.


Do you have any pointers towards that?

@Taxxodium did you ever figure out if your scaling for 5s and 4s is correct with the above implementation of having a container and template being a child of that container?

Universal assets in Scene Editor
 
 
Q