Is Unity WebGL loading? A simple loader

F = (When you publish your Unity application or prototype in WebGL a problem that your testers or players may have is that while the browser is loading the application, no progress bar appears and so they may be tempted to reload the page again and so… F() ).

A simple fix to reassure them is to paste this script at the bottom of the index.html file that Unity produces at build:

<script>
  /**
   * Created by
   * Matteo Bicocchi @pupunzi
   * Pietro Polsinelli @ppolsinelli
   * Follow us as we are creating a game on #football 
   * with a story: "Football Voodoom" :-)
   * */

  var appName = "<b>" + Module.codeUrl.replace("Release/", "").replace(".js","") + "</b> ";
  var canvas = document.getElementsByTagName("canvas")[0];
  var canvasRect = canvas.getBoundingClientRect();

  var loader = document.createElement("div");
  loader.id = "loader";

  var loaderWidth = canvas.offsetWidth;
  var loaderHeight = canvas.offsetHeight;

  document.body.appendChild(loader);

  loader.style.position = "absolute";

  loader.style.top = 0;
  loader.style.bottom = 0;
  loader.style.left = 0;
  loader.style.right = 0;
  loader.style.margin = "auto";
  loader.style.width = loaderWidth + "px";
  loader.style.height = loaderHeight + "px";
  loader.style.background = "transparent";
  loader.style.color = "#fff";
  loader.style.opacity = 0.8;
  loader.style.fontSize = "16px";
  loader.style.letterSpacing = "3px";
  loader.style.fontWeight = "100";
  loader.style.textAlign = "left";
  loader.style.padding =  "30px";
  loader.style.boxSizing = "border-box";

  var dotCount = 0;
  var checkDisplay = setInterval(function(){

    if(Module.progress.progress > 0) {
      loader.style.display="none";
      clearInterval(checkDisplay);
    } else {

      loader.innerHTML = "Loading " + appName;

      for (var x = 0; x<dotCount; x++){
        loader.innerHTML+= ".";
      }
      
      dotCount = dotCount >= 40 ? 0 : ++dotCount;
    }
  },100)
</script>

This will show immediately “Loading…” and will animate it until the app loader appears. See it here:

Unity WebGL custom loader

Cool no? The JavaScript is really basic and should work wherever WebGL does.

 

 

 

Social Share Toolbar

First Trailer for Football VooDoom: Will To Comeback

A first trailer for an idea for a game on football that is taking shape both in design and in development – see the dedicated page for info and the trailer.

2016-08-08 22_44_59-Informazioni data e ora

Social Share Toolbar

(Mis)Understanding Applied Game Design: Vaccine!

Working with a no longer minuscule set of customers on applied games of a really wide spectrum of themes I’ve noticed in the early phases some misunderstanding that recur. In order to help both parties (game designers and field experts) to reach a common ground, I’ve set the misunderstandings in extreme and simplified form so you may use them as vaccine :-)

Also get the PDF here.

Follow me on Twitter where I post about game design, game development, Unity3d 2D, HTML5, applied / serious games.

 

Social Share Toolbar

Untangling GameObject State in Unity

In this short post and video I try to discuss and clarify a few points about GameObject state in Unity with respect to game, scene and “runtime” scope. It is a bit more complex than one may understand initially, so bear with me a little.

When you start developing scenes in Unity, it won’t take long before you start asking questions like:

How can I get the same GameObject in different scenes?

Why do static properties sometimes get reset across scenes?

Why when I reload a scene I get duplicated objects which are meant to be singletons?

How can I comply with the (highly practical) principle “Make the game runnable from every scene” when I have global instances from other scenes?

Here are some answers.

Here is the full schema I refer to:

GameObject State in Unity

While MonoBehaviour’s  life-cycle is quite well documented e.g. both directly in Unity docs here and also by third parties e.g. here, how to handle GameObject’s persistence in and across scenes may be more obscure.

So here are written (partial) answers to the questions above:

How can I get the same GameObject in different scenes?
Would be probably better to reword this as “how can I persist and share data across scenes” – and there are many ways to do that :-)

Why do static properties sometimes get reset across scenes?
Only static properties which are GameObjects present in the scene will get reset (typically singletons). Other static properties will be preserved across the virtual machine.

