Article series

• Part 1: The Tools
• Part 2: Sketching
• Part 3: Communication Layer

Prologue

How do we usually create a web application? We run a bootstrapping script, which provides us with a skeleton of our application and then we just extend it with the features we need.

That’s exactly what we did at the last hackathon we were attending - we started with rails new twf and spent half of the day integrating our blank app with Angular, Paperclip, creating API methods and so on. But the effort we needed to accomplish our goal (quite a simple web app) was really huge.

So I decided to find the best combination of backend and frontend technologies that would cause less pain.

At the project I was recently introduced to, the line between frontend and backend is distinguished very clearly: we have an API, written in Clojure and thin frontend application, made with Angular that works on a generated set of static assets - HTMLs, CSS and JS files (but under the hood we are using HAML and SCSS).

The application I will be implementing throughout the whole article has the same architecture: it has RESTful API and MVVM on the frontend, made with Angular. I welcome you to the journey of research and new technologies!

At my work we’ve lately been having a discussions on email validation. I recalled a post on habrahabr, showing different options, including effective and psycho solutions.

At this point we have an application with

• 1x Ninja, walking around
• 1x sphere, hanging in the center of the screen
• 1x cube, flying around the sphere

That’s our “game”? Doubtely… So let’s make things move like in real world! Or just like that…

Requirements

First of all, go and get the Newton GD files. And unpack it… right to the source directory of our project! That’s right! I’m not insane and I’m aware you are going to put a lot of files in your project. But have no fear - you may always add them to .gitignore and skip them from being tracked in your Git repo:

source/newton-dynamics-master/applications
source/newton-dynamics-master/packages/projects
source/newton-dynamics-master/packages/thirdParty
source/newton-dynamics-master/coreLibrary_300/projects

You are using Git, right?.. Now, you place the Newton GD sources in your project directory and change your CMakeLists.txt file to look like this:

cmake_minimum_required(VERSION 3.1)
project(irrlicht_newton_game1)

set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")

option("NEWTON_DEMOS_SANDBOX" "Build demos sandbox" OFF)

set(NEWTONGD_PATH source/newton-dynamics-master)
set(NEWTONGD_INCLUDE_DIRS
        ${NEWTONGD_PATH}/packages/dCustomJoints
        ${NEWTONGD_PATH}/packages/dContainers
        ${NEWTONGD_PATH}/packages/dMath
        )

set(NEWTON_LIBRARIES Newton dMath)

add_subdirectory(${NEWTONGD_PATH})

find_package(X11)
find_package(OpenGL)
find_package(ZLIB)

if (NOT IRRLICHT_LIBRARY_PATH)
    find_library(IRRLICHT_LIBRARY_PATH
            NAMES Irrlicht
            PATHS ${IRRLICHT_PATH}/lib/
            PATH_SUFFIXES Linux MacOSX Win32-gcc Win32-visualstudio Win64-visualstudio)

    message(STATUS "Found Irrlicht: ${IRRLICHT_LIBRARY_PATH}")
endif()

include_directories(${IRRLICHT_PATH}/include ${NEWTONGD_INCLUDE_DIRS})

set(SOURCE_FILES source/main.cpp)
set(EXECUTABLE_NAME irrlicht_newton_game1)

add_executable(${EXECUTABLE_NAME} ${SOURCE_FILES})

target_link_libraries(${EXECUTABLE_NAME}
        ${NEWTON_LIBRARIES}
        ${IRRLICHT_LIBRARY_PATH}
        ${X11_LIBRARIES}
        ${OPENGL_LIBRARIES}
        ${ZLIB_LIBRARIES}
        ${X11_Xxf86vm_LIB})

Try to compile your project - it should be just fine. And observe the power of CMake!

As we discussed, we will describe the whole game in scripts, and the core functionality we will define in the core. In this chapter we will be adding Lua to our application. You do not need to download Lua itself - you’d better install it with your system’s package manager (yum or apt or whatever your Linux uses, brew for OSX…).

Dependencies

The only thing you need to download from Internet this time is Lua wrapper called luacppinterface. So go and get it from Github.

And unpack it… right to the source directory of our project! That’s right! That’s really small library so it will not pollute your project with tons of files.

Now, I mentioned dependency managers earlier. This is how we will handle them in our C++ application - we will simply put the sources of all the libraries we depend on, with the versions we depend on, right in our project. Given that, you may put Irrlicht there as well - you are free to do anything with our project!

Install Irrlicht

First of all, you will definetely need the Irrlicht engine, so go get it.

Then you will need to compile it. Compilation process depends on the operating system you use, but it’s really similar on every one.

Linux

Install these dependencies with your system’ package manager: libenet-dev libxxf86vm-dev zlib-dev cmake.

Unzip Irrlicht, go to the directory you unpacked with the terminal and run the following:

cd source/Irrlicht
make

Belive it or not, but that’s all!

Windows

Unzip Irrlicht, go to the directory you unpacked and open the VisualStudio project (depending on VisualStudio version, you might want to open a bit different file) in source/Irrlicht:

Irrlicht10.0.sln
Irrlicht11.0.sln
Irrlicht8.0.sln
Irrlicht9.0.sln

Build it with VisualStudio - and you are done!

MacOS X

The steps are a bit complicated. And they require you to install XCode and Command-Line Tools - those could be found either in AppStore or on the Apple website.

