Click Me

Background

After a long, day job induced, hiatus from Unity 3D, I wanted to put my first unity project to bed before moving onto my next project (a facebook unity integration). After much clean up and fuss it stabilized and has bee posted to it’s own web page. I wanted the game to look clean, which meant I wanted the following:

• The player’s score should be displayed in the web page, not within the unity client
• Starting a new game should be done from buttons on the web page
• Controlling the “view” (rotation & zoom)

So this meant that I needed to post data from Unity to the web page, and call functions within unity from the web page.

Putting out

The first thing to do was figure out how to get player’s score to be displayed on the web page itself. This turned out to be fairly simple. You need 2 basic things

• A function defined in the web page for Unity to call
• use the “Application.ExternalCall” function from within your unity projects

Well, you also need to know how to change text in a web page, which it turns out to be pretty simple.

Changing IDentities

Some fantasy series I once read used a plot device whereby if you knew a things name you could control it. Well, in the web, if you give a thing a name, you can do all sorts of strange and wonderful things to it.

In the web page, giving something a name, is done by using the id tag. The official definition of ID is found here.

This may be best explined in an example. In my game page I have a “Red player score” and a “Blue player score”. In the web page I highlight each score by bolding it.

<b id="RPSScoreTxt">Blue Player Score</b>

Just a rule in the fantasy land that is HTML, if you know the name of something you can completely change it. Everything in an HTML page is an object, or more specifically, and html page is represented programmatically within the web browser as an object hierarchy, or Document Object Model (DOM for short).

When the page loads (remember this detail)  the text “Blue Player Score” will be displayed in it’s location within the page.

if you know an object’s name you can get a handle to that object within the DOM. Once you have the handle to an object you can  fiddle with the attributes and data attached to that object.

Will it come when I call it?

Having an element with a named ID allows you to get a reference to that object within scripts. Within javascript the object “document” represents the web page within the javascript is running. getElementByID is a function attached to the document object.

What is all powerful in a name?

The next trick is know what to change.

In HTML there is an attribute to every object that is nearly all powerful. The innerHTML attribute allows you to modify or replace the contents of an object. In this the inner HTML of is just some text. (But I did an experiment where unity replaced a simple text entry with an entire table).

function SetRPScore(arg){
 document.getElementById('RPSScoreTxt').innerHTML = ' ' + arg;
 }

So, if you make the call

SetRPScore("i did i bla bla");

The text “Blue Player Score” would be changed to ” i did i bla bla”

Remember the above function needs to be defined within <script> </script> block.

<script language="javascript1.1" type="text/javascript">

function SetRPScore(arg){
 document.getElementById('RPSScoreTxt').innerHTML = ' ' + arg;
 }
</script>

That was the hard part

now you have an object with a name you can use to get a handle to. You have a way to change that object, you have a function that takes an argument. The only thing you need to know is the Application.ExternalCall.  That function takes 2 parameters, the name of the function, and a parameter to pass to the function.

Application.ExternalCall("SetRPScore", 22 );

Bottom line (of code)

so if you want your unity game to make a change, such as set score, in the web page just do the following

• In your HTML page, give a chunk of text (or anything else) an ID
• Create a function(again in your html plage) that changes the innerHTML of that ID
• Call that function from within your unity plug-in via Application.ExternalCall

And that’s how it is done. To see the full details look at the source of my Aqueme game

Come back later and read my next segment, which go through the more terror prone activity of making a call into the unity plugin from the web page.

A Brief Word About Apple iPhone OS 4
As most folks already know, Apple introduced a new Terms of Service (ToS) with their iPhone OS 4 that has some Unity users concerned. While we don’t yet have a definitive statement to share at this time, we have a healthy, ongoing dialogue with Apple and it seems clear that it’s not their intention to block Unity and will continue our efforts to ensure compliance with the Terms. While it’s possible that ensuring compliance could mean additional engineering on our part, our committed goal is to provide you with uninterrupted ToS compliant tools and we think we’ll be able to do that.
If you want to stay up-to-date on our official response to this situation then please keep an eye on our company blog, and in particular posts from our CEO David Helgason: Unity Technologies Blog » David Helgason. We want to thank everyone out there for their patience while we work through these changing circumstances. We know it’s difficult to proceed with uncertainty, we’re doing all we can to ensure a positive outcome.

