Pages

19/04/2017

Reading CSV files in Unity3D


Here’s a little snippet of code for reading text files in Unity using C#.

The read file is displayed on a supplied Text canvas element.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class ReadingCSV: MonoBehaviour
{
   public TextAsset csvFile;
   public Text contentArea;
   private char lineSeparater = '\n';

   private List<string> wordContainer;

   //Read data from CSV file
   // you can alter this to read files that have multiple fields per
   // line using a nested loop and a field deliminator

   private void readData()
   {
     string[] records = csv.text.Split(lineSeparater);
     foreach(string record in records)
     {
        contentArea.text += record + "\t";
        wordContainer.Add(record);
     }
   }
}

Unity3D Screenshot (Take in-game picture)

Here’s a snippet of code for using Unity’s Application.CaptureScreenshot to get in-game screenshots.

The screenshot is taken from the main camera in the screen, so this method may not be suitable when you want a screenshot from another camera’s view. In that case, RenderTexture() and creating a Texture2D is much more flexible. Click here for a good resource on render texture screenshots.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
using UnityEngine;
using System.Collections;

public class Screenshot : MonoBehaviour
{
   public int superSize = 1; //size multiplier (eg 2 is x2 bigger)
   private bool takeHiResShot = false;

   public Camera cam;

   public void TakeHiResShot()
   {
      takeHiResShot = true;
   }

   void LateUpdate()
   {
      takeHiResShot |= Input.GtKeyDown("a");
      if(takeHiResShot)
      {
         Application.CaptureScreenshot("Screenshot.png", superSize);
         takeHiResShot = false;
      }
   }
}

29/03/2017

Resizing the Three.js Canvas

If you are using Three.js (or any canvas) and your game isn’t going to take up the entire browser window, you would most likely want your game canvas and contents to scale uniformly as the browser window changes.

Here’s how you can get started achieving this effect.

1. Define your “native” size

This is the size you want your canvas to be when the browser window is maximized. You would define the size of the scene in your start() or init() method and treat them like constants.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function init()
{
   //create the scene and set the scene size
   scene  = new THREE.Scene();
   WIDTH  = 640;
   HEIGHT = 400;

   //for fullscreen
   /* WIDTH  = window.innerWidth;
      HEIGHT = window.innerHeight; */
}

2. Add an event listener to handle the window being resized


1
window.addEventListener('resize', function(){ ... });

Within the resize method, we need the aspect ratio of our native size as well as the aspect ratio of the browser window. The aspect ratio of the native size can be calculated beforehand (when the native width and height are set), but the aspect ratio of the browser should be updated every time the window changes

1
2
3
4
5
6
7
window.addEventListener('resize', function()
{  
   var aspect = WIDTH/HEIGHT; //native aspect ratio;
   var browserWidth = window.innerWidth;
   var browserHeight = window.innerHeight;
   var browserAspect = browserWidth/browserHeight;
});

3. Compare aspect ratios to prevent distortion

If the browser ratio is larger than the native aspect ratio, it means that the browser window is too wide. If it is smaller, it means that the browser is elongated.
Assign the recalculated values to new variables.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
window.addEventListener('resize', function()
{  
   // ...previous code goes here
   
   if(browserAspect > aspect)
   {
      browserWidth = browserHeight * aspect;
   }
   else if(browserAspect < aspect)
   {
      browserHheight = browserWidth / aspect;
   }

   resizedWidth  = browserWidth;
   resizedHeight = browserHeight;
});

4. Check that the new resized values are not larger than the native sizes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
window.addEventListener('resize', function()
{  
   // ...previous code goes here
   
   if(resizedWidth > WIDTH)
     resizedWidth = WIDTH;

   if(resizedHeight > HEIGHT)
     resizedHeight = HEIGHT;
});

5. Assign the new width and height to the renderer and update the camera aspect and projection.

1
2
3
4
5
6
7
8
window.addEventListener('resize', function()
{  
   // ...previous code goes here
   
   renderer.setSize(resizedWidth, resizedHeight);
   camera.aspect = resizedWidth / resizedHeight;
   camera.updateProjectionMatrix();
});

6. TA-DA!

Now you should have a canvas that resizes uniformly when the browser window changes.

​I hope this was helpful!