Unity3D is a powerful suite of tools (Project IDE, Code IDE, run-time) for game development. In Unity3D Game Architectures I present six different techniques for setting up your game. Depending on the size and maturity of your team, you are probably doing some form of those. I recommend checking that article out first, then read below. In Unity3D MVCS Architectures: StrangeIoC (recommended reading before continuing) we dove deep into the great, free framework. I also explored an idea I had for an extension called PropertyChangeSignal. Here is more;

PropertyChangeSignal

To aid my work with StrangeIoC, I created a few classes that function together to reduce the workload. I call this the PropertyChangeSignal. Again we saw above that signals are used for many things. Speaking from a model’s perspective for every property (variable) you want to update in your model you may need SEVERAL signals. That is fine in my demo above with exactly one property, but imagine a ScoreModel with 5 variables, a TimerModel with 3, and a GameLogicModel with 25 more variables. You can quickly grow a HUGE list of signals. Now, creating a signal is super quick. It takes 30 seconds to create, and another 30 seconds to optionally bind it to a Command. Its certainly possible to grow your app in this conventional way (or some variety of this conventional way). Most people do exactly that. But I wanted a start a discussion on a different way.

Here is an example.

Let’s say we have a public message string in your data model and the whole app needs to interact with it.

A. Conventional Signals Per Property (4)

• 1. requestMessageSignal.Dispatch() – If a mediator arrives on the scene late and wants to KNOW the current value of message.
• 2. clearMessageSignal.Dispatch(targetValue) – If a command wants to CLEAR the current value of message.
• 3. updateMessageSignal.Dispatch(targetValue) – If a command wants to SET current value of message.
• 4. updatedMessageSignal.Dispatch(newValue) – After any updates happen, the model sends this out to those listening who can GET the value.

B. PropertyChangeSignals Per Property (1)

• 1. pcSignal.Dispatch (new PropertySignalVO(PropertyChangeType.REQUEST) )
• 1. pcSignal.Dispatch (new PropertySignalVO(PropertyChangeType.CLEAR) )
• 1. pcSignal.Dispatch (new PropertySignalVO(PropertyChangeType.UPDATE, newValue) )
• 1. pcSignal.Dispatch (new PropertySignalVO(PropertyChangeType.UPDATED, currentValue) )

So in B, we see far less signals used (1 vs 4), but an longer syntax for the call. Soon I’ll request your feedback based on the source-code.

Update:  Download the full source below.

Syntax Example

1. CONTEXT – SETUP BINDING

[actionscript3]

commandBinder.Bind<GameListPropertyChangeSignal>().To<GameListPropertyChangeCommmand>();

[/actionscript3]

2. COMMAND – HANDLE BINDING

[actionscript3]
public override void Execute()
{

switch (propertyChangeSignalVO.propertyChangeType) {

case PropertyChangeType.CLEAR:
//ASK TO CLEAR THE MODEL
iCustomModel.doClearGameList();
break;
case PropertyChangeType.UPDATE:
//ASK TO UPDATE A VALUE IN THE MODEL
iCustomModel.gameList = propertyChangeSignalVO.value as List<string>;
break;
case PropertyChangeType.UPDATED:
//FOR THIS PROJECT, THE VIEW LISTENS DIRECTLY TO ‘UPDATED’
//OPTIONALLY, WE COULD ALSO DO SOMETHING HERE IF NEEDED
break;
case PropertyChangeType.REQUEST:
//FORCE THE MODEL TO RE-SEND ‘UPDATED’ (WITH NO CHANGE)
//THIS IS VERY COMMON IN APPS (E.G. A TEMPORARY A DIALOG PROMPT)
iCustomModel.doRefreshGameList();
break;
default:
#pragma warning disable 0162
throw new SwitchStatementException(propertyChangeSignalVO.propertyChangeType.ToString());
break;
#pragma warning restore 0162

}

}

[/actionscript3]

3. MODEL – DISPATCH CHANGES
[actionscript3]
private List<string> _gameList;
public List<string> gameList
{
get
{
return _gameList;
}
set
{
//TODO: CONSIDER ALTERNATIVE THAT CHECKS "_gameList != value" BEFORE DISPATCHING
_gameList = value;
gameListPropertyChangeSignal.Dispatch (new PropertyChangeSignalVO(PropertyChangeType.UPDATED, _gameList) );
}
}

[/actionscript3]

4. VIEW – HANDLE CHANGES
[actionscript3]
private void _onGameListPropertyChangeSignal (PropertyChangeSignalVO aPropertyChangeSignalVO)
{
if (aPropertyChangeSignalVO.propertyChangeType == PropertyChangeType.UPDATED) {

doRenderLayout(aPropertyChangeSignalVO.value as List<string>);

}
}

[/actionscript3]

Video

[tubepress video=”87903532″]

Member Resources

Members can access the full source-code for this post. Membership is free.

[private_Free member]Enjoy this members-only content!

• Download Source-code ( StrangeIoCTemplate2 )

[/private_Free member]

Unity3D is a powerful suite of tools (Project IDE, Code IDE, run-time) for game development. In Unity3D Game Architectures I present six different techniques for setting up your game. Depending on the size and maturity of your team, you are probably doing some form of those. I recommend checking that article out first, then read below.

The Strange IoC Template

I consulted for years with PureMVC. From that, a spiritual successor with dependency injection was born as Robotlegs (RL). RL became my default choice for many projects. I’ve used both within the last year. Depending on client preferences. To share with the world a simple, consistent, starter project I created and shared a Template for PureMVC and a Template for RobotLegs. I continue that same ‘template idea’ for the article here. There is no popular version of those for Unity, until now. StrangeIoC is a fantastic, free implementation of Robotlegs plus Signals. Signals for C# comes from separate project available in other programming languages which replaces the standard use of Events dispatched often through a central Event Bus. The benefits of Signals are well known, but not everyone prefers them. I do prefer them, so my template exclusively includes Signals instead of Events. You can do either or both in StrangeIoC. You can play the unshockingly unsexy demo here, and then read about the internals here in the article, with full source-code (See ‘Members Resources’ below).

Table of Contents

1. What is StrangeIoC?
2. My StrangeIoC Template
3. My PropertyChangeSignal Extension for StrangeIoC

---

1. What is StrangeIoC?

Strange is a super-lightweight and highly extensible Inversion-of-Control (IoC) framework, written specifically for C# and Unity. The StrangeIoC team has validated Strange on web, standalone, and iOS (currently testing on Android).

StrangeIoC includes;

• IoC through Dependency Injection
• Choice of Signals and/or Events (with 2 styles of EventBus)
• MonoBehaviour mediation
• Optional MVCS (Model/View/Controller/Service) structure
• Multiple contexts (parts of your app can ‘care for themselves’ if desired)
• And much more…

Pros:

• Public, Community-driven, well-documented. (e.g. You can hire/contract a new developer who arrives with this skill on day 1)
• Decoupled, testable, & D.R.Y.
• Scales-up well for large teams, large projects

Cons:

• Slower to setup (but faster to add last-minute changes)
• Steeper learning curve, especially for junior developers
• Demands discipline/know-how from your team to put logic in its proper place (but removes the ‘where should we put that code?’ decision process)

---

2. My StrangeIoC Template

While the MVCS setup for Strange is optional, it is my preference. To understand the template. It is absolutely necessary to understand the fundamentals before digging into my source-code. For those familiar with MVCS, the learning curve is very quick. For those familiar with Robotlegs, you are in luck, the creators of Strange have a special “Introduction to Strange for Robotlegs Users“. I haven’t read that, but in general the Strange documentation is very well written, light (fun?), and relevant.

Figure 3. StrangeIOC Template Diagram

Figure 4. StrangeIOC Template Console

Pros:

• Together with this article, I hope it the template is a GREAT way for you to learn StrangeIoC
• Coming from PureMVC or Robotlegs? (Download and compare the similar templates for PureMVC and RobotLegs)
• Intuitive for beginners, e.g. “Bowling-pin code goes on the bowling-pin”

Cons:

• My style is just ONE way to use StrangeIOC. Every team should learn their own style.
• It is a very, very simple example (this is also ‘pro’)
• My Unity3D/C# coding standards are NOT the official Microsoft way. Ha!

Video

Part of the Unity With Cocktails video training series,  this video covers the “My StrangeIoC Template” section of this article. While the purpose and definition of MVCS is not explicitly included, there is some related tidbits in there. Also we see the ‘5 major steps’ in setting up StrangeIoC. 

[tubepress video=”82322606″]

More Info on MVCS

For the uninitiated to MVCS, let’s dig in! There is tons of info online so I’ll keep this section light (fun?). The basic idea is that you purposefully separate you coding stuff (‘coding concerns’) into 4 distinct areas which are discussed below. If the app doesn’t talk to any backend servers, you don’t need the service. So you often see the same basic structure described as MVC. But we’ll use MVCS just to be comprehensive.  So, looking at the diagram (Figure 3.) we can see some major areas of the application. The layout of this diagram mimic like the StrangeIOC Official Diagram above (Figure 2.). MVCS (for laymans)