Maby you want to create a more productive work environment. Maby you are astounded by the volume of applications created for systems like facebook, the iPhone, Unity, Flash.

Maby you are just disgusted by the volume of flash games out there compared to the volume of apps that actually help people be more productive, accomplish goals.

Maby a new mental model will help.

Think of these systems as a riverbed, and the applications in them are like water.

and everything that has gone before is like Henry Ford’s factor pumping out Model Ts.

HUH?

Is this just meaningless new age drivel? This blog author hopes not.

How can there be 10s of thousands of apps for the iphone, facebook etc. etc. without having thousands of programmers in huge buildings managed by an army of MBAs? The average iPhone app looses money.  How can this be? Has everyone gone crazy? It is not sustainable!

Well, I believe there may be a “philosophical” description that sets Facebook, Flash, iPhone, apart from what has come before.

These new systems are more like a riverbed, which  allows water to, easily and  quickly, flow toward it’s own natural and desired destination.

Is a riverbed a thing?

What if we can not know, ahead of time, what people’s expectations will be? How do we make products and services that will exceed something we can not know before we begin product development?

Well, don’t make a thing, do not make a product. Make something that lets other people make products and services. This is not a new idea. Many names have been given to these type of things: Platforms, Enablers, Frameworks. Regardless of the name, they are systems for allowing the mass production of NON identical items in an environment DEVOID of requirements. “It must run on the iPhone” and purchased through the app store is NOT a Functional requirement.

Apple and Nike are not cool

They “enable” cool.

I know I’ll take a lot of flack, but I say even Apple and Nike do not make cool. It is the people, the community, especially the prosumers that make Apple, Nike, Burton, all the rest. Snowboard, skateboard, marketeers have know this for decades.  It is what prosumers do with produce that makes something cool. That is how Apple and Nike get to be seen as cool.

The tyranny of requirements

“You find a need, and you create a business to fill that need” the old saying goes. It is the basic, fundamental, notion behind traditional business development.  If someone has defined a need, that implies there has already been a situation that has been unresolved, or not satisfactorily resolved. “I needed to do X and I couldn’t” or “Y took me 7 hours which meant I could not do Z”. If we just look at needs we form requirements that make what we do faster and easier.

Pot scrubbers where invented to make cleaning faster. Dishwashers where invented by someone who answered the question “I expect someone to invent a machine to do it for me”. This is a well known, understood and discussed result, many texts on usability and design make this point.

Exceeding expectations would be inventing an eating method that does not require cleaning (Do paper plates qualify?)

It has been discovered that discovering underlying expectations, and exceeding them, leads to not only new products, but whole new industries.

Don’t touch that

The simplicity and rich feature sets provided by platforms such as Facebook, iPhone, Unity, increases productivity, and lowers the barrier to entry for all developers. Just like the PC had a much lower barrier of entry compared to Mainframes. This benifits internally developed apps(from the developer of the platform) as well as externally developed apps. The focus on simplicity also allows for high levels of automation. For apple, facebook, myspace, xbl, mixi, content is more like a river that flows through the streambed they have built.

I would compare it to a more traditional model that treats content more like cars through a factory. A factory produces a large number of individual items, all of the automation touches every part of every car made. The automation allows for a large number of cars to be made. Industrialization allows for a lower barrier, and higher volumes than building the products one by one. But it has it does have its limits.

In an industrial model, the creation of individual products is highly automated. This insures consistent product quality, and a relatively high rate of production. As long as each object is identical, and the requirements of each object is known ahead of time. Even with high levels of automation each individual component of each product is touched by the automation several times during the process. This inherently limits the potential output as well as limits the ability for external collaboration(Since the producing organization has to own and centrally house all the automation).

Don’t Require anything

As mentioned above, product produced through an industrial process have to be specified up front. Each component of a product must be completely understood so it can be manufactured. These specifications stem from Requirements. Every industrial process produces products or components “To customer specifications” or “conform to customer requirements”.

How many social iphone apps, do you think, where developed based on requirements? Did someone say “I require an application that lets me make shooty noises with my mobile phone”