Why when I reload a scene I get duplicated objects which are meant to be singletons?
That is because you marked those objects with DontDestroyOnLoad and created them (also) in other scenes. Create them via code (not in hierarchy) checking before their existence.

How can I comply with the (highly practical) principle “Make the game runnable from every scene” when I have global instances from other scenes?
This is best done just as explained above: create the global objects in every scene via code if they don’t already exist.

 

Unity Execution Order

Unity Execution Order – from Unity documentation.

If you are in need of learning some good patterns in software game development, a really nice book is Game Programming Patterns. Here are also 50 Tips for Working with Unity (Best Practices) which I reread from time to time, understanding progressively more and more of them (but still not all :D).

Thanks to Daniele Giardini for some feedback on the state scheme above.

Follow me on Twitter where I post about game design, game development, Unity3d 2D, HTML5, applied / serious games.

Social Share Toolbar

A little Unity project to explore a math puzzle

This math puzzle was proposed on The Guardian:

puzle

How to fill up the slots with the numbers from 1 to 9 and make the result 66? I proposed it to my kids, who are actually still too young to appreciate the algebraic solution. So I created a simple “brute force” explorer of the problem – here – and used to explore the possible solutions.

Brute force problem resolution

Here is the complete Unity project. Play with it!

Social Share Toolbar

Storytelling flow in videogames – DAG pod 23

In this podcast Daniele Giardini and Pietro Polsinelli (myself) discuss story flow in games – and how game endings are told. We roam from The Witcher to Sunless Sea, crossing game genres. Hear us here:

At the end of the podcast we read and discuss a quote from If Games Were Like Game Stories…

My favourite moment from Papers, Please was when someone gave me a banner for a sports team named the Arstotzka Arskickers. I had a choice of whether to put it up on my wall, or not.

Compared to all the other decisions… taking bribes, separating families, conspiring to take down the Arstotzkan government… this was a small and silly decision. I put it up on my wall, of course.

But the reason this is so memorable to me, is because the game actively acknowledged this small act! A few people commented on the banner, some remarking it’s tacky, some cheering “Go Arskickers!” And then, of course, this decision bites me in the ass when the inspector comes by and tells me the decoration is against protocol, and fines me.

Games and books quoted:

The Witcher 2 Witcher 2 cover.jpg
The Witcher 3 Witcher 3 cover art.jpg
Thinking Fast and Slow, Daniel Kahneman Thinking, Fast and Slow.jpg
Bioshock Infinite Official cover art for Bioshock Infinite.jpg
Bioshock (one) BioShock cover.jpg
Lord of the Rings Movies Ringstrilogyposter.jpg
Dark Souls Dark Souls Cover Art.jpg
80 Days http://a3.mzstatic.com/us/r30/Purple3/v4/dc/f6/80/dcf6809a-a0bf-a620-4f03-4d36907a29a3/screen1136x1136.jpeg
Shadowrun Shadowrun4A.jpg
Kardashian Hollywood
Sunless Sea http://cdn.akamai.steamstatic.com/steam/apps/304650/header.jpg?t=1424434198
Flick Kick Football Legends http://pikpok.com/wp-content/uploads/2015/02/en_ss_497x280_02.jpg
Alessandro Baricco https://www.penguin.com.au/jpg-large/9781921145483.jpg
Papers, Please http://screenshots.en.sftcdn.net/en/scrn/69660000/69660821/papers-please-08-535x535.png
Football Drama Football Drama

 

Follow me on Twitter where I post about game design, game development, Unity3d 2D, HTML5, applied games.

Social Share Toolbar

Making a sport game in Unity: model & prototype

I just published a video where I describe how to start modelling and developing a sport game, specifically football (soccer) in my case:

In the following notes some motivation for the work and references from the video.

What am I trying to do?

I am creating a game on football (not American Football), called Football Drama: this game is supposedly the story of the coach in the context of a Football Manager like game. The latest version of Football Manager for smartphones has a cool game play:

FM 15 on smartphone

One of the first thing I did in Unity is search for a plugin that would handle the match play part. Given the number of plugins available in the Asset Store and the popularity of football, I was pretty sure that my only problem would be picking the best plugin. Wrong.

I didn’t want to do thisimage