• Model – “I hold ALL of the data, ha ha ha.”
• View – “Hey, look at this” (graphics, gui, sound) and “Oh, you clicked the mouse” (input), “Either way I’ll tell the controller about it”.
• Controller – “Hey Model (or Service), someone clicked a button so do X or Y”, or “Service, you loaded? Ok, I’ll tell the model”, or “Thanks Model for the updated data, I’ll tell the view to show that”.
• Services – “Welcome everyone, I’m going to just load stuff from offline files and online servers and tell the controller”.

Sample Orchestration: Clicking the Load Button Orchestration is my term for one ‘trip’ through some part of the MVCS for a specific purpose. Here we go from a button click to data storage and back to update the screen. We’ll step through the numbers from the console output (see Figure 4.). From View To Model Starting with the view (1), the user clicks the button in the UI, and the UI holding the button tells its paired mediator about it. The mediator sends a message (dispatches a signal which is mapped already to a command) and a command is executed (2). The command knows what needs to be done (a.k.a. business logic) and in this case that means to tell the service to load data from a local file (3). When the service finishes loading (4), its sends a message (dispatches a signal which is mapped already to a command), and a command is executed (5) which knows to put the freshly loaded data from the service into the model (6). From Model to View Continuing on, the model updates its internal data storage and then sends a message which anyone who cares can listen to. In this case the mediator is listening (7) and knows to update the UI.

Its important to note that while data started in the service and was passed around a bit before finally landing in the model, that – its the model that STORES the data as a class variable. The other data is temporary variables and they go away quickly. Its like wires that hold electricity temporarily but really only the battery STORES the electricity.

That sounds like a lot of steps. Yes it is. And for each ‘button’ or feature you add to the app you do something similar. However, very early in the learning curve you will both a) get fast at adding new features and b) see the benefits of mvcs.

---

3. PropertyChangeSignal

To aid my work with StrangeIoC, I created a few classes that function together to reduce the workload. I call this the PropertyChangeSignal. It helps to streamline your workflow in data-heavy applications where you need signals for data events such as REQUEST, CLEAR, UPDATE, and notify upon UPDATED.

Update: The complete article “Unity3D MVCS Architectures: StrangeIoC 2 PropertyChangeSignal” is ready. Check it out!

---

What’s next?

Want to learn something more basic? Or are you ready for more advanced topics about UnityEngine and C#? Checkout my “Unity With Cocktails” HD Tutorial Video Series on C# and Unity.

Member Resources

Members can access the full source-code for this post. Membership is free.

[private_Free member]Enjoy this members-only content!

• Download Source-code ( StrangeIoCTemplate )

[/private_Free member]

What are your thoughts?

Do you prefer an alternative to the suggestions above? Or do you have an additional recommendation? Please comment below. [polldaddy poll=7611650]

Unity is a powerful suite of tools (Project IDE, Code IDE, run-time) for game development.

I have explored many architectural approaches to game projects. Architecture is a hot topic in Unity — especially related to scaling up to larger Unity game projects.

My architectural background includes many frameworks. Highlights include heavy usage of Robotlegs (I event contributed to the project and drew the official diagram), PureMVC (I was the technical editor for the O’Reilly book on it), and PushButton (I published related articles for Adobe). I also presented and taught about the three at conferences and weekend workshops. Of these, only PushButton is a game-specific architecture, but all can be applied to games.

What are the qualities of a good gaming architecture? Most architects applaud solutions which are flexible, readable, D.R.Y., testable, orthogonal, and “refactorable” (at an acceptable cost). I will discuss the philosophy of design in a future post, but for now I simply list the major pros and cons of each approach.

Unity3D Bowling

What are the qualities of a good gaming architecture? Solutions which are flexible, readable, D.R.Y., testable, orthogonal, and “refactorable” (at an acceptable cost). I will discuss the philosophy of design in a future post, but for now, I simply list the major pros and cons of each approach.

I review some common approaches and a few novel ones. For each, there are images, details, and an example with full source-code (See ‘Members Resources’ below).

Table of Contents

1. No Manager
2. EmptyGO
3. SimpleGameManager
4. uMom
5. Custom MVCS
6. StrangeIoC

---

1. No Manager

This is your most basic approach. First-time Unity-developers often start with this technique. Here you put bowling ball code on the bowling ball, bowling pin code on the bowling pin, and ‘game win vs game loss’ code on something random, like the bowling ball too.

Because Unity’s ‘component-based’ approach is so intrinsically awesome (reusable code ‘components’ sit on 1 or more GameObject ‘entities’) you can indeed get very far using this approach. If you are coming from a hierarchical approach to gaming, learning the component-approach can be a challenge and your first projects may be of this ‘No Manager’ approach here in #1 or soon evolve to the ‘EmptyGO’ approach we see below in #2.

Diagram

Hierarchy

Type: Component-based

Pros:

• There are MANY free, useful tutorials created using this “No Manager” approach. So its easier to learn the basics of Unity this way.
• Flexibility for prototyping
• Intuitive for beginners, e.g. “Bowling-pin code goes on the bowling-pin”

Cons:

• It is the very definition of spaghetti code
• Very low scalability for teams (of 3 or more)
• Very low scalability for projects of intermediate or high complexity.

---

2. EmptyGO

This is a slight evolution beyond #1 above. Still you put bowling ball code on the bowling ball, bowling pin code on the bowling pin, BUT you try now to put all the rest of code which has no visual representation in the world onto an invisible or ’empty’ GameObject (GO). Hence the name ‘EmptyGO’.

This technique still has alot of drawbacks, but at least we begin to see game logic more centralized (on that EmptyGO). This aids readability for newbies working on your project, or for you after you return to an older project after a long time. You don’t need to hunt around everywhere to find your core code — most sits there on the EmptyGO.

Diagram

Hierarchy

Type: Component-based

Pros:

• More readable (than #1 above)
• Good mix of flexibility for prototyping (yet not AS much spaghetti code as #1 above)
• Intuitive for beginners, e.g. “Bowling-pin code goes on the bowling-pin”

Cons:

• Less testable
• Less refactorable (since less code is likely to be properly abstracted, decoupled, and reusable when compared to 3,4,5,6 below)
• Communication and referencing between GameObjects is likely too brittle (e.g. using GameObject.Find() or inspector target references)

---

3. SimpleGameManager

Probably the most mature technique which is in WIDE usage within the free tutorials and sample projects you find in the community is something like my SimpleGameManager technique. Imagine the ‘EmptyGO’ from #2 above, but now its a persistent (between scenes) Singleton.

Code still exists directly the GameObjects in the world, but whenever possible it calls centralized code [e.g. ‘SimpleGameManager.Instance.playSound (“GunShot”); ] Its a good approach and an appropriate (simple) solution for many small projects.

Diagram

Hierarchy

Type: Component-based w/ Manager

Pros:

• Ultra-fast setup (but with minimal functionality). Its more of a racetrack — where YOU must supply the race-cars.
• Persists between scenes, and if its not created it will create itself as soon as it is referenced (because its a Singleton).
• Ideal for prototypes (but thus not scalable)

Cons:

• Its not plug-and-play per say. The current workflow is to import the package and EDIT the core class, rather than use/extend.
• Not D.R.Y.
• Less testable. Much of your code STILL sits around on various GameObjects (like in 1 & 2 above).

Sample Game

• Coins And Platforms (Play The Game, View Video, Download Full Source-Code)

---

4. uMOM

My (unreleased) uMOM Asset Store project arose from a problem inherent in Unity. There is no default Main.main() type ‘hook’ to centralize the entry into your run-time and no default way for UI and code to persist from scene to scene. This was the genesis of the Unity Manager of Managers (uMOM), pronounced as /you-mom/. You can read more at the uMOM Dev Diary and see the status of the project (it has some issues). Here is a short summary of purpose and benefits;

The uMOM package allows developers to add one or many reusable, custom manager classes to the project. Each ‘start’ automatically, have a predictable life-cycle (reset, add, update, remove), optionally receive ‘update()’ calls, optionally run during edit mode, and optionally persist between scenes. Managers operate as singletons and can easily address each other to collaborate.

Types of uMOM Managers: Really anything is possible, but here is the short list of use cases I will address first. Use some of mine or none of mine – then create your own. Most any existing manager class you have can easily be converted for compatibility here. 

• uEventManager -Streamline messaging between classes. Replace the need for Unity’s clunky ‘SendMessage’ and instead dispatch strongly typed objects. (The uEventManager will also be available separately).
• Store references to audio clips (drag-n-drop) and control audio playback via C# from one place.
• GUIManager – Layout UI which optionally persists between scenes. Centralize the controls to handle clicks, etc…
• PoolManager – Optimize your run-time performance by persisting GameObject or prefab instances in RAM and displaying them as needed.
• LevelManager – Queue up levels and perform transitions (e.g. fade-in-out) between them.
• GameManager – While other managers are not project specific, this one likely is. Here you manage the core game mechanics, how the user wins and loses, store the score, etc…
• SaveManager: Takes care of saving and loading user preferences and achievements.
• MenuManager: Controls all menus, managing their animations, their contents, and their behaviors. Perhaps it heavily uses the GUIManager for layout.
• Much, much, more…

Diagram

Hierarchy

Type: Component-based w/ Manager

Note: The images and source-code for this architecture are not yet available.

Pros:

• Reuse code between projects. That is probably its greatest strength. Ultra fast to setup with mucho out-of-the-box functionality. Nice GUI!
• Have global access (also a con) to managers which are decoupled by discipline (GUIManager, LevelManager, AudioManager, etc…) each with a common interface and life-cycle.
• Scalable to large teams such as 4-10 developers (but may require more planning upfront and dedicated team members creating the managers vs. those using the managers)

Cons:

• The benefits of MVCS separation are not implicit ( but are possible ).
• More scalable to complex games than 1,2,3 above, but far less than 6 below.
• Still in alpha with bugs which prevent production-readiness.

---

5. uMVCS

For non-game projects, such as data-driven applications, there is a clear favorite in architectures; the Model-View-Controller-Service (MVCS or MVC). For the uninitiated, its where you separate your code into 4 areas; the data, the user interface, the core functionality, and any calls to/from backend-servers. It seems like OVERKILL at first, but once one is well-practiced he/she can drop in a template (e.g. Unity Package) and in 5 minutes  be ready to rock.

The “uMVCS” is a ultra-light framework I created myself. Its one of many, many setups for MVCS. I created recently, from scratch in just few hours for ACADEMIC PURPOSES ONLY. It is not complete and scalable like other implementations, but if you have never touched MVCS before, its a great way to learn.

Diagram

Hierarchy

Type: MVCS

Note: The images and source-code for this architecture are not yet available.

Pros:

• Great for learning
• Uses a custom event-dispatcher implementation of the observer pattern for decoupled communication from any scope to any scope.
• Heavy use of Singletons (also a con) allows access to the ‘architecture’ from any coding scope.

Cons:

• Purposefully incomplete, it exists just to help newbies learn about code-separation with MVCS.
• No command-pattern.
• I created it in 90 minutes. Ha.

---

6. StrangeIoC

Here we add to organizational benefits of MVCS the ease-of-development feature called inversion of control (IoC). To learn more. Here is the official Strange diagram of the MVCS overview and the StrangeIoC website.

Diagram

Hierarchy

Type: MVCS w/ IoC

Note: The source-code for this architecture is available below. It works great, but upon clicking to restart it breaks. Still working on that. Have a solution? Download the source and comment below this post. Please!

Note: Updated! Now see my complete article on StrangeIoC For Unity3D

Pros:

• Public, Community-driven, well-documented. (e.g. You can hire/contract a new developer who arrives with this skill on day 1)
• More decoupled, testable, & D.R.Y.
• Scales-up well for large teams, large projects

Cons:

• Slower to setup (but faster to add last-minute changes)
• Steeper learning curve, especially for junior developers
• Demands discipline/know-how from your team to put logic in its proper place (but removes the ‘where should we put that code?’ decision process)

Sample Game

• Spider Strike 3D (Play The Game, View Video, Download Full Source-Code)
• Paddle Soccer 2D (Play The Game, View Video, Download Full Source-Code)

---

What’s next?

Want to learn something more basic? Or are you ready for more advanced topics about UnityEngine and C#? Checkout my “Unity With Cocktails” HD Tutorial Video Series on C# and Unity.

Member Resources

[private_Free member]Enjoy this members-only content!

• Download Bowling Game source-code (1. No Manager )
• Download Bowling Game source-code (2. EmptyGO )
• Download Bowling Game source-code (3. SimpleGameManager )
• Download Bowling Game source-code (6. StrangeIoC )
• Update: April 2014 – I don’t think any more source will be added to this post, until I add a new architecture to the list some day.

[/private_Free member]

What are your thoughts?

Do you prefer an alternative to the suggestions above? Or do you have an additional recommendation? Please comment below.

[polldaddy poll=7611650]

Learn Unity 3D & C# – From Basics to Advanced

Unity3D is a powerful suite of tools (Project IDE, Code IDE, run-time) for game development. Read the full “Introduction to Unity3D” article and watch the videos below.

As always, RivelloMultimediaConsulting.com/unity/ will be the central location for deep articles and tutorials, Facebook.com/RivelloMultimediaConsulting (like us!) will engage the growing RMC+Unity community, and for the latest opinions and cool links follow me at Twitter.com/srivello.

Got Comments?

Please add a comment below on this post and include the video number. (e.g. “2.1 – I have a question about…”)

Table Of Contents

The videos and source-code are available below this table of contents for all topics marked with [Complete!].  Check back regularly for more videos.

1. Intro

• 1.1 Series Overview: Welcome  [Complete!]
• 1.2 IDE – Unity Editor: Learn the basics of project creation, setup, editing, and publishing.   [Complete!]
• 1.3 IDE – MonoDevelop Part 1: Explore this editor; create classes, code, debug, & compile.  [Complete!]
• 1.4 Demo Source Code: Where to download the source code & a quick overview of the demo project.  [Complete!]
• 1.5 IDE – MonoDevelop Part 2: Learn advanced IDE techniques and “What’s New In MonoDevelop 4.0”.

2. C# With Cocktails – Basic Programing

• 2.1 Programming – C# Primitives –  (e.g. int, float, string)  [Complete!]
• 2.2 Programming – C# OOP – Object Oriented Programming  [Complete!]
• 2.3 Programming – C# UnityEngine API Part 1 – Component-based thinking & communicating with GameObject & MonoBehavior. Bonus: Create a cube, texture it, and play a sound via Inspector window.  [Complete!]
• 2.4 Programming – C# UnityEngine Physics – – Colliders, Rigid Bodies, OnCollisionEnter  [Complete!]
• 2.5 Programming – C# UnityEngine 2D Part 1 –  Using Unity3D for 2D, Camera Setup, Draw calls  [Complete!]
• 2.6 Programming – C# UnityEngine API Part 2 – GUIText via C#, Sound via C#, Mouse/Key Input Via C#, Prefabs, 2nd Camera  [Complete!]
• 2.7 Programming – C# UnityEngine 2D Part 2 –  Learn advanced 2D techniques and “Intro To New Native 2D In Unity 4.3″.
• 2.8 Debugging – Debugging Basics Part 1 –  Overview of Finding and Fixing Errors in C#
• 2.9 Debugging – Unity Test Tools Part 1 –  Learn Unit Testing Via nUnit  [Complete!]
• 3.0 Debugging – Unity Test Tools Part 2 –  Advanced Topics

3. C# With Cocktails – Advanced Programming

• 3.1 Programming – C# Advanced Part 1 – Classes, Struct, Partial Classes, Singleton, Interface, Casting, Ref/Out, Conditionals, Loops, Collections  [Complete!]
• 3.2 Programming – C# Advanced Part 2 – Generics, Delegates/Actions/Predicates/Lamda, Threads, Extension Methods, Operator Overloading, Attributes, Preprocessor Directives  [Complete!]
• 3.3 Programming – C# UnityEngine API Part 3 (e.g. Custom Inspector, Custom Editor, Custom EditorWindow)
• 3.4 Architectures – C# Architectures Part 1 – MVC
• 3.5 Architectures – C# Architectures Part 2 – The StrangeIoC Framework 1  [Complete!]
• 3.6 Architectures – C# Architectures Part 3 – The StrangeIoC 2 : PropertyChangeSignal  [Complete!]
• 3.7 Architectures – C# Architectures Part 4 – Creating an ‘EventDispatcher’ Framework
• 3.8 Graphics –  Shaders – Creating custom shaders using ShaderLab

4. Asset Store Packages

• 4.1 Buy vs Build Theory – When is it best to buy a 3rd party plugin?
• 4.2 Package: iTween (Free) – Easily animate with code
• 4.3 Package: NGUI (Premium) – Create 2D & 3D UI interface elements and UI components
• 4.4 Package: PlayMaker (Premium) – Visual Scripting (Especially for Finite State Machines)

5. Complete Projects

• 5.1 Build Simple Game #1 – TBD 3D Action
• 5.2 Build Simple Game #1 With a Custom Game Manager – TBD 3D Action

Free Video Resources

Enjoy a few videos of free content! Sign-up to view the full video series in ‘Member Resources’ below and to access the complete source-code. Membership is free!

[tubepress mode=”vimeoAlbum” vimeoAlbumValue=”2490343″ orderBy=”title”]

Member Video Resources

[private_Free member]Enjoy this members-only content!

Source Code

• All videos Use This Project (link)

Videos

[tubepress mode=”vimeoAlbum” vimeoAlbumValue=”2490342″ orderBy=”title”]

[/private_Free member]

Want More Video Tutorials?

[polldaddy poll=7125741]

In my years of game development, I never wished for a tool (IDE) to create games without any programming. But I recently found one.

Maybe I never thought it would be possible. Maybe I never thought the games would be good. Maybe because I knew how to code, I didn’t care. The Stencyl Toolset from Stencyl, Inc. is surprising in both its ease of use and its flexibility to create a variety of games.

But can it replace traditional game-programming? Well, let’s take a look.

Pros of Stencyl (Paraphrased from Stencyl.com);

• Game Studio In A Box – Stencyl is a gorgeous, intuitive toolset that accelerates your workflow and then gets out of the way. In addition to the core tools, there is an included image editor called Pencyl and tile creation and editing tools for tile-based games (i.e. PacMan).
• Show and Tell – Use StencylForge the community-based toolbox of sprites and game logic to power your projects and share your knowledge.
• Design In A “Snap” – Drag-n-drop code like Lego-blocks. If you are a coder, I know this sounds SCARY. Check it out.
• Test it Fast – Run quickly using onscreen emulators for rapid code-test-code cycles. TBD on my opinion of the debugging features.
• Play It Everywhere – Publish to iOS, Flash, Windows, Mac & the Chrome Web Store. (Android / HTML5 Coming Soon)
• Make Money – Well, monetizing games is not unique to Stencyl of course, Stencyl has monetization features but there are many Pros of using one code-base for multiple platforms.

When and where it is manageable, I am a huge fan of using  and reusing the same project for multiple platforms. Stencyl 2.1 (current release) exports to Flash (Desktop/Browser) and Mobile (iOS). Future releases will publish to Android and HTML5.

Checkout the screenshots;

1. Create your game assets (backgrounds and sprites) using your favorite drawing programs or download them from StencylForge.
2. Setup your game sprites. These ‘Actors’ as they are called can be animated and controlled by the computer AI or by the user.
3. Setup your game logic. Stencyl’s most controversial feature is the logic system which requires NO PROGRAMMING. There is comprehensive documentation to help. Check it out.
4. Design your levels. You can drag and drop assets into a grid system or free-form layout. Whatever you like!*

* The potential to use Stencyl JUST for level creation on non-Stencyl projects has me very excited. I haven’t tried that yet, nor know if its possible. Post below if you have some ideas.

Create Assets or Use StencylForge	Setup Game Sprites
Setup Game Logic	Design Levels

Stencyl 2.x maintains separate engines for our Flash and iOS exporters. Something that the team admits has been a challenge to maintain. Stencyl 3.0 (release date TBD 2012) will use a single engine and language that exports native apps to Flash, iOS, Android, Windows, Mac, Linux and HTML5.

Getting Started

If you have setup a programming environment before (Flash, Flex, Java, HTML5), then you should find Stencyl VERY easy to setup and use. Its slick and mainstream in its ease of use from initial install through project building. If you have never used multimedia tools, it may be a bit challenging, but know that you are in good hands. Stencyl’s has some user experience (UX) hiccups, but it is, overall, very impressive.

Here are the links and tips;

1. Download The IDE – Stencyl and install it.
2. Go Through the Crash Course – After downloading Stencyl, I strongly recommend going through the Crash Course. If you’re launching Stencyl for the first time, you’ll be automatically asked to go through the Crash Course. If not, click on the Help Center button to find it.
3. Read Stencylpedia– After you’ve made your first game using the Crash Course, we highly recommend reading through the first few chapters of Stencylpedia (up to the end of Chapter 4).Stencylpedia will teach you the fundamentals of game creation through Stencyl, in a way that poring over many example games won’t do.
4. Inspect Free Games – You can learn a lot as a beginner by looking at the included games and free games on StencylForge. Exame the scenes, actors, and behaviors.
5. Watch My HD Screencast Video – Watch me talk you through as I create a complete game from start through finish. (See ‘Member Resources’ below)

Making ‘FlyerGame’

To learn Stencyl, I followed my own ‘Getting Started’ steps above and then created my own complete game. I used assets and game logic from “FlyerGame”, a game that I have recoded many, many times using game frameworks. The HD Video Screencast and source assets are available (See ‘Member Resources’ below).

Optimizations

With my simple tests, Stencyl games appear to run smoothly. It’s likely that performance problems are run-time performance problems (i.e. Flash or iOS) and not necessarily Stencyl performance problems.

Recommendations;

• Limit number of on screen actors – That’s the fundamental optimization. When not possible use ‘recycling’ (VERY IMPORTANT) which is Stencyl’s version of object pooling.
• Limit number of collisions – Stencyl uses Box2D for its physics engine, and the more Stencyl makes use of Box2D, the more calculations it’s performing in a given frame. Since collisions means the physics engine is working, more collisions means potential slowdown.
• Limit use of effects and transparency
• Limit overlapping actors (i.e. actors on top of actors)

Conclusion

I like Stencyl. I applaud what they are trying to do; create a simple tool to allow newbies to create games and veterans to create more games, more easily. I think many veterans will be turned off by Stencyl as a ‘toy’, and many newbies may be too shy to give it a try. I encourage both groups to give it an honest try. Above all I’m excited for the future of gaming.

Tools like [Stencyl] are yet another sign that game development can be both a great hobby to some and lucrative profession to others. – Me.

There are some other game studios I have yet to fully review such as GameSalad and GameMaker. Stay tuned. I may review them in the future.

Wait, No programming?

I make a few mentions here that Stencyl requires no programming. Really, to be more accurate you ARE coding, you ARE programming and quite deliberately. You have to understand all of the common game logic concepts. What are are NOT doing is typing. Instead you use drop-down menus – part of a layout which Stencyl calls the “block-snapping interface”. Very pretty, helpful, & intuitive. For advanced users there is indeed a code view and programming API (both currently AS3-only). Looking at the code is not only optional, it is not encouraged.

I have some strong opinions by code-generation tools (i.e. Adobe’s Dreamweaver), but I think there is indeed a large audience that can be served well by Stencyl’s ease of use. I am impressed with its power and flexibility. While not the creators intention, I also see Stencyl as a great tool for complete game developer beginners to learn all the fundamentals and then perhaps move on to a more traditional programming environment in the near future or distant future if they have the interest. Academically, Stencyl has fascinating potential too providing a language-agnostic approach to gaming for first year students, before they have the programming skills to power their creative ideas.

In short, after testing Stencyl, my opinion of it changed from just a ‘pretty toy’ to a ‘fun and powerful tool’. The roadmap provided on the Stencyl website looks fantastic too, rounding out more publishing options and hinting at a more robust tool too. Give Stencyl 3-4 hours of your attention over a weekend. It may very well change your mind for the better too!

The license pricing;

• 1. Stencyl 2.x – Publish Flash Games – Free!
• 2. Also Publish Desktop Games – $79 per year
• 3. Also Publish iOS Games – $149 per year
• Combo of 1,2,3 – $199 per year

Developer Q&A

Since I am new to Stencyl and Stencyl is so very different then other game development tools, I met with some Stencyl developers (newbies and veterans) to understand the PROs, CONs, and any gotchas that could help newbies learn from their mistakes.

PROs

• No coding needed (unless you want it) 
• Helpful community
• Cross-platform

CONs

• “Newbies must choose between limited ‘Free’ version and expensive ‘Pro’ version” – Game Developer, Urie Wilson 
•  The learning-curve on more complicated parts (lists, global attributes, collision shapes) can be intimidating

Gotchas

•  “Always save your project. [Stencyl may crash]” – Game developer, Ridhwaan Patel

Misc / Advice

• Stencyl works well with Pencyl (image editor)
• “Start Small. Reconstruct retro projects like Tic-Tac-Toe, Pong, Pac-Man, & Space Invaders. These simple, familiar games offer many challenges to newbies.” – Game Developer, Djamel Berkaoui (aka Satyre)

Next Steps

After ‘Getting Started’ and following my HD Video Tutorials, here are more resources to fuel your Stencyl savvy.

• VIDEO: Welcome To Stencyl – Watch the HD Screencast Video Tutorial*
• VIDEO: Flyer Game With Stencyl – Watch the HD Screencast Video Tutorial*
• Start with the Stencylpedia – Online. Its the instructions manual. Also checkout the blog and the product roadmap.
• Find common answers – The forums are best when you’ve got a specific question to ask.
• Ask a new question – The Chat Room is great for seeking real-time help.

*See ‘Member Resources’ below.

NOTE: All Member Resources are coming soon. Videos and code downloads are NOT yet available.

Member Resources

[private_Free member]Enjoy this members-only content!

NOTE: All Member resources are coming soon. Videos and code downloads are NOT yet available.

Source Code

• None yet

HD Screencast Videos

• None yet.

[/private_Free member]

Developing iOS apps using CocoaTouch and XCode is great. Creating games however is a challenge.The tools are just geared to app development I think.

Developing Java-based Android games seems pretty horrible all around. Java is great (powerful but not easy), but the code-test-code development cycle leaves much to be desired.

Luckily there are 3rd party SDKs that create native iOS and also native Android projects geared for gaming. One of those is the Corona SDK from AnscaMobile.

Benefits of Corona SDKfor iOS/Android Development (In AnscaMobile’s words);

• Build Apps 10x faster – Corona’s framework dramatically increase productivity. Tasks like animating objects in OpenGL or creating user-interface widgets take only one line of code, and changes are instantly viewable in the Corona Simulator. You can rapidly test without lengthy build times.
• Same code, multiple stores – Corona is the only complete solution for developing across platforms, OS versions, and screen sizes. You can write once and build to iOS, Android, Kindle Fire or Nook Color at the touch of a button — Corona will automatically scale your content across devices from phones to tablets.
• Simple, powerful APIs – Make use of advanced features using just a few lines of human-friendly code. For instance, you can implement realistic physics in your game with just five lines! Corona’s ease of use is what allows developers from indies to major studios to create #1 chart-topping apps, games, and eBooks.
• Create engaging experiences – Say goodbye to cookie-cutter apps. Whether you’re creating branded apps, graphically rich games, or interactive eBooks, Corona gives you everything you need to go beyond the ordinary. It’s easy to make your apps behave and look exactly how you want them to.
• Cut costs. Monetize faster – Corona enables you to produce top titles without big studio budgets. And thanks to Corona’s integrated support for in-app purchases, banner ads, and offer-based virtual currency, you can monetize faster and easier than ever before.
• Join developers like you – Corona boasts a very generous and knowledgeable community, a plethora of 3rd party tools, as well as a shared code repository where users can download and share helpful libraries and snippets with one another. We also have 347 Corona SDK studios across 47 countries worldwide

Pro’s and Con’s of Corona (In my words)

I have used Corona SDK for about 5 hours. I’m new.

• Lua is very very fast.
• The code-test-code cycle is the best setup I’ve ever seen. Its so fast, just save your latest lua file and *poof* the project compiles and growl (on Mac) shows an error or not and your project is already running with debug output. (Now if I can just get the LDT IDE to handle debugging. I can, soon!)
• Lua is not OOP. Corona is not component based. Without built-in OOP or built-in component based gaming (like Unity for example), development with Corona leaves much to be desired.
• Its 2D only (good or bad, depending on your preference)
• No great IDE yet.
• Graphics are raster-based – So its a fast, but not easily reusable graphics pipeline.
• Compared to HTML5 it has good multimedia capabilities. Compared to Flash it has horrible multimedia capabilities

Getting Setup

The steps to get started are to download the Corona SDK, choose your favorite text editor (I’m using Lua Development Toolkit), and run Corona’s Simulator on one of the sample projects to prove you’ve got it all setup properly.

We’ll show the provided ‘Bridge’ project which is a physics demo of some circles falling on a monkey-bridge.

Here are the links to get setup and publish a sample project;

1. Download the free, unlimited-use Corona ‘Trial’ From AnscaMobile.
2. Download the free, standalone Lua Development Toolkit (LDT) IDE from Koneki.
3. Run LDT. You use LDT to setup the project and edit the code, but NOT for Corona code completion, NOT to compile and NOT to debug. I’m confident that all of that is possible, but I’m not yet sure how.
4. Right-Click the ‘Script Explorer’ and choose ‘New Lua Project’
5. Name it ‘Bridge’, choose ‘Create Project…’ and point to local url on your machine for ‘CoronaSDK/SampleCode/Physics/Bridge/’ where you installed the SDK.
6. Open ‘CoronaSDK/SampleCode/Physics/Bridge/main.lua’, by clicking it in the ‘Script Explorer’. Don’t edit it. Just look at it.
7. Run the ‘CoronaSDK/CoronaTerminal.app’ (on Mac). It will open terminal and also the Corona Simulator.
8. In the Corona Simulator choose ‘File -> Open…’ and choose ‘CoronaSDK/SampleCode/Physics/Bridge/’. This will run the Bridge project in the Corona Simulator (an onscreen iPad emulator) and show any debugging output in the terminal.
9. Done.
10. Now without closing the Corona Simulator or the Corona Terminal, edit the ‘CoronaSDK/SampleCode/Physics/Bridge/main.lua’ file. Add the line ‘print (“hello”);’  without outer quotes and save the file. Upon save the Corona Simulator and Corona Terminal will automatically re-run the project. Nice!

Hello World Project

Typically a Hello World program illustrates the quickest way to get anything (such as text) onto the screen and publishing (or compiling) without errors.

In this post I have also added a few things. We see classpathing (‘com.rmc….’), a custom super class, and examples of publicity and privacy for class members.

The Project Output

Here is the example running. Corona’s included device emulator (“Simulator”) is in iPad mode. Other modes are available.

Debugging: Corona shows your debugging output too (using Terminal for example on Mac OSX). Simulator & Debug Window

The Project File Structure

Corona has many great demo projects included. Each project sits in its own folder. All files for a project sit within without using subfolders. I read on several blogs that while the Corona simulator allows for subfolders, that iPhone and/or Android does not. There are workarounds.

A development environment that does not allow for folders is ridiculous & irresponsible. – Me.

You’ll see my examples all feature a folder structure. For now, they run in the Simulator and that’s all I care about. I assume full folder support will come at some point in the future. If not, you can remove the subfolders from my demos before you start your final code.

HelloWorldOOP File Structure

Document Class

Lua doesn’t support OOP. Corona doesn’t support OOP. However it is possible to fake it.

I learned a good bit from Ludicroussoftware.com’s post, and JesseWarden’s post. There is more info about scope too.

The document class is the main entry point for your application. By default the builder looks for ‘main.lua’, and runs it. It is a required file and it kicks off the run-time of your project.

The lua file format shown here is my own creation. I use it for the main.lua file and then within any ‘classes’ which I create.

[actionscript3]

————————————–
— Imports
————————————–
local TemplateClass = require ("com.rmc.projects.helloworldoop.TemplateClass");

————————————–
— Metadata
————————————–

————————————–
— Main Entry Point
————————————–
display.setStatusBar( display.HiddenStatusBar )

–CLEAR OUTPUT
print ("");
print ("");
print ("  ——————-  ");
print ("  — HelloWorldOOP —  ");
print ("  ——————-  ");
print ("");

–CREATE
local templateClass = TemplateClass:TemplateClass();
print ("    samplePublicVar    : "..templateClass.samplePublicVar);

–TEST MEMBERS
local samplePublicMethod_str = templateClass:samplePublicMethod();
print ("    samplePublicMethod_str           : " .. samplePublicMethod_str);

[/actionscript3]

1. Imports

There are no true ‘imports’ in Lua, nor in Corona. The ‘require’ statement fetches a separate lua file and includes it in the current lua file. In my usage this essentially ‘imports’ the custom ‘class’ of ‘TemplateClass’.

2. Metadata

While not shown here in main.lua, within some classes there are ‘module’ statements (and others?) that help Corona/Lua know how to treat the current file. I call this ‘metadata’.

[actionscript3]

————————————–
— Imports
————————————–

————————————–
— Metadata
————————————–
module (…, package.seeall)

————————————–
— Class Methods
————————————–
— PUBLIC STATIC
–[[
This method is designed to…
–]]

————————————–
— Class Properties
————————————–
— PUBLIC STATIC
–[[
This property is designed to…
–]]

————————————–
— Class
————————————–
–[[
This class is designed to…
–]]
function TemplateClass()

————————————–
— Properties
————————————–

— INSTANCE
–[[
This is a self-reference required by OOP structure
–]]
local me = {}

— PUBLIC
–[[
This property is designed to…
–]]
me.samplePublicVar = "samplePublicVar";

— PRIVATE
–[[
This property is designed to…
–]]
local _samplePrivateVar = "samplePrivateVar";

————————————–
— Constructor
————————————–
–[[
This is the constructor…
–]]
function me:constructor()

–TRACE
print ("TemplateClass:constructor()");

–METHODS
me:initialize();

–RETURN
return me;
end

————————————–
— Methods
————————————–

— PUBLIC
–[[
This is the initialize.
–]]
function me:initialize()

–TRACE
print ("TemplateClass:initialize()");

–DRAW

end

–[[
This method is designed to…
–]]
function me:samplePublicMethod()

–Test Private — It Works!
local _samplePrivateMethod_str = _samplePrivateMethod();
print (" _samplePrivateMethod_str : " .. _samplePrivateMethod_str);

return "samplePublicMethod";
end

— PRIVATE
–[[
This method is designed to…
–]]
function _samplePrivateMethod()
return "_samplePrivateMethod & ".._samplePrivateVar;
end

————————————–
— Events
————————————–

— PRIVATE
–[[
This event handler is designed to…
–]]
function _onSampleEvent()
return "_onSampleEvent";
end

— RETURN INSTANCE VIA CONSTRUCTOR

return me:constructor();
end
[/actionscript3]

1. Class Definition

In my solution I place the ‘TemplateClass’ class in its own ‘TemplateClass.lua’ file and treat it like a Lua ‘module’. You can see in ‘main.lua’ how I import and create an instance of ‘TemplateClass’.

2. Static vs Instance Members

The instance members in this demo work great. I had static methods and static vars working too, but broke them somehow. I have removed them from this demo. I’m confident is possible.

3. Publicity / Privacy

The instance members in the demo feature full, working publicity and privacy. Nice.

4. Inheritance

I have not included inheritance in this demo, but it is possible. I’m working on a simple game that I will post soon. I have 3 generations of inheritance going on and it works FAIRLY well. For my onscreen objects I extend using ‘display.newGroup()’ as a base. It is a bit ugly how to override methods (See the Ludicroussoftware.com link above), but it works. I’ll post that in the future.

The Output

[actionscript3]
Copyright (C) 2009-2011  A n s c a ,  I n c .
Version: 2.0.0
Build: 2011.704
The file sandbox for this project is located at the following folder:
(/Users/srivello/Library/Application Support/Corona Simulator/HelloWorldOOP-27E895459A9154336232E091AB34F950)

——————-
— HelloWorldOOP —
——————-

TemplateClass:constructor()
TemplateClass:initialize()
samplePublicVar : samplePublicVar
_samplePrivateMethod_str : _samplePrivateMethod & samplePrivateVar
samplePublicMethod_str   : samplePublicMethod

[/actionscript3]

1. Output Tool

By default the output comes through your Terminal (on mac). There is setup to get the output to come through Lua Development Tools (or other Eclipse based editor with the Lua Plugin). Once you build once, you leave the terminal and emulator open and just edit and save your code as you like. With each save, the simulator AUTOMATICALLY reruns the app and the terminal shows the output. The ‘build time’ is 100 Milliseconds or so. The speedy iterative development is great.

2. The Output

You can see in the output example above, the first few lines are outputted by Corona itself, then your custom

Conclusion

I created this demo as part of my evaluation of various mobile programming languages (Lua) and development environments (Corona SDK and Lua Development Tools). Coming from a (objectively speaking) really really spoiled development environment of Flash game development, I have the same basic gripes with Corona as I do with HTML5 gaming. The language (lua) is not fit for OOP. It is not intended to do so. Lua and Corona are indeed LIGHTNING FAST both at compile-time and at run-time. That is fantastic and cannot be under-stated.

The Corona SDK community is growing and offering some add-ons;

• Lime – Tilebased gaming
• PubNub – Multiplayer Gaming API
• More community projects…

And now a few tangents…

Do I Need OOP?

No. But for me an implied architecture (implied within the built-in language features) of OOP or component-based development greatly speeds up development for me. I’m able to get more feedback from the IDE and reuse code more effectively. Many developers prefer procedural programming. I’m not sure why. If you have an opinion please post below. We will see TONS more gaming built upon the horrible limitations of JavaScript. If you love JavaScript, that is great. For me its not the right tool for game development.

Some OOP Solutions for Corona;

• My TemplateClass solution shown in this post. It is not a complete solution, but it shows Lua language-features to mimic OOP.
• LCS (Lua Class System) – I tested it. Works!
• Classes.lua – I haven’t tested it yet.
• OWL (Objects With Lua) – Nice name! I haven’t tested it yet. Here’s a blog about it.
• CooL (Corona Object-Oriented Lua)– I haven’t tested it yet.

Upon a quick look, each appears to be valuable. Not sure which is the most full featured yet. In the future I may create a demo of each for comparison’s sake and blog about it.

Do I need a strong IDE?

Yes. I’m dumbfounded by developers who defend using text-edit as their tool of choice. Sure there is an warm-fuzzy feeling about being so ‘raw’. But an honest appraisal of your productivity will trump that if you are a serious contributor to your industry. Spend a few hundred dollars, spend a few thousand dollars on performant hardware and legally-licensed software designed for your productivity. Be a professional.

Game Development Environment Utopia

In my research in gaming technologies (Many, many HTML5 frameworks, Flash Platform, Unity3D, iOS, Android, Cross-platform iOS/Android), I am evolving an idea for the ideal game development setup. This list will probably change over time. The dream is a setup that works for small game projects and can scale up to large team projects.

• Fast Code-Test-Code Cycles – Under 1 second allows for optimal iterative development
• Fast Run-Time Performance – Stable 30 frames per second or greater across target devices
• Great IDE – Project creation, project compilation, project debugging (breakpoints, stack/heap introspection), intellisense on built-in and custom libraries, etc..
• Strong Typed Language – Implicit intent in your design, IDE-feedback/errors/auto-fixes, generics, deep refactoring, etc…
• Scalable Graphics Pipeline – To facilitate multi-screen development. Vector source with run-time conversion to raster seems to be the best setup yet for 2D. Streaming textures is ideal for 3D.
• Implied Architecture – OOP (ex. Java) and/or component based (ex. Unity3D)

Stay Tuned

• I have created a complete game using Corona. A tutorial, HD Screencast Video, and full source code are coming soon.

Questions for the Readers

• Do you a better OOP setup? Fork my code and push a solution. Great!
• Know how to setup LDT to show debug output and breakpoints? Post a comment below!
• Can you setup LDT to show intellisense (auto complete) for the Corona SDK classes? Post a comment below!

New Corona Book Released!

Packt Publishing has published a new exciting book on Corona SDK – Corona SDK Hotshot!

If you’ve used the Corona Software Development Kit to build your very first new mobile app, you already know how easy it makes developing across all the pieces of this fragmented market. This book upgrades your knowledge of Lua and the Corona API with designs, habits and advanced concepts to speed your development and create more exciting apps.

Corona SDK Hotshot will show you how to combine advanced Lua features such as coroutines and metatables with Corona’s sophisticated tools, including physics and networking, to develop exactly the game or app you or your customers need, quickly and with an eye towards updating your app with improvements in the future.

Corona SDK Hotshot will expand your basic knowledge of Corona with an insight into making the most of its event platform, using physics wisely and easily, and moving on to advanced programming tasks like path-finding.

You will focus heavily on how to keep your programs understandable as they become more complicated, by using modules and events to divide it up. You’ll practice ways to make AI scripts and map files easily understandable to designers and other collaborators, and use networks like GameCenter to publish progress.

The last projects will combine the full range of covered material to illustrate how you can produce sophisticated and exciting apps as a Corona Hotshot!

Using a project based approach you will learn the coolest aspects of Corona SDK development. Each project contains step- by-step explanations, diagrams, screenshots, and downloadable materials.

Get the book here: http://www.packtpub.com/corona-software-development-kit-hotshot/book

Next Steps

• Hello World – Download the full source code*
• Hello World OOP – Download the full source code*
• Hello World OOP – Watch the HD Screencast Video Tutorial*
• Checkout More Tutorials on LearningCorona.com (Fantastic!) and DesignerSandbox.com

*See ‘Member Resources’ below.

Member Resources

[private_Free member]Enjoy this members-only content!

Source Code

• Download the full source code to all projects mentioned in this post.

HD Screencast Videos

[tubepress video=”43251034″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[/private_Free member]

In a recent article I overview the major community/commercial projects in HTML5 for HTML5 Game Frameworks as well as HTML5 App Frameworks. One of the app frameworks I listed there is the Sencha Ext JS 4 Application Development Framework. This post serves as a tutorial to get you started.

The full source code and 3 HD Screencast Video are available far below. For general questions. please comment below. For RMC’s Consulting services, please contact us today!

Before You Start

Before you follow along with this tutorial you’ll need to setup the development environment for Sencha. This includes a web browser, a web server, and a text editor (or code IDE). I’m using a Mac Computer  w/ Chrome Browser, Mac Web Server, and Komodo Edit. I’m new to Komodo Edit and cannot yet recommend it.

Follow the setup instructions here in the Sencha Getting Started docs.

1. Hello World For Application Development

Typically a Hello World program illustrates the quickest way to get anything (such as text) onto the screen and publishing (or compiling) without errors.

In this post I have also added a few things. We see a Sencha component (Viewport), Sencha classpathing (src), a custom super class, a custom subclass, and an example of a mixin class (which allows for something like multiple inheritance).

The Project Output

Here is the example running. I show it running in both Desktop browser and iOS (through an emulator I have – provided by Apple, not Sencha). Sencha also offers a ‘Sencha Touch’ library that is built specifically for mobile. I’m NOT using that here. I’m just using the mobile browser to show (not-specifically-mobile) HTML5 content. Works pretty good.

Debugging: In the chrome window, its clear that the bottom is using Chrome’s Built-In View->Developer->Developer’s Tools which Sencha outputs to very nicely.

In Chrome on Mac

In iOS (Via Emulator)

The Project File Structure

Sencha’s official getting started recommends some (optional) folder structure. I choose something I feel more comfortable with here;

The Entry Point

You can see the index.html loads 3 external files.

[gist id=”1894698″]

1. Styles

I’m using the default CSS I found in some basic tutorials. I have not yet added/edited any styles. In the future I’ll study more on what’s possible.

2. Libs

There are a few choices that ExtJS gives you out of the box, each with their own distinct advantages or disadvantages. You only need to use one.

Here is a rundown of each of the files.

• ext-all-debug-w-comments.js – Debug version of the entire framework, with comments. This is the largest file of the bunch and requires the most processing to display in browsers.
• ext-all-debug.js – Same as above, but without the comments. Still very large, but very good for debugging in most cases.
• ext-all.js – The entire framework concatenated and minified. Debugging is impossible with this file, so it should be used for production systems only.
• ext-debug.js – This file contains the Ext JS foundation and white-space. With this file, you can remote load all of Ext JS as needed, and it provides the best debugging experience. The tradeoff is that it’s the slowest.
• ext.js – The minified version of ext-debug.js.

3. App

The app.js file is the entry point for your custom code. It is where you put all your custom stuff as well as the ‘src’ folder and the ‘assets’ folder.

Within my custom code I show off a few interesting things;

Components

I have not dug deep into Senchas Component library but DAMN there are many good looking components. There are components for Accessibility, Grids, Charts, Tabs, Windows, Trees, Layout, Managers, Drawing, Drag and Drop, Toolbars, Menus, ComboBox, DataView, Forms, MVC, and more!

Here is a simple example of a ViewPort (basically a 100% 100% canvas within-which you can put panels or other things).

[gist id=”1894732″]

Classpathing

Sencha has a nice way to separate your code into classes and your classes into packages. The root of all your packages is your source folder or your ‘classpath’ in Adobe Flex parlance – if you are familiar with that. Classes/packages help greatly with both organization and debugging (breakpoints and errors show you (more) clearly where the problem is).

First we configure one (like here) or more classpaths

[gist id=”1894577″]

And to load and use a class from the main app…

[gist id=”1894638″]

I read in the documentation that the process is called ‘dynamically loading’ of classes. Coming from Flex, I thought ‘dynamically’ meant something really special. But it doesn’t. It means this ‘feels just like Flex  – Classes can import each other as needed, and then you just run the program’. Since JavaScript does not natively support OOP development just about every HTML5 framework requires the developer to use some framework-level conventions to mimic OOP. In the case of Sencha it seems to work quite nicely.

Here is the super class.

[gist id=”1894665″]

Here is a subclass which extends that super class.

[gist id=”1894679″]

Here is a mixin class which the subclass uses.

[gist id=”1894685″]

2. ExtJS MVC Template

If you enjoyed (and understood) the ‘Hello World’ example above, here is something more advanced for you.

In the spirit of the Robotlegs MVC Templates I created for AS3/Flex projects, I created an ExtJS MVC Template.

The idea of the template is to create (and later evolve slightly) a polished, simple example of an MVC app. This can serve as a starting point for all new ExtJS projects. MVC is a popular methodology to separate the model (data), view (user interface stuff), and controller (the ‘what’ that happens when you click UI and stuff).

The app features a simple ui with ‘load’ and ‘clear’ buttons. The load (See ‘Figure 1’) button from the view communicates to the controller which loads data from the model into the view. Clear works in a similar way (See ‘Figure 2’). Its very basic, but illustrates some key concepts about Sencha.

Figure 1.

Figure 2.

Checkout the full source code and 3 HD Screencast Videos (See ‘Member Resources’ below).

Conclusion

As part of my evaluation of HTML5 App Frameworks, I need to look at some other frameworks before I give an educated opinion. However, I’m happy with what I see in Sencha. The language looks good, the styling appears to be very flexible and robust, and the components (from a user’s perspective) look and feel great.

Some things I’d like to do next; I may try to make a blog reader app to load xml, parse it and populate a data grid as a future project with Sencha. I’d like to create a more complex OOP example which includes private/public members and fires events. All of which I know how to do, but have not documented yet. I’d also like to create a Sencha Touch demo or 2, which I think will be 99% identical code, but more suited for running on mobile as an app rather than the demos above which are for web browsers.

Next Steps

• Hello World – Download the full source code*
• Hello World – Watch the HD Screencast Video Tutorial*
• ExtJS MVC Template – Download the full source code*
• ExtJS MVC Template – Watch the HD Screencast Video*
• For general questions. please comment below. Thanks!
• For RMC’s Consulting services, please contact us today!

*See ‘Member Resources’ below.

Member Resources

[private_Free member]Enjoy this members-only content!

Source Code

• Download the full source code to all projects mentioned in this post.

HD Screencast Videos

[tubepress video=”39885869″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[tubepress video=”39857820″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[tubepress video=”39857830″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]
[/private_Free member]

Learn Adobe’s ActionScript 3.0 – From Basics to Advanced

ActionScript 3.0 (AS3) is a powerful object-oriented programming language with similiar roots to JavaScript. One could say that ActionScript 2.0 was equivalent to JavaScript and AS3 is a much more mature version with support for classes, interfaces, namespaces, events, and more. This video series is designed to give new programmers a perfect place to start. There is also content for advanced programmers too.

Next Steps

Download the complete tutorial source code (See ‘Members Resources’ below) and watch these great videos:

1. IDE (Code Editors)

• 1.1 Flash Builder: Install & Project Setup (See ‘Resources’ below) (Watch Video)
• 1.2 Flash Professional: Install & Project Setup (See ‘Members Resources’ below)
• 1.3 FDT: Install & Project Setup (See ‘Members Resources’ below)

2. Basic Programing (via Flash Builder)

• 2.1 AS3 Basics With Cocktails: (See ‘Members Resources’ below)

3. Advanced Programming (via Flash Builder)

• 3.1 AS3 OOP Programming With Cocktails: (Coming Soon…)
• 3.2 Design Patterns With Cocktails: (Coming Soon…)

4. Frameworks (via Flash Builder)

• 4.1 PureMVC: (See my complete “Intro To PureMVC” tutorial article.
• 4.2 Robotlegs: (Download full source-code for my “Robotlegs Template” project.)

Resources

• 1.1 Install & Project Setup (Watch Video)

Member Resources

[private_Free member]Enjoy this members-only content!

• Download the complete tutorial source code
• Click the video thumbnails below to watch the videos.

[tubepress mode=”vimeoChannel” vimeoChannelValue=”285406″ hqThumbs=”false” ]
[/private_Free member]

Want More Video Tutorials?

[polldaddy poll=5983808]

Now And There

One of my companies is Now And There. The website NowAndThere.com was launched ages ago, and is updated regularly with new blog articles. Currently users come via Google search or perhaps following a Twitter post and arrive to read an article or two. There is no login. Its just a simple blog. I would like to add membership to the site.

This RMC post is a fantastic, thorough tutorial on the before and after of a membership website. It includes text and images here in the post. Below the post there are 3 great HD Screencast Videos (See ‘Member Resources’ below) which repeat what we have here in the post plus much more!

Why Add Membership?

I would like to increase traffic on NowAndThere.com. The 2-prong goal is to get traffic and then keep traffic. Getting new traffic is outside the scope here, but I figure once people visit, I’d like them to stay for a while and even return another day. I think a newsletter (monthly, quarterly, etc…) is a great way to invite current readers back to the site. But, if users are going to express interest in a newsletter and fill out a form (with at least their email), why not keep them as ‘members’? With membership I can offer the newsletter as well as exclusive content. Plus by keeping some content for members only, I can encourage more casual readers to become members (and thus receive the newsletter. I’m rambling, but for me membership + newsletter is the best plan to meet my goals.

1. The Plan

The site currently (See ‘Figure 1’) features no membership. We will change the page layout to provide a membership widget (See ‘Figure 2’).  This membership will allow for non-members to log-in/sign-up and allow logged-in members to see their membership information and to log-out.

Figure 1.

Figure 2.

Membership allows to protect (or restrict) the content on the site for certain members. Its a fairly flexible content. A site could have an entire site that requires membership or just select content which require membership. A site could offer just one level of membership or have multiple levels (at various prices for example).

An analysis of how I would like the site to work is as follows (See ‘Figure 3’). I would like the site’s content to be unprotected by default, but to offer a quick, free membership sign-up to see some posts and in some specific cases to see some parts of some posts. In a broad sense its a 90% unprotected site, with 10% of the content that requires membership. My idea is to encourage sign-up WITHOUT turning away the casual readers. I can always change the 90/10 balance in the future as I see fit.

Figure 3.

The schemes shown (See ‘Figure 3’) will work as follows;

• Scheme #0 – Unprotected content. No membership required. (See ‘Figure 5’ for an example)
  
• Scheme #1 – An unprotected post which gives the gist of the story and then protects the rest  (See ‘Figure 6’ for an example)
• Scheme #2 – A protected post. Users will see it listed on the front page, but cannot see any of the post without membership. (See ‘Figure 7’ for an example)
• BONUS – This last scheme is a modified version of #1 where the entire post is unrestricted and only a list of links at the very bottom is protected. (See ‘Figure 8’ for an example)

Figure 4.

Figure 5.

Figure 6.

Figure 7.

Figure 8.

2. The Process

The Membership Plugin

As mentioned before (See ‘Figure 3’) the NowAndThere.com website was created with the popular website creating tool WordPress. If you are new to WordPress, checkout my complete WordPress: Install & Introduction post which includes HD screencast video. To add membership to NowAndThere we will be using the Wishlist Member (WLM)Wordpress plugin.  If you want to know more about the plugin, read my Wishlist Member WordPress Plugin Review post or simply follow along with the tutorial post you are currently reading.

Before You Start

In addition to this post and the 3 HD screencast videos (See ‘Member Resources’ below) I recommend reading the features on the Wishlist Member website’s features section, the showcase of example websites, the support/documentation, and review the extensive Wishlist Member video series.

All of this will help you learn – what is possible, what you want to do, and how to do it.

Installation

First, do a complete backup of your website. I recommend that before any website development, especially significant development like this.

Second, you must purchase and download the plugin from the Wishlist Member website. Then access the admin of your existing WordPress site, visit the plugins page, and upload the new plugin. Activate the plugin. You will notice (thankfully) that after activation your site has not changed. This allows you to install the plugin safely without changing your user experience.

Setup

Now that the plugin is activated you will begin setting up the plugin. During the course of this process your website will be in limbo. Your user experience will change. For instance you may restrict access to a page but not yet add the widget allowing users to sign-in. So no one can reach that page. This is ok. Its just something to remember. You will want to plan well to minimize the effect on your users. Depending on your familiarity with WordPress and Wishlist Member and the complexity of your site and content protection scheme the entire process may take hours or days of development.

Here is the ordered approach I used with NowAndThere after activating the WLM plugin;

1. Access the WLM dashboard within your WordPress admin
2. Add licensing information you get via email from WLM
3. Follow the ‘Setup Wizard’
4. Add the Registration Widget to your Sidebar
5. Create Membership Levels (I created just 1)
6. Add/Edit Error pages. This is what users see during the sign-up process, sign-out process, and other situations
7. Edit the WL Member » Settings » Protection Defaults
8. Edit the WL Member » Settings » Protection Defaults » “Text to display for content protected with private tags”. This is what users see for Scheme #1.
9. Edit the WL Member » Settings » Email Text. This is what users see during the sign-up process.

—

Expert Tip: Open two web browsers. With #1 – log-in to WordPress and the WordPress Admin. Open your website too (like a logged in user). With #2 – do not log-in to your website. Open the website (like a non-logged-in users). This way you can easily test the logged-in and not-logged-in experience during your development.

3. The Result

Since starting this post, obviously the NowAndthere website has been updated. It now has full membership integration. Nice!

I have not yet added the newsletter. I will gather some members for a while and then use a 3rd party email system, such as MailChimp.com to send my first newsletter to all my current members next month or next quarter.

Ready to see the results? Great. Remember you must sing-up to NowAndThere (click here) to see the logged-in experience and log-out (use the sidebar widget) to see the logged-out experience. Have fun!

Live Examples of each protection scheme;

• Scheme #0 – NowAndThere – 9.5 Simple Habits to Make Your Life Better
• Scheme #1 – NowAndThere – Considering Sicily
• Scheme #2 – NowAndThere – 2012 Annual Preview Of Goals
• BONUS – NowAndThere – Small Countries Worth Visiting

Next Steps

• Watch the 3 HD screencast videos (See ‘Member Resources’ below). This complete post is explained with commentary and examples.
  

Member Resources

[private_Free member]Enjoy this members-only content!

HD Screencast Videos

1. Before

[tubepress video=”39631686″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

2. Planning & Installation

[tubepress video=”39809293″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

3. The Results

[tubepress video=”39842809″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[tubepress video=”39857791″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

[/private_Free member]

Creating a blog can be and start blogging. However if you want your blog to sit on your own domain (i.e. TravelingIsSuperFun.com), then the following setup is a great start.

These instructions help you to create a new website running WordPress. WordPress is a fantastic, free website-creation tool that is popular and powerful. Its ideal for blogs or simple page based websites. It can integrate handle Flash media and e-Commerce business, but that is far outside the scope of this article.

This article assumes you have no web presence whatsoever, except a personal email, which we will use only sparingly.

HD Video Screencast

[tubepress video=”35649750″ embeddedHeight = “350” embeddedWidth = “550” showInfo = “false”]

ONE TIME SETUP

Web Host Setup

First you will need space to store your files. You can think of this as a harddrive, but one that is not on your computer. It exists in a building far far away. This way you can access the blog from anywhere on any computer, and so can your audience who reads your blog.

There are myriad options for a web host. I chose one ages ago, and always use it; DreamHost.

• Open your favorite web browser
• Browse to https://www.dreamhost.com/
• Sign-Up for your free Dreamhost Account.

Domain Registry

You can think of the domain as the front door to your blog. You can send anyone in the world your domain and they can access you. Its kind’ve like how an email address allows anyone send you an email – but the domain let’s anyone find your blog.

• Sign-In to the web panel. This is the Dreamhost Admin
• Add a New Domain. You may choose any name you like, as long as it doesn’t exist, but I recommend one long word without dashes without underscores ending in “.com” (i.e. “TravelingIsSuperFun.com”)
• Open your favorite web browser
• Waiting? Browse to your new domain (e.g. http://TravelingIsSuperFun.com). Most likely it is not ready yet. It will take “1 to 3 days” before we can Install WordPress per below. There is no way to speed this up. Just check back and when your domain shows “something”. Then you are ready to continue. While you wait you can “Setup New Email”. This is the only step you can do while you wait.
  Setup New Email

Certainly you already have a personal email. This is the one you likely used when you signed up with DreamHost per above. However for many reasons having a domain-specific email is beneficial (e.g. sammy@TravelingIsSuperFun.com). It looks more professional, and it helps separate your blog emails from your personal emails. It is unlikely you will receive much emails, unless you choose to distribute this email or list it on your blog. I do both.

• Sign-In to the web panel. This is the “DreamHost Admin”
• Add New Email. There you will see an option to “Create New Email Address”. Leave all settings as default, except these. Customize these settings;
  • Email Address
  • Mailbox Name
  • Password
• Choose “Create Address”
• Now Access Your Email To Test It. Enter your username and password at the “Webmail for your Email Account” (e.g. http://webmail.TravelIsSuperFun.com/ )

Install WordPress

Are all steps to “Domain Registry” complete? All of them? Sure? Ok then continue here.

WordPress will be the scaffolding for your entire site. It will be the graphics and text the user sees as well as the administration panel that you access to add/edit/remove content to your blog. There are mountains of great tutorials, videos on youtube, and books on the subject.

• Sign-In to the web panel. This is the “DreamHost Admin”/li>
• Add WordPress. Click the WordPress icon. It is located at the horizontal center and vertical center of the page.
• Choose “Simple Installation”.
• There are 4 form fields and one dropdown. Leave the first field blank.
• Set the dropdown to your new domain (e.g. TravelingIsSuperFun.com)
• Set the “Name:” to anything you like (e.g. This is my Travel Blog). You can change this later.
• Set the “Email:” to your new email (e.g. sammy@TravelingIsSuperFun.com).
• Click “Install It For Me Now”.
• Waiting? Browse to your new domain (e.g. http://TravelingIsSuperFun.com). Most likely it is not ready yet. It will take “10 to 15 minutes” before you see a WordPress at your new website. It will display something like “Welcome To WordPress”. At the same moment it becomes available, and email will be sent to your new email. So you can wait for that and click the links inside the email to see your blog.

Google Analytics Setup: Optional

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. You can check back and see who visited your website, why, for how long, etc… for any day ever in the history of your website. Very nice. And its free. It is best setup on day 1, but you can add it at any time in the future.

If you are not interested in analytics, skip this section and skip any instructions which mention “analytics” in other sections below.

• Sign-Up for Google Analytics. You can use your existing free Google account if you have one.
• “Add New Domain”. If you can’t find out how, search on http://www.google.com for “Adding a domain to Google Analytics” and follow the instructions. Complete analytics setup here is outside the scope of this article.

Google AdSense Setup: Optional

AdSense is an ad serving application run by Google Inc. Website owners can enroll in this program to enable text, image, and video advertisements on their websites. These advertisements are administered by Google and generate revenue. Its fast and easy to setup and totally free.

If you are not interested in AdSense, skip this section and skip any instructions which mention “AdSense” in other sections below.

• Sign-Up for Google AdSense. You can use your existing free Google account if you have one.
• “Add New Ad”. If you cannot find this. Follow this help section.

WordPress Setup: Part 1

• Following the “WordPress Install” section above you will receive an email outlining how to login to your website. You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/). This is your personal blog’s “WordPress Admin”. You will spend 99% of your time on this project inside this admin.
• The first page of the admin is the “Dashboard”. It shows a navigation bar with tons of buttons on the left.
• Click the arrow next to “Users” to expand the menu. Click on “Users” (yes, same word used twice)
• Click on “Admin”. Change the password. Memorize it.
• On the Users Menu, click “Add User”. Create a new account with your preferred username and password (you can use the same password as you used for admin if you like). Be sure to set the Role to Administrator. This way you can add/edit/delete (do everything) on the blog.
• In the upper right, choose log out.
• Log In again with your new username and password. Use this new username and password 100% of the time. Leave the original “admin” user account as a backup (i.e. You really never use it, but DO remember the password in case you need it.)
• Browse to your blog. Just to see how it looks. (e.g. http://TravelingIsSuperFun.com/).
• Then continue with ‘Part 2’.

WordPress Setup: Part 2

• You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/).
• On Left-bar menu, expand ‘Plugins’ and choose ‘Add New’. For each of the following; search, install, activate.
  • Advertising Manager – This you will use for AdSense, per above
  • Akismet
  • All in One SEO Pack
  • Google Analyticator – This you will use for Google Analytics, per above.
  • Duplicate Post
• On Left-bar menu, expand ‘Appearance’ and choose ‘Themes’. Browse any, preview, any, and activate one. For now this will be your theme, so pick one you want for at least a few weeks. Any changes to ‘widgets’ will be lost when you change themes, so pick one you like.
• On Left-bar menu, expand ‘Pages’ and choose ‘Add New’. You will add 4. For each; Enter a the title/description here.
  • Home / This is the home page.
  • About / This is the about page.
  • Services / This is the services page.
  • Contact Us / This is the contact page.

• Browse to your blog. Just to see how it looks. (e.g. http://TravelingIsSuperFun.com/).
• Then continue with ‘Part 3’.

WordPress Setup: Part 3

• You will access the admin with a web browser through a subdirectory of your domain (e.g. http://TravelingIsSuperFun.com/wp-admin/).
• On Left-bar menu, expand ‘Posts’ and choose ‘Categories’. Add 2 new ones. ‘Fun’ and ‘Work’. You can delete these later.
• On Left-bar menu, expand ‘Posts’ and choose ‘Add New’. Add a few posts. There is TONS you can do here. But just give a title, input a sample paragraph, choose a category (of ‘Fun’ or ‘Work’) and click ‘Update. Checkout the site again to see.
• On Left-bar menu, expand ‘Appearance’ and choose ‘Widgets’.  Each widget is a block of real estate on your blog. It can contain many things. A list of links, some text, an image, a calendar, a search text input, and much more.  Drag a box from the center area to the right. Checkout the site to see the progress. Experiment!

That’s it. You did it. We’ve used the most commonly used 20% of WordPress. There is much more to learn, but you already have all the basics now. You can send the link to your friends and share it!

ONGOING MAINTENANCE

DREAMHOST MAINTENANCE

-Only visit dreamhost to; pay your bill each year, add new email accounts. I.e. basically you never visit here.

WORDPRESS MAINTENANCE

-Login to the admin to add/edit/expand your website. You will login here frequently until your site is “done”.

That’s it!