• First of all, you need to install a bunch of dependencies (I use brew for this purpose):

  brew install tinyxml enet lua cmake
  

• Get a list of all compilers available for your OSX version:

  xcodebuild -showBuildSettings | grep DEFAULT_COMPILER
  

  I got something like this:

  $ xcodebuild -showBuildSettings | grep DEFAULT_COMPILER
    DEFAULT_COMPILER = com.apple.compilers.llvm.clang.1_0
  

• Now the build process:

  cd source/Irrlicht/MacOSX
  xcodebuild -project MacOSX.xcodeproj GCC_VERSION=com.apple.compilers.llvm.clang.1_0
  

• And the final step - copy the library to the lib/MacOSX directory:

  cp build/Release/libIrrlicht.a ../../../lib/MacOSX
  

Phew! That’s a damn bunch of commands, don’t you think?

Basic terms

Let’s talk a bit about our application before we create it. In order to make the development process sequential and least painful, we need to design the application well. The design of an application or the application architecture is the hardest thing to change on later stages of development. Thus it must be well-thought at the very beginning to prevent suffering in the future.

Well, there are number of application architecture’ levels:

The highest level defines which modules will the whole application consist of and what functionality will each of those modules have.

    <p>
        The next level is how the modules communicate to each other, how they work together.
    </p>

    <p>
        The lower level is the structure of each module - what classes, entities, data structures and similar things will
        the module consist of.
    </p>

    <p>
        One of the lowest, yet still very important architecture levels is how files are organized.
    </p>
</div>

From the highest architecture layer point of view, I can advice a very simple architecture:

• a stable, rarely changed core
• a set of assets (models, textures, sounds - any content, made by artists and used to be presented to the player)
• a bunch of scripts, defining all the logic of a game (how character looks like, how the menus are shown and how they react to player’s actions)

The main benefits of such an approach are:

1. scripts and assets may be changed at any time
2. scripts and assets define what we show to the user and how the application behaves, so we can changes them without the need to re-compile the core
3. we can modify the core (for example - optimize some features) without changing the application behaviour

We can make the core so flexible that we may re-use it in the future projects.

The tools

We will use Irrlicht engine because of its simplicity. And it satisfies all our needs - it does not need much content preparation; it provides GUI; extending it with IrrKlang will give us very simple interface to sound and music playback.

Newton Game Dynamics engine we will use to simulate physics. It is easy to use and is really powerful - you would be impressed!

The last, not the least, we will use Lua scripting language to write scripts. Lua is a lightweight programming language and perfectly suits that goal.

One of the most beautiful parts of this tutorial, will be the part on making of assets. We will use Blender 3D to create a couple of 3D models.

I also found CMake kind of user-friendly. It is not that handy as any of dependency managers for all those languages, supporting them (npm for JavaScript, go get for Go, RubyGems for Ruby, leiningen for Clojure and many others). Yet it makes your project a little more portable, helps to handle your dependencies, totally eliminates the need of all those How to configure VisualStudio for OGRE tutorials. Just try it!

Conclusion

Remember all the three rules for our architecture. And keeping them in mind, let’s get to some coding already!

Next chapter

What will you learn?

This tutorial covers the development of a game from a very beginning. This includes:

• planning the architecture for a game
• developing the game engine
• defining game logic with scripts
• creating 3d models
• and distributing the application

And of course, the whole tutorial is built around Irrlicht and Newton Game Dynamics libraries.

As for {{ site.time | date: ‘%d %b %Y’ }}, the tutorial covers:

• an introduction to NewtonGD
• creating Irrlicht-powered application
• controlling the application logic with Lua scripts
• building application with CMake

Why writing everything from scratch? Why not use Unity / Unreal Engine / you-name-it?

There are some well-known and used game engines like Unreal Engine 4, Unity 3D and others. They all come with enormous amount of learning materials. So why this tutorial might be interesting for you? You might want to know how things work and thus get most flexibility out of your tools. Or even start working on building your own tools.

What should I know to proceed?

I expect you to have at least some experience with these three things:

• C++
• computer graphics
• game development

The latter - to make sure, you will not call 3d models “textures” or miss the “script” word’ meaning.

Why these libraries?

Irrlicht is easy to use and contains all the features you will need to build a game - resource management, support for majority of asset formats out-of-the-box, user input (keyboard, mouse and joystick events handling), GUI (Graphical User Interface - buttons, text inputs, etc.).

Irrlicht is easy to use and contains all the features you will need to build a game - resource management, support for majority of asset formats out-of-the-box, user input (keyboard, mouse and joystick events handling), GUI (Graphical User Interface - buttons, text inputs, etc.).

Newton Game Dynamics is also very easy to use; it is constantly developed; and it is darn powerful!

If you are still interested - please proceed to the first chapter.

Foreword

Last time I wrote an article on how one can encapsulate both HTML and CSS in one entity, called WebComponent. This time I want to tell a bit about how to encapsulate JavaScript and HTML.

When I see an article on Habrahabr titled React something, I think Omg, React again?... But React, just as Ember was always a mystery for me.

Until today.

BEM

These days, many web developers use different methodologies to make their web page source look structured and clean. But all those methodologies only work well until you use third-party libraries or involve a new person in your project.

Currently I am working on a long arithmetic problem at the university. This problem is much more complicated than I described or than a task I shall be describing now, but here’s the thing: I needed some part of memory to be allocated from within my function. And I needed this to be done in assembly.