The only decent looking component I found is Soccer Project by “Astute Games”, which is ok but actually does nothing useful in my perspective, as it provides passive 3D models of players and little more.

The are simply no plugins covering modelling, movement and AI for football games in the Asset Store.

Maybe because “The barrier of entry on making a decent team sports game is really high.”, as they say in one of the few discussion of the theme indie & sports available online.

The Simple Soccer examplehttp://ecx.images-amazon.com/images/I/51jAoX1id6L.jpg

In chapter 4 of the book Programming Game AI by Example the author provides a nice implementation of a simple soccer game.

I’ve downloaded the Java sources and made the sample run in my IDE.

simpleSoccer

Here are some of the Java classes of this example:

image

Movements are regulated by physics:

image

Complete Java source code is here.

Not what I want for a sport game

This material is useful but what it is modelling is not football. seems more snooker to me Sorriso. I want a simple grid with squares as players and a state handling framework, where the (hierarchical) state machine can easily be extended. Movement is not determined by physics – the right metaphor is not snooker.

If you actually watch a football game, its a highly fractioned game of control and tactics, my reference for this development has been Cameroon vs. England (World Cup 1990):

Physics plays a role on long shots, but I will model that using tweening (the wonderful DOTween library by Daniele Giardini). I will call the model I need Football Grid.

Football Grid: The model

imageThe example is also using heavily inheritance to model all aspects of play. I instead will be happily mixing inheritance and composition, reducing inheritance to a minimum and modelling state with classes only when strictly necessary. A great book to learn about basic game programming patterns, if you are new to the topic is Game Programming Patterns.

The three states of game play: paused, preparing play, in play: this is simply an enum.

I used object hierarchy and modelling of states with class instances only when it is strictly useful, so e.g. in the case of a player state.

Here are the classes of my model:

image

2015-04-05 16_11_46-UnityVS.footballDrama - Microsoft Visual Studio

2015-04-05 16_20_15-UnityVS.footballDrama - Microsoft Visual Studio

Curve ball effects

2015-04-05 16_29_08-PowerPoint Slide Show - [MasterSlides.ppt [Compatibility Mode]]

To get these effects you can simply tween (I use DOTween) the ball differently along the X and Y axis:

DOTween curse transform

More?

Follow me on Twitter – I study game design, development (2D), applied games, and I post about progress on Football Drama.

Football Drama game design

Unity components used

DOTween tweening component

Game Logic Grids http://gamelogic.co.za/grids/

DOTween http://dotween.demigiant.com/

Thank you!

Image references

“Association football 4-4-2 formation” by MaxDZ8, based on work from Mario Ortegon – self-made, original file from Mario Ortegon. Licensed under CC BY 2.5 via Wikimedia Commons – http://commons.wikimedia.org/wiki/File:Association_football_4-4-2_formation.svg#/media/File:Association_football_4-4-2_formation.svg

“Association football 4-3-3 formation” by Threner. Licensed under CC BY-SA 3.0 via Wikimedia Commons – http://commons.wikimedia.org/wiki/File:Association_football_4-3-3_formation.svg#/media/File:Association_football_4-3-3_formation.svg

Social Share Toolbar

Games we loved in 2014 – DAG pod 21

In this podcast I chat with We Are Muesli about (some of) the games we liked in 2014. We each put together a list of games and we sort of interviewed each other. [Read more…]

Social Share Toolbar

Beyond mechanics: games with depth – DAG pod 20

InMinimax this dreamy podcast Daniele Giardini and Pietro Polsinelli (myself) discuss the notion of depth in games. We don’t reach any definitive conclusion, but we have fun Sorriso [Read more…]

Social Share Toolbar

Game Happens! If you work at it – DAG pod 19

In this episode we are with Urustar, the pure indie game creators from Genoa who recently organized Game Happens!

a workshop and a networking event focusing on the economic growth of the video game industry in Italy, especially in Genoa and in the Liguria region.

Here is the podcast:

Design a Game Podcast 19

image

Here is also Rami Ismail talk which is referred to in the podcast:

 

Urustar are the delightful & talented Alessandra Carboni & Marina Rossi, the mirandolian Federico Fasce and the mysterious, silently hooded Lorenzo Pigozzo.

Social Share Toolbar