[Solved][Game] UI messed up on conversion to Unity 5

[Aditya_Malhotra]

Greetings
I finished the Block Breaker Game and I was encountering some problems while building it for the web.
I have both 4th and 5th versions of Unity, I made the entire game in Version 4.7.2f1 and then I made a copy of the project and converted it to Version 5.1.1

Issues encountered:

1. I built the game for Web in Unity 4, but I wasn’t able to test it since my browser was asking me to install the Unity plugin, even though I have it installed. After some research I came to know that Unity plugin is outdated and hence many browsers doesn’t support it anymore, so I decided to convert the project to Unity 5.
2. In Unity 5, as soon as I converted the project, everything was working fine, instead of one scene, which I added by myself in which the player can Choose the level he wishes to play. This scene comes right after the player clicks on ‘Start’ button. Hence this is the key scene in which player can navigate to any level.

Details about the second issue:
The ‘Select Level’ scene was made by nesting many canvases one inside the other, to be honest, I had no idea that it would work, I was just trying things out of curiosity, but it worked fine in the original version. Under one main canvas, there were 8 canvases(One for each level), with one image and one text in each canvas. I was able to use the images as Clickable buttons which would load different levels.
However, the moment I converted to Unity 5 the clickable images are no longer to be seen in the game view or the scene view, only the outside border of canvases and images and texts are visible, nothing inside them and neither are the buttons working.
It’s not a big deal to just re-assign the images to those game objects, but to my surprise, the previous image have actually been assigned already to the objects, but they just refuse to show in any views.
This is where the actual problem is.

Working Scene Screen Shot(Unity 4): http://s1292.photobucket.com/user/Aditya20/media/selectnoerror_zpsqigltx8n.png.html?filters[user]=134174321&filters[recent]=1&sort=1&o=0

Problem Screen Shot(Unity 5): http://photobucket.com/gallery/user/Aditya20/media/cGF0aDovc2VsZWN0ZXJyb3JfenBzNWM1cWR1aGEucG5n/?ref=

Originally made in Version 4.7.2
Problem occured in Version 5.1.1

Original Game in Unity 4: https://gamebucket.io/game/254a103a-183f-47d4-807a-d9b2c61f98ca
(Wasn’t able to test it since the Unity plugin wasn’t working, but it worked fine in the Editor)

If you insist, I can drop the project files here… Thankyou

[Rob]

Hi @Aditya_Malhotra,

From your post it sounds as if the issue is the images on your Choose Level scene not loading the correct level, is that correct?

The screenshots are sadly not a great deal of help, the first does indicate your menu system, but the second, despite having one of the images selected, doesn’t really show any detail in the Inspector which is useful.

On that note, you can actually just paste/upload your images directly into your posts on the forum which makes things a lot easier for people who are trying to help you, the same goes with code - please see the links below.

Regarding your problem, I would suggest looking at the button script component on one of the images that isn’t working correctly. What I would expect you to have (based on the course) is a reference to the LevelManage game object, calling the LoadLevel() method, and then passing in the name of the specific level that the player wants to play as a parameter in the text field, for example “Level_05”. Because this part of the Inspector is not visible in your screenshot I am unable to determine whether you have done this.

Could you check this and perhaps provide a screenshot of just the Inspector with one of the images selected from the Hierarchy. You can of course upload the project, the forum will support uploads up to 10mb, if you project is larger than that then you will need to link to an alternative source, perhaps DropBox or Google Drive etc.

[Aditya_Malhotra]

Thankyou for your reply, sir.

One issue is the button components I added with the images are not working(as you mentioned), the other one is that the image is not even showing up on the scene view or the game view, as you can see here, I double clicked the ‘Image’ object on the hierarchy, it does show me the outlining (White border) on the scene view, but the image is not visible inside either the scene view or in the game view(not even when I click on play button in the editor, the screen shows completely blank, except for the heading), but under the inspector, on the bottom right, the chosen image is displayed clearly. (With each level, I added a simple screenshot image of the game view of that level, the bricks and the paddle, along with the background image). Also I double checked the onClick field of every button and all the buttons work properly in Unity 4.

