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

Tips For The Pragmatic Unity Developer

In the video below I’ve presented several productivity tips / hacks for the great Unity3d developer, that cultivates his / her essential qualities (impatience laziness hubris):

 

Sources & References

The three most essential plugins are DOTween, Text Mesh Pro and Console Pro.

Jet Brains IDE for C# preview here.

The “auto-save on play” script is here, The “no more hot reload script” is here, both by the same cool guy.

The scene object enable and disable script is this:

public class TheScene : MonoBehaviour
    {
        public GameObject[] activateOnStartup, deactivateOnStartup;
        
        void Start()
        {
            foreach (GameObject go in activateOnStartup)
            {
                go.SetActive(true);
                if (go.GetComponent<CanvasGroup>() != null)
                    go.GetComponent<CanvasGroup>().alpha = 1;
            }
            foreach (GameObject go in deactivateOnStartup)
            {
                go.SetActive(false);
                if (go.GetComponent<CanvasGroup>() != null)
                    go.GetComponent<CanvasGroup>().alpha = 0;
            }
        }
    }

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

Social Share Toolbar

A Circular Range Control for Unity UI

I needed a circular range control to be for a project using Unity UI, and there seemed not to be one built-in, I created one. I wanted it to work on both desktop and mobile (touch). In building it I found out that to make it usable it requires quite a bit of tuning. [Read more…]

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

Creating Match 3 Games in Unity

How to create quickly a match 3 game in Unity? Or any kind of match game? I have been working on an original match 3 game (an applied game actually) together with Unity 2D guru Daniele Giardini and I took some notes, which I present in the video below. This is not a tutorial: I just point out some concepts you will probably need to deal with.

Consider also that this is all done with Unity 5, which by introducing 2D, sprites (and also new UI) has made it much simpler to create this kind of games. And as in all my games, its actually Unity plus Gamelogic Grids component, as in my models (and probably in games in general) grids are pervasive.

Here is the video:

I started writing my tests from GameLogic match 3 sample project. The code project is based on GameLogic’s Grids for Unity component, and I’m using as much as possible the DOTween’ component for smoothing movements and effects.

The GameLogic fellows compiled an exhaustive survey of match games, including a wonderful infographic on match game structure spectrum:

2015-09-18 16_28_08-Microsoft Edge

Subtleties of match 3 game mechanics

explodingSubtleties of game design mechanics emerge once you are creating a prototype: sequential matching, peculiarities of click / swipe matching, generative universe (no need of generational AI) … discrete / continuous matches … .

If you believe that game design is basically a formal activity, mainly to do with mechanics (which actually I believe to be too simplistic) you need to be a developer at least at some level, because in building the prototype you understand the mechanics, with all its possible variations.

References

Match Game Mechanics: An exhaustive survey.

GameLogic Match 3 sample project.

Grids for Unity GameLogic FAQ.

Match 3 game draft in Unity tutorial with full code.

You Must Build a Boat.

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

Social Share Toolbar

A podcast & sources for (romantic) game polish and feel – DAG pod 22

In this podcast Daniele Giardini and Pietro Polsinelli (myself) discuss the notions of game polish and feel.

Here is the podcast:

There is also a video of the podcast here:

References

Game Feel: the book.

The game Goscurry.

football drama prototype

The Football Drama site.

DOTween

DOTween tweening component site. Easings http://easings.net/en.

Finally, Vlambeer talk on game feel.

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

Unity3d: Using A* and grids for entering a football field

Just played with the A* algorithm and a grid to make players enter a field and assume the initial 4-4-2 classical formation. Notice there are dumb and smart teams A bocca aperta [Read more…]

Social Share Toolbar

Unity3d: Giving runtime prefab instances meaningful names

This is a short note about a minor issue you may meet in Unity3d when you are creating scene objects in code, say from prefabs.

In my case I am creating a soccer field borders on the base of a grid that may resize, so I want to create everything in code.

Unity3d object instance with meaningless nameI am as always giving meaningful names to variables (and you should too) and so it would be nice to get the instance to be named as the variable, without duplications and without – oh horror – writing the instance name as string, breaking code esthetic and refactorings. In the pic on the side you see what you get by default – not cool.

Actually in the rich and hackable C# universe as managed in current Unity3d this is possible: just this way:

image

Thanks to this post here. I used it this way:

image

imagegetting good names on the instances Sorriso

 

Note that this relies on unspecified behaviour and while it does work in Microsoft’s current C# and VB compilers, and in Mono’s C# compiler, there’s no guarantee that this won’t stop working in future versions. See the discussions here:

Getting names of local variables (and parameters) at run-time through lambda expressions

Finding the Variable Name passed to a Function in C#

Update: It seems like this might no longer be an issue from C# 6, which will introduce the nameof operator to address such scenarios.

If you have suggestions on how to automate getting good instance names at runtime (maybe with cleaner / lesser code) let me know!

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

Social Share Toolbar

Game Development with Unity 2D – part 6: Pixel Perfect

Here we have a nice chat with the sinful Daniele Giardini about pixel perfect in 2D games, as a form of holy perfection.

We are continuing our voyage in Unity 2D development; previous trips: Part 0, Part 1, Part 2, Part 3, Part 4, Part 5.

We didn’t find a satisfactory definition of pixel perfect online, so this is Daniele’s: [Read more…]

Social Share Toolbar