{"id":1102,"date":"2015-01-09T13:57:27","date_gmt":"2015-01-09T13:57:27","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1102"},"modified":"2015-08-16T19:53:25","modified_gmt":"2015-08-16T19:53:25","slug":"unity3d-scene-changing","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/unity3d-scene-changing\/","title":{"rendered":"Unity3D scene changing with fade effect"},"content":{"rendered":"

Followed this<\/a> official tutorial, my own version on\u00a0GitHub<\/a>, and you can\u00a0see it in action here<\/a>\u00a0(click the cube to see the effect).<\/p>\n

\"LevelChangeWithFading.\"<\/a><\/p>\n

Steps on how to make this:<\/p>\n

    \n
  1. Create a new 3D project<\/li>\n
  2. Save the scene as Level0<\/em><\/li>\n
  3. Create -> 3D object -> Cube<\/li>\n
  4. Create -> Light -> Directional light<\/li>\n
  5. Save this scene and create a new one Level2<\/em> and repeat the process just here create two cubes<\/li>\n
  6. Create an empty object called FaderObj<\/strong>\u00a0and attach a new script to it called Fading<\/strong>:\n
    #pragma strict\r\n\r\npublic var fadeOutTexture : Texture2D;\t\/\/ the texture that will overlay the screen. This can be a black image or a loading graphic\r\npublic var fadeSpeed : float = 0.8f;\t\t\/\/ the fading speed\r\nprivate var drawDepth : int = -1000;\t\t\/\/ the texture's order in the draw hierarchy: a low number means it renders on top\r\nprivate var alpha : float = 1.0f;\t\t\t\/\/ the texture's alpha value between 0 and 1\r\nprivate var fadeDir : int = -1;\t\t\t\/\/ the direction to fade: in = -1 or out = 1\r\n\r\n\r\nfunction OnGUI()\r\n{\r\n\t\/\/ fade out\/in the alpha value using a direction, a speed and Time.deltaTime to convert the operation to seconds\r\n\talpha += fadeDir * fadeSpeed * Time.deltaTime;\r\n\t\/\/ force (clamp) the number to be between 0 and 1 because GUI.color uses Alpha values between 0 and 1\r\n\talpha = Mathf.Clamp01(alpha);\r\n\t\r\n\t\/\/ set color of our GUI (in this case our texture). All color values remain the same & the Alpha is set to the alpha variable\r\n\tGUI.color = new Color (GUI.color.r, GUI.color.g, GUI.color.b, alpha);\r\n\tGUI.depth = drawDepth;\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\/\/ make the black texture render on top (drawn last)\r\n\tGUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), fadeOutTexture);\t\t\/\/ draw the texture to fit the entire screen area\r\n}\r\n\r\n\/\/ sets fadeDir to the direction parameter making the scene fade in if -1 and out if 1\r\npublic function BeginFade (direction : int)\r\n{\r\n\tfadeDir = direction;\r\n\treturn (fadeSpeed);\r\n}\r\n\r\n\/\/ OnLevelWasLoaded is called when a level is loaded. It takes loaded level index (int) as a parameter so you can limit the fade in to certain scenes.\r\nfunction OnLevelWasLoaded()\r\n{\r\n\t\/\/alpha = 1;\t\t\/\/ use this if the alpha is not set to 1 by default\r\n\tBeginFade(-1);\t\t\/\/ call the fade in function\r\n}<\/pre>\n<\/li>\n
  7. Add the following script to the Cube object:\n
    #pragma strict\r\n\r\nvar counter = 0;\r\nfunction Start () {\r\n\r\n}\r\n\r\nfunction Update () {\r\n\r\n}\r\n\r\nfunction OnMouseDown(){\r\n\tDebug.Log(\"clicked \" + counter++);\r\n\tvar fadeTime = GameObject.Find (\"FaderObj\").GetComponent(FadingJS).BeginFade(1);\t\t\r\n\t\r\n\tyield WaitForSeconds(fadeTime);\t\r\n\t\r\n\tGameObject.Find(\"Cube\").renderer.enabled = false;\r\n\t\r\n\tfadeTime = GameObject.Find (\"FaderObj\").GetComponent(FadingJS).BeginFade(-1);\r\n\t\r\n\tyield WaitForSeconds(fadeTime);\t\r\n\t\r\n\tApplication.LoadLevel(Application.loadedLevel + 1);\t\r\n}<\/pre>\n<\/li>\n
  8. Drag a 2×2 black png image to the Texture variable in the Fading script.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Followed this official tutorial, my own version on\u00a0GitHub, and you can\u00a0see it in action here\u00a0(click the cube to see the effect). Steps on how to make this: Create…<\/p>\n","protected":false},"author":1,"featured_media":1104,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,41],"tags":[],"class_list":["post-1102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-unity3d"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1102\/revisions"}],"predecessor-version":[{"id":1107,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1102\/revisions\/1107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/1104"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}