[Rob]

Could you perhaps share the project with me so that I may take a look properly, it’s a bit challenging from screenshots.

[Aditya_Malhotra]

Here

Faulty project (Already converted to Unity 5) : https://drive.google.com/file/d/0B8_F7m8bcEXMeTFzcUh5eVA0b3M/view?usp=sharing

Original one made with Unity 4: https://drive.google.com/file/d/0B8_F7m8bcEXMUTlpeEV5VldraEE/view?usp=sharing

The problematic scene is titled ‘Select Menu’

[Rob]

Hi,

I didn’t have 5.1.1 installed, but I did have 5.4+ so I opened it with that, appreciating there may be some minor differences.

I opened the scene you mentioned and was presented with this:

The transform for the second image from the top left was a bit out, I think one of them has perhaps had either the body game object or a child game object moved, which then has affected it when it runs, but nothing that isn’t resolvable. They are all getting moved about a bit depending on the screen aspect ratio that is selected anyway.

I ran the game and it worked as you would expect.

There is a Canvas Scaler component which I note mentioned that “non root cancases wont be scaled”… I wonder if perhaps the version of Unity 5 you are using has a minor issue with the multiple canvases?

If it were me I would probably try the following;

• create a new scene “Select Level 2” (not a duplicate, a new scene)
• add one canvas
• with the canvas selected in the Hierarchy, right-click and add a new image
• select the appropriate sprite for the source image property within the Inspector
• add your button component and wire it up with the LevelManager
• test that one scene to see if it looks as you want it to and loads your level

This would remove the complexity of the multiple canvases.

Assuming this works, you could then recreate the structure you desire under the canvas, e.g. an empty game object to act as a parent for both the image and the text. You could then turn it into a prefab for making it a little easier to create the others afterwards.

I would probably leave the rect transform of the parent SelectableLevel prefab at 0,0,0. I would also make sure that the child objects LevelScreenshot and LevelNumber were reset to 0,0,0 initially.

As all of your screenshots are 488x263 I would set this to be the size for the rect transform for the LevelScreenshot object, and the SelectableLevel object - then use the scale properties on the SelectableLevel object to adjust it to the size required. I set it to 0.5 for x,y and this looked reasonable for a quick test.

Then, position the text where you want it to be, just as placeholder text, set the colour and so on.

Make sure all changes are applied to the prefab.

Then update the first instance of the prefab in the Hierarchy to level 1 and move it to the desired location, repeat for the second etc…

Now, if you find that the the levels appear a bit too bit and you want to adjust, you can simply alter the prefab, for example, 0.5 seems a little bit too big now, so I amended the prefab to 0.33 and both level 1 and level 2 changed for me immediately;

I hope the above helps and that you find the prefab suggestion useful.

---

If you are really wanting to keep the multiple canvases, you could try installing a more recently version of Unity 5, as I said I tested it with the oldest I had installed which was 5.4.1f1, and it appears to be relatively ok.

Be aware that there are a few differences from 5.4+, specifically the Unity Web Player is removed and replaced with WebGL for the build options (so you can publish to ShareMyGame.com then too!), also the Particle System is slightly different too, should you be using it.

[Aditya_Malhotra]

Solved! That Prefab suggestion was really useful. And I read through some of the unity forums, I found nothing particular about the multiple canvas problem but I did came across some threads which indicated that there may be something wrong with the UI elements in 5.1.1 .

I just removed the multiple canvases from the scene and instead added some new game objects as the parent objects to make the scene manageable, just as you suggested, didn’t took much time.

Thanks a lot sir!

Just one last question, is the latest version of Unity good enough to make an FPS game, it’s a major project I’ll be working on in future for my college…

[Rob]

Glad to hear you have resolved the issue and yes, absolutely you can make an FPS game using Unity.