Conversely how does the legacy industrial system deal with requirements like “I want it to be cool”?

So What?

So if you want to replicate what Apple,  Facebook, or other like companies have done, there are some things you need to do:

Realize you are enabling others to achieve their goals and desires. What you create is something that enables others to achieve their goals, not yours

It has to be simple, from every angle. Simple to use, simple to develop for. Don’t bind it up in corporate IP protection contractual obligations

It has to be compelling. People have to want to user your system to achieve their goals. if they don’t want to use your system, they will do it some other way, or not at all.

It has to be automated. Armies of people can not create and operate these systems, the model just breaks down. Every time someone involved with your platform has to touch something, like 3rd party content, it reduces your ability to scale, as well as limits everyone ability to contribute.

it has to be focused on the public. This does not really mean a public web site, but that the development and operational environments are focused on the end user/end developer, the public. Having individuals and organizations striving to meet internal goals are actually counter productive. (A great example is having an Entertainment companies  IT department report to the CFO rather than report to the producer or the head of product development)

Cafe’ world, Zynga’s fastest growing game. It is estimated to have
over 100 million unique active visitors per month. In ad market terms, that is 1/3 the US population. Compare that to the superbowl (nearly 100 million according to neilson).

One of the interesting facts that I took away from the virtual goods summit is the fact that zynga sees 10 dollar a year ARPU (Average revenue per active user over 1 year).

I know, according to all the VCs, that the advertising revenue model is dead, but seriously, placing an ad on these facebook games is dirt cheap compared to the superbowl. AND the quality of the data you can get from a social media campaign is tremendous.

It takes an abused metaphor to make something grow huge, fast

It takes a village to. We have all heard that cliche. Growth like what we see in the social media market needs support. Need creates demand, demand typically filled by meta industries that sorround and support the primes (Prime content developers, zynga, playdom, playfish). The social media meta industry is blossoming: Monitization infrastructure is now an industry (we’ve known that for a while, since we have been working with vindicia, aria, etc. etc.). Metrics companies that compete with cognos are sprouting, as we know there is a huge gap in the promise of cloud and cloud like infrastructure. For once, development tools are keeping pace, mostly because the state of the art is very simple apps, built mostly around flash, and the very very simple facebook API.

Marketing is not my thing, making stuff work IS

That simplicity does not yet extend to the back end technologies that run most social media networks. The LAMMP stack is not keeping up(Linux Apache MySQL MemCacheD PhP). It is a technology base, and architecture, that has not changed much in the last 15 years or so. It is  based on an architectural pattern that dates back to the late 70s(I am referring to MVC). There have been enhancements,  but no fundamental changes to the pattern.   load balancing, concurrency, and scale out are not natural to the pattern.

I would rather have pie

