Category Archives: Project

manual_override

Project Update 05: The Subzone (Bypasses and Solutions)

After some more digging around the Unity Answers forums, I chanced upon Eric Haines’s Javascript solution to animate still images in Unity. This method would allow me to bypass creating GIFs in Photoshop altogether as I could just directly dump my screenshots into Unity.  All I would have to do is to attach the Javascript to a game object I want to affect, specify the frames per second of the animation, and input in the individual still frames for the frame array. Since I would be working with lots of screenshots as input material, saving that extra few keystrokes from using Photoshop is a plus. On the other side however, I have to be extra mindful about just how many images I end up importing into the Unity system (i.e. increasing filesizes = increasing loadtimes on the webplayer for the user).

texture_gif
Screenshot from the Unity Answers page.

Another problem I was facing was trying to integrate all of the elements (Unity player, Tumblr gallery for user submissions) into one Tumblr page. Sometimes the theme for the Tumblr site would cause problems with integration, and I would have to search for another compatible one to see if it would work. In the end, I settled for the option to separate the user submission gallery and the Unity webplayer into their own separate Tumblr blog sites.

Here is an updated flowchart to better illustrate my current setup.

flowchart_02

I have spruced up the main landing page of the first Tumblr blog, thanks to some helpful html coding tips from hostingkingdom. I tried to get rid of unnecessary clutter on the site so that users can easily get to the instructions and follow them without much trouble.

Here are the current versions of the landing pages for the two Tumblr blog sites.

welcome_page
welcometothesubzone.tumblr.com

After users click on “Participate!” and click on the link at the bottom of the new page, they will be directed to the second Tumblr blog to submit their material. Once users fill in the details and hit “Submit”, they will then land on the main homepage where they will be greeted by all the user submissions to the site so far arranged in a grid layout for easy reference.

welcome_02
The submission page on thesubzone.tumblr.com
welcome_03
Homepage of thesubzone.tumblr.com

I will continue working with this setup and will stick to it, unless I find a better solution.

I have also added in a separate webpage tab on this OSS site called “Welcome to the Subzone” which should be appearing near the top left of this page. Project details and links have been added in the tab to direct viewers to the site in the event that they land here first.

Hopefully Tumblr doesn’t fall apart till then.

tumblr_no
Maybe this was during one of those maintenance periods in the day.

I also discovered later on in the process (when creating executable files of the Subzone for users to download) that the Windows executable file gets wrongly flagged by Chrome as being malware when someone downloads it. Also, those running OS X Mavericks will need to adjust their security settings to “anywhere” in order to run the downloaded app. I decided to include these important information right at the bottom of the main Tumblr site near the download links so that they will be seen and read by users.

malware
Screenshot of the malware warning in Chrome

Here is an update of how The Subzone looks like. After clicking on the Mac app I created and choosing the settings (screen resolution and graphics quality), the Unity splash screen loads before the user is transported to The Subzone.

subzone_config
Screenshot of the config dialog box.

spelunking

Project Update 04: The Subzone (Spelunking with Glitches)

I took some time to see how else I could fiddle around with Unity. Eugene Soh’s GALLERY.SG initiative was looking for beta-testers, and since it also ran on the Unity engine but had simple characters and textures loaded for an alpha level, I joined the server and started to play around. I discovered an interesting phenomenon, whereby logging in two machines to connect to the same server leaves a shell of the first user stuck in the skybox area of the map. What I realised only later after conversing with Eugene was that he couldn’t see the first avatar at all, and all he saw was me in my second avatar standing on nothing. I found this interesting and also a little funny, so I recorded myself in Eugene’s gallery.

I then decided to document unintended glitches happening while I went about my daily routine. While the main idea is to only limit my “glitching of textures” to only Facebook screenshots, documenting these glitches which occured naturally outside of where I was looking seemed to be more attractive. In any case, these would help me to be more picky about the kinds of glitch aesthetics to employ in the Unity space.

The following video below documents a glitch on Facebook, after scrolling to the bottom refused to load more posts for reasons unknown.

A glitch on YouTube which occured while uploading a gameplay video I recorded. The progress bar kept fluctuating with it’s numbers, which only served to frustrate me further as the upload seemed like it would never finish (but it did finish, eventually…)

A glitch from something I broke while using Quartz Composer. I think I plugged in something that I shouldn’t be plugging in. The weird effect continued to play in fullscreen, but the weird thing was it only showed up as a static image in the recording below.

A quick check on my Tumblr site hosting the Unity webplayer showed that everything is still in working order. As of right now, I can begin the process of updating the assets and the environments textures.

Here are some shots from the Tumblr site with added navigation text at the top.

tum_01
Screenshot from the main page, with the header and accompanying text.
tum_02
Screenshot from the “What is this?” section of the site.
tum_03
Screenshot from the “Participate!” section of the site.
tum_04
Screenshot from the “Ask me anything” section of the site.

At the moment, I am still trying to figure out if it is possible to add a page on the Tumblr site and use it to host the incoming submissions. If that doesn’t work out, I might have to link the submission to another site and link it via a hyperlink. Also, Tumblr seems to act a little funky sometimes, which explains why the “Click here to submit” hyperlink on my site is not…hyperlinked…at the moment.

