Monthly Archives: March 2013

Simple Unity Editor Scripting Example with a PopUp

Sometimes you want to make a bunch of changes in Unity at once. A great feature of Unity is that you can easily extend the Editor itself by a script.

The following simple example adds a new editor window with a popup. When one or more Transforms are selected you can apply the Z-values of these Transforms to a few predefined values from the popup at once.

Custom Unity Editor Window

Custom Unity Editor Window

Instructions:

  • if you don’t have a folder ‘Editor’ in Unity’s Assets folder create one
    (it must be called ‘Editor’!)
  • place the following script into this folder
  • it’s important to note that the name of the .cs must be the same as the class name (here MyEditorWindow), otherwise you will see the following error:
    NullReferenceException: Object reference not set to an instance of an object
    when calling GetWindow()
using UnityEditor;
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.IO;

class MyEditorWindow : EditorWindow
{
     private string[] options = new string[] {"0.1", "0.2", "0.3"};
     private int index = 0;

    [MenuItem ("Examples/ApplyZ")]

    static void Init ()
    {
        MyEditorWindow window = (MyEditorWindow)EditorWindow.GetWindow (typeof (MyEditorWindow));
    }

    void OnGUI()
    {
        index = EditorGUILayout.Popup(index, options);
        if(GUILayout.Button("Apply"))
            Apply();
     }

     void Apply()
     {
        float newZ = float.Parse(options[index]);

        if(Selection.transforms.Length == 0)
            EditorUtility.DisplayDialog("No Selected Transforms", "To use ApplyZ you have to select one or more Transform", "Ok");

        foreach (Transform oneTrans in Selection.transforms) {
            Vector3 pos = oneTrans.position;
            oneTrans.position = new Vector3(pos.x, pos.y, newZ);
        }
     }
}

Distributing HTML5 videos with the Amazon CloudFront CDN – Part III

In part 1 of the blog post we set up an Amazon S3 and CloudFront account for hosting of our videos. Then we discussed how to embed these videos into a HTML page in part 2. Finally we are talking about why an alternative video format should be added and how to implement a Flash fallback for old browsers.

Not every browser is supporting videos encoded in MP4. Firefox and Google Chrome are popular browsers that are supporting HTML5 video, but the video must be encoded in the WebM (VP8).

To support both formats one can write:

<video width="640" height="360" controls poster="poster.jpg">
 <source src="myMovie.mp4" type="video/mp4">
 <source src="myMovie.webm" type="video/webm">
</video>

How to create a WebM encoded video?

If you have a MP4 file you can use different tools to create a WebM variant.

One such tools is Firefogg. Start Firefox and goto http://firefogg.org/make/ . Click on
“Install Firefogg” if the extension is not already installed.

Install Firefogg

Install Firefogg

Wenn you go to  http://firefogg.org/make/ again there is a simple wizard, that let you generate the WebM video.

Make Web Video

Make Web Video

You have several options, e.g. you can choose 720p format or open the advanced options dialog.

After clicking on ‘encode’ the encoding process takes place. Depending on the size of the MP4 file and the applied settings this can take some minutes.

After the conversion the file is available in the WebM format.

Recommendations
– first export a MP4 with really high quality from your screencast tool (big file size)
– use this MP4 as input for Firefogg
– try some settings until there is a good balance between quality and file size
– re-export the MP4 file with a reasonable file size (lower quality) and use this on your site
– now you have two good quality movies that can be embedded into your HTML

Support of Old Browsers

There are still a surprisingly high amount of people using old browsers that are not supporting HTML5, e.g. Internet Explorer 8.

Therefore an additional fall back to Flash is recommended.

Since Flash support MP4 there is no additional transcoding process necessary.

After some searching I found a Flash player without frills here: http://code.google.com/p/flashfox/ .

Using this player the code looks like:

<video width="640" height="360" controls poster="poster.jpg">
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <object type="application/x-shockwave-flash" 
          data="flashfox.swf" 
          width="640" height="360">
    <param name="movie" 
           value="flashfox.swf" />
    <param name="allowFullScreen" 
           value="true" />
    <param name="wmode" 
           value="transparent" />
    <param name="flashVars" 
           value="controls=true&amp;poster=poster.jpg&amp;src=myMovie.mp4" />
   <img alt="MyTitle" src="poster.jpg" width="640" height="360" 
        title="Upps, no video playback capabilities??" />
  </object>
</video>

Please note: the flashVars parameter must be URL encoded, so instead of using : and / one has to write %3A and %2F.

Finally here a screenshot of this Flash player on Internet Explorer 8 (showing: http://www.mombari.com/ ) :

Using Flashfox as Flash Player

Using Flashfox as Flash Player

If there is an error when testing the video in Firefox then most probably you need to adjust the meta-data for your video file. How to accomplish this in the Amazon’s AWS console is described in part 1 of the blog post.

Wish List

Great would be a screencast tool that would support this process by a simple button click. And it would be a dream if it would also support uploading the movie to Amazon’s servers automatically 🙂

Distributing HTML5 videos with the Amazon CloudFront CDN – Part II

In part 1 of the blog post we set up an Amazon S3 and CloudFront account for hosting of our videos. In this part we discuss how to embed these videos into a HTML page.

Simple Embedding of Screencasts in HTML5

One fundamentally useful tool in sharing how-to-dos is a screencast. In earlier years I used to save it as Flash directly from the screencast tool. Today I want to use the HTML5 video tag, because it’s supported natively by all modern browsers and on mobile devices.

Referencing the video movie in HTML seems easy and self-explanatory:

<video width="640" height="360" controls poster="http://vdemo2.software7.com/poster.jpg">
    <source src="http://vdemo2.software7.com/Test.mp4" type="video/mp4">
</video>

A few things should be noted:

  • we are using links to the CloudFront service that we set up in the previous blog post (vdemo2.software7.com is mapped via a DNS CNAME entry to Amazon’s CloudFront)
  • not all HTML5 browsers can play MP4 video, most notably Mozilla Firefox
  • people are still using old browsers without HTML5 capabilities

In Part 3 of the blog post, we will introduce the alternative WebM format for web browsers that do not support MP4, as well as present a simple Flash fallback for very old browsers.

Randomly Seeking

Particularly at longer screencasts it is important that the viewer can seek anywhere as desired regardless of how much of the movie was already downloaded.

There are quite a bit bogus or misleading information, stating that this is not possible with HTML5 video, as real streaming is not supported.

But randomly seeking is supported in HTML5 video without the need for a special player or a special streaming server by a technique known as pseudo-streaming.

How does that work?

By using a HTTP proxy tool we can demystify it:

HTTP Byte-Range Request

HTTP Byte-Range Request

– if the user seeks then the HTML5 browser requests only a part of the movie via a HTTP/1.1 byte-range request
– then the HTTP server returns only the requested amount of data

So what are the requirements for this to work? Obviously on the server side you need a HTTP 1.1 server. On the client side a plain HTML5 browser is sufficient.

Now it should be clear why in part 1 of the blog post, the Download distribution method was chosen.

In order to embed videos for use in the full range of currently used browsers, you must encode your video in an additional format (WEBM). To support old browsers there is still a Flash fallback needed. These will be covered in the next part of the blog post.