Facebook’s architecture is a step toward the ideal, squishing the technology stack down to only 3 basic layers,  but the architectural ideal would be to flatten the architecture down to one single layer. Rather than web sites being modeled after a layered cake, ideally they would be modeled after a pie (mmmm pie . A single amalgam of infrastructure, that can grow “out” as much as needed. insert mouth watering allegory to pie metaphor here.

Personally, I think we are close. One of the technical reasons for multi layered approach to web site design is the capabilities of each individual component(server). Another reason (or side benefit, take your pick) is security.

Why we have cake instead of Pie

The Multi layered architectural model is a result of economics: Expensive computers are optimized for various workloads. Basic economic theory, when a resource is scarce, it will be optimized for it’s largest most profitable market. This is the driving principle behind server design for the last 50 years. Computing power has been scarce, so the computers themselves have been optimized for specific workloads, like running databases. In the late 90s we saw the rise of generalized high density servers, and web server software, dominating the web tier, then a few years later, dominating the app tier. Now we are seeing these generalized high density servers becoming capable of running databases. So, finally, the same high density, low cost, servers are physically capable of running all the software systems used by high scale internet web sites. Which is a step. We are only a generation, or so, away from having a single physical server have enough capacity to run the entire stack of software for a high volume web site. For small websites, we are already there. Most word press based blogs use the same basic architectural pattern as a huge social media web site(web server, app server, database).

The management overhead for running the entire software stack is still too much for a single commodity server. Specifically VMWare and Zen combined with the OS still takes too much compute power away from the application. High volume web sites are still running their entire server farm at very high utilization rates.

Tipping point ahead?

Two things can/will happen.

1. The next couple CPU generations will begin to create the kind of compute power that web sites require in order to completely flatten the physical hardware stack.
2. The movement  of the virtualization functionality down into the hardware (arguably where it belongs). Ideally there should be code in the firmware of the chipset on the server motherboard that provides much of the low level functionality now provided by VMWare/Zen.

The Physical ideal

The ideal is this: A single, low cost, high density server with enough CPU cores, Memory and memory bandwidth to run OS instances for the web server, app server, and Database, as well as run in-memory IP networks and firewalls between the layers. AND provide lower latentcy and higher concurrency than individual systems connected by networks.

Once this physical ideal is reached, then we can develop enough experience to create a new software pattern that more naturally fits network application development.

So what, Now and Later?

So where to invest, where will contributions have the most impact, where are the control points?

In the short term, Anyone working on low level virtualization technologies. nVidia could make a short term killing by coming up with a chipset that could allow Zen/VMWare to virtualize a system with GPUs. (yes GPUs, a surprise technology in server side computing, when physics and stream based processing become important to increasing concurrency, and reducing latency). Also look to the industry veterans, Intel and AMD.

Long term investment, anyone doing research into a new architectural pattern that will replace MVC.  MVC has been in use for nearly 30 years now. The next architectural pattern will be developed in a fraction of the time, and because of the fundamental change in the economics of computing, it’s adoption rate will be unlike any seen previously.

It all comes narrowly back

This accelerated adoption cycle will dramatically narrow the number of players in the meta industry (and you thought I was just rambling, and that thread went nowhere). Put bluntly, when the architecture and techology replacing MVC comes along, it may be only come from one organization. With a likely adoption rate so accelerated that competition has no time to develop.

Interesting times ahead

Imagine 90% of the web traffic on the internet switching from one architecture to another in under a year. If zynga can develop and deploy an app in 5 weeks, that reaches 50 million people in 3 weeks. As the farmer used to tell me “that tells ya somethin right ther”.

• Earned

• Purchased

Earned currency is generally given to participants in your virtual economy for work done or time spent. Purchased currency is just that, purchased with cash outside your virtual economy. (kinda like if you dig up gold and exchange that for money, in the real world).

I am purporting there is a 3rd type of currency that can be applied to virtual economies, Achievement Currency, a type of reward for doing accomplishing a goal in the virtual economy. This currency is tied to specifc, pre-defined, and known goals. Complete the quest for the golden sword, buy 1000 coins, posting 10 answers in the forum (that receive positive feedback rating), gifting 100 items.

Achievements are now a well understood reward/motivation game mechanic. But using the same mechanic as a currency in virtual economies is a new concept.

Earning achievement currency is relatively easy concept. Think of “badges” or “Medals”. But how do you spend them? It is hard to unlock the mind from the concept that an award for achievement can some how be “undone” or “given away”. It also contrary to think that achievements could be purchased with cash.

Achievement currency, when added as a 3rd type of currency in a virtual world certainly have the ability to deepen the experience in a virtual world, but if it is too easy to buy them with cash there will certainly be members of your community to vocally decry “posers”.

Another option is to upload the web page that Unity 3d creates when you build a web project. If you upload both the file and the page. you can insert the web page as a link into your blog using the wordpress “Add Media” feature

Now That is Slick

And here is how you do it.

First you need to collect some things.

1. make a picture of your project. Run your project in Unity, alt+printscreen to capture an image of the project. Paste that into your favorite image editor. Even use Paint if you have to (yuck).
2. After you do a web build in Unity you’ll need to upload BOTH the web page Unity creates, as well as the .unity3d file
3. So that’s 3 uploads total

Here is why I upload them into the WordPress media library rather than directly into the post. You need the file URL for the web page. You’ll need to feed that as a link in your post.

Now assuming you have the shadowbox plugin installed simply do the following:

1. Insert picture into your blog using WordPress’s “Add an Image” or “Add Media” feature
2. Open the media library Either by clicking on the star icon, or opening the media library link in a new tab.  NOT by clicking on the media link on wordpress menu. we just need a link from the media library, not actual media.
3. “show” the .html page you uploaded, then select and copy the file URL for your media. If you used the “insert media” function, simply click the show link, then click the “file url” button, select and copy the URL.
4. Now go back to your blog post,  click on the picture you uploaded
5. hit the “link” button
6. In the URL text entry box, paste the URL you selected
7. Close the link box
8. Now switch over to HTML view because you need to add the tag rel=”shadowbox” to the URL
9. In HTML view go find the code for the link in the image, just after the opening “<a” insert the following: rel="shadowbox"
10. Preview your post,  make some other additions and publish your work!

Hats off to Will Goldstone and his learn unity 3d site

When you build a project in Unity3d, select the web build, and pick a seporate folder for unity to put the output file into.

In Wordpress, in Site Admin, click the media link, and upload new media, browse to directory you told unity to dump the files. Select and upload the “.unity3d” file

When you downloaded the Wordpress plugin from the Unity support site there is a readme file. That readme file contains examples on the tags you need to place in your blog posts.

here are the instructions from the readme.txt file that comes with the plugin

=== Usage Instructions ===

With the plugin installed and activated as part of your WordPress blog you can start embedding Unity Web Player content in your posts. Embedding content within your post is done by using a simple tag structure:

Please view the full post to see the Unity content.

The outer tag declares the existence of Unity Web Player content, the name/value pairs you provide then determine what content is displayed and how. There is only one required parameter, the src URL for the content to be displayed, all other parameters are optional and if not provided default values will be used instead.

When adding any of the optional parameters please note that the order you list them is not important. Simply provide each parameter in name=”value” format, there should be no spaces before or after the equals sign and the value provided should always be wrapped in double-quotes (the ” character). Additionally you need to separate each of the name/value pairs with an empty space. For example, here is a tag set where the src, height and width are all specified:

Please view the full post to see the Unity content.

=== Usage Instructions ===

With the plugin installed and activated as part of your WordPress blog you can start embedding Unity Web Player content in your posts. Embedding content within your post is done by using a simple tag structure:

\[WP_UnityObject src="http://www.yourdomain.com/yourfile.unity3d" \/\]

The outer tag declares the existence of Unity Web Player content, the name/value pairs you provide then determine what content is displayed and how. There is only one required parameter, the src URL for the content to be displayed, all other parameters are optional and if not provided default values will be used instead.

When adding any of the optional parameters please note that the order you list them is not important. Simply provide each parameter in name=”value” format, there should be no spaces before or after the equals sign and the value provided should always be wrapped in double-quotes (the ” character). Additionally you need to separate each of the name/value pairs with an empty space.

When you upload content into the WordPress Media library, it will give you the URL to your content.

Soo…. let’s see how it works

Please view the full post to see the Unity content.

Did it work?

Well, unfortunately more often than not you’ll get an error downloading the file.
Reading the developer’s  unity 3d blog it seems some people have had success others may be having the same problem as here.

To view his presentations, you need a PPS viewer. Fortunately there are several available.

PowerPoint slideshow viewer for Windows from Microsoft

For Mac  and Linux Users, NeoOffice, Open Office, and other tools have power point viewers. Sorry I can’t verify these presentations will play, as I am without a working Mac at the moment (sad)

I found a great article Seventeen things and I got to thinking, everyone should run through this list before they post.

That got me thinking more. This would be a good list to classify, codify, blog posts! it’d speed up and automate feedback.

At the very least it could make a great thesis topic. I smell a Dr. of Anthropology/Sociology in my future.

This article/blog post is targeted at twitter, but applies to all social networks and the blog-o-sphere as a whole. it’s a great list to keep in mind when you post.

Personally this very blog post post is a 5.2 and 6 (on his list).

and I fully support codifying his system into a w3 standard so that all blog/tweet posts can be classified as original, BumpContent, or ReContent world wide

(and hey, don’t forget I made up the terms BumpContent and ReContent)

(this being almost text book definition of BumpContent)

Dr. Noir Talon