okay
How I’d probably look like when things don’t work

For now, more testing  on-going.

maya_screen

Project Update 03: The Subzone (Testing Animations)

I found myself growing interested in creating an ecosystem of sorts in the Subzone. The errors, glitches and maybe even the textures could have a life of their own. I came across the following video where apparently the movements of  “creatures” were not predetermined (i.e. they moved based on algorithms). The way they kept bumping into each other and the little accidents happening among them was something that fascinated me a lot. Once I have locked down the rest of the environment in place in the virtual space, I could probably attempt to create looped animations of blocks of error codes which literally move through space and interact with the viewer.

I have started creating a YouTube playlist dedicated to Unity and started collecting tutorials and workarounds. Having a playlist curated will come in handy when I need to refer back to a particular video or process for reference.

youtube_01
Screenshot of my YouTube playlist in progress

The following below are some examples of animation work done in Maya, which will be exported to Unity as .fbx files. One thing I discovered a bit later on was that Unity does not support vertice animation, and I will be keeping this in mind while continuing the work on the project.

anim_01 maya_anim02

Screen shot 2014-03-18 at PM 07.14.53

Project Update 02: The Subzone (Simple Test)

I have been trawling through online forums to find a working embed code which will allow me to put up a test demo Unity scene within a blogpost on Tumblr. I had considered perhaps shortening the Dropbox url using goo.gl or bit.ly and putting that link out as a main landing page. But the downside is, that it would just land the user on a blank white page with the scene loading in the middle. It would be a waste of screen space as only the Unity scene would be there and nothing else. By having it on a site like Tumblr, I could place hyperlinks and buttons at the side to draw the viewer in to check out more details about what they were interacting with.

I landed upon the Tumblr blog of Josh.C Futureworks and he had prepared and publicly shared some javascript code which would help one to embed Unity 3D scenes into a Tumblr post.

Screen shot 2014-03-18 at PM 07.04.41Screen shot 2014-03-18 at PM 07.06.02The two lines of code highlighted in blue were the ones I had to change to redirect to my files on Dropbox. At first, I made the mistake of not uploading the game files to the “Public” folder on Dropbox which caused the Unity scene to not load. I had mistakenly assumed that having the url would be enough. After correcting this and putting them in the proper folder and trying again, I was able to load up the scene on Tumblr.

 

Screen shot 2014-03-09 at PM 06.50.14
Screenshot from my Dropbox folder
Screen shot 2014-03-18 at PM 07.14.53
Screenshot from my Tumblr post
Screen shot 2014-03-18 at PM 07.31.35
Screenshot from my Tumblr site after first landing
Screen shot 2014-03-18 at PM 07.33.13
Screenshot from my Tumblr site after allowing Unity plugin to run
webplayer

I already had the Unity webplayer plugin installed on my computer, so I did not experience any problems so far. I will need to include some form of auto-prompt or a link for users who do not have the plugin so that they can just download it from the site without leaving it. Also, I will need to include some pages on the Tumblr site to separate all the different sections (e.g. What? Why? etc). I could perhaps also include a link back to my project links and hyperessay work done here as an extension for viewers to find out more.

I plan to include a section on the tumblr site dedicated to video documentations and maybe even simple GIF animations to record all my experiments in Unity.

unity03A

Project Update 01: The Subzone (Phase 01- Construction 101)

I have been busy exploring Unity 3D over the past week. Coming from a background in being more well-versed in Maya, the user interface and the controls in Unity were quite easy to get used to. The clean user layout allowed me to clearly navigate my way through getting used to working in Unity. I was also pleasantly surprised to know that Unity handles imported animations and models from Maya via the .fbx format. This got me thinking about possibly creating small animation tests and using them in Unity later on to test out animation triggers when users interact in this virtual space.

The Unity startup screen
The Unity startup screen

I had always wanted to tinker around with making games, and learning how to use Unity and it’s tools has been a pretty enjoyable experience so far. The wealth of tutorials and training archives on the Unity website proved to be immensely helpful as I found myself going through each of them to get a better understanding of the program I was working with. If there was one thing I wished I knew how to do, it’d be coding. I hung out around one of the livestreams on Twitch to catch Mike Geig conducting his free live training classes.

Screen shot 2014-03-09 at PM 06.56.21

Another plus I discovered was that I could essentially export a test scene from Unity and use an online file storage site like Dropbox to host the game files. This means that I could just embed the url link in a blogpost or anywhere on the Internet, and users will be taken directly to the game when they click on it. With Unity, one thing that needs to be noted in that users will need to download and install the Unity webplayer plugin in order to use the interactive space.

To test this out, I created a simple setup scene in Unity where the textures of the virtual objects are screenshots of websites. In this example, I used a screenshot of my Facebook news feed as a shared texture, so all of the objects in the scene are covered by the same texture to give a sense of disorientation in this subspace. The user can navigate around the space with the WASD keys, spacebar to jump and move the mouse to look around.

unity01unity02unity03unity04Screen shot 2014-03-10 at AM 03.15.52Screen shot 2014-03-10 at AM 03.16.00Screen shot 2014-03-10 at AM 03.17.27Screen shot 2014-03-10 at AM 03.18.34

Video documentation