Showing posts with label UI. Show all posts
Showing posts with label UI. Show all posts

Thursday, December 6, 2012

Far Cry 3 Review: UI & Gameplay

Far Cry 3, the long waited role-playing shooter game, has just been released in the US for consoles and PC. Critics describe it as “something like Skyrim but with guns” and many say that this is the best game UbiSoft has released since Assassin's Creed: Brotherhood.

We don’t know if this is true yet, however when there is so much buzz around an AAA title the team of Coherent Labs is always curious to find out more about it. Since we believed that many of you will be interested to learn more as well we decided to share with you some screenshots of Far Cry 3 introducing you to the game’s UI and gameplay.




As you can see on the picture there are different kind of troops in Far Cry 3: skulls are the normal guys, the shields are the heavies, and be careful from the lightning guys - they are fast, suicidal and probably the most dangerous NPCs. There are also 2 types of animals - herbivores and predators. With so many enemies the good news is that you are able to see people through the walls which allows you to prepare a stealth attack instead of getting killed in the melee. You’re also able to spot others on your mini map.



This beautiful HUD represents the camera that you use to zoom in and get a closer look before you decide to explore certain location. It has a nice legend explaining about the types of NPCs you might see and it also allows you to take pictures which you’re able to review later in your gallery.



This is how the map looks like in Far Cry 3. The red bits represent the enemy controlled territory which you need to conquer. You are allowed to fast travel to your camps marked on the map and, last but not least, you can see different kind of animal territories - bears, deer, pigs, etc.The map also displays cursor’s coordinates and has a legend explaining the meaning of each icon.



This is one of the RPG elements in the game allowing you to take quests for which you get small rewards and xp. The fun part is that you’re supposed to kill the target with a specific weapon in order for the mission to be successful.



In the game inventory you are allowed to carry and use different kind of potions which you prepare by yourself using ingredients that you find on the island. This is why the player in Far Cry 3 needs to pay close attention to the wildlife or he’s going to have a tough in the game.



There is the place in every camp where you are allowed to buy weapons and ammo, to customize them by changing their skin or to improve their performance.



You are also allowed to learn lots of skills in Far Cry 3, mainly divided in 3 category:
  1. The heron - these are long range takedowns and mobility skills
  2. The shark - assault takedowns and healing skills
  3. Spider - stealth takedowns and survival skills


This is how the Handbook looks like. Here you can check out your progress of the game: number of missions, quests, skills learned and more useful things.

If these screenshots are not enough for you to get a feeling about the game’s UI and gameplay, you might want to check out this video review of Far Cry 3 done by the Official Playstation magazine.



Far Cry 3 is one of these games that impresses with great UI and gameplay. You will be surprised how big is the world in the game and that it has a life of its own with NPCs attacking each other on island regardless of your presence.

Monday, December 3, 2012

What can Unity 4 and DirectX 11 do together?

With the new version Unity 4 introduces support for DirectX 11 which can really take your graphics to the next level. The company released a video explaining a bit about the new features, however we believe it was not enough for the game developers to learn even slightly for all the possibilities.

Using DirectX 11 with Unity 4 means taking full advantage of features like:

Shader model 5

The main purpose of this feature is to solve a common problem in current game engines: the upsurge in the number of shaders due to the large number of permutations. In other words, for each kind of material and light the game developers must include a shader in order to handle all cases.  


DirectX 11 offers an elegant solution through dynamic shader linkage.
 
Tessellation

Tessellation is one of the biggest features around DirectX 11 and Unity 4. It is simply breaking down polygons into finer pieces which brings profound improvements to 3D graphics. For example, game developers can cut a square across its diagonal to make 2 triangles and use them to depict new information. You can see the difference in the images below.



Without Tessellation



With Tessellation

Compute shaders

Compute shaders provide high-speed general purpose computing and takes advantage of the large numbers of parallel processors on GPU. They provide with memory sharing and thread synchronization features to allow more effective parallel programming methods.

A great example is this demo made by Nvidia showing a real-time simulated ocean under twilight lighting condition.



Unity 4, DirectX 11 and UI

As you may already know, Coherent UI have been recently integrated with Unity. Coherent UI natively supports DirectX 11 rendering and we are really happy that in Unity 4 it is supported too so users will be able to use its features to create better game UI. Inspired by this we integrated one of the Unity 4 samples with Coherent UI components and we made this demo to show you what Coherent UI, Unity 4 and DirectX 11 can do together.



As you can see there is a HUD on the main camera and two more Coherent UI Views on the paintings. You are allowed to scroll and select the paintings, interact with the UI and even play a game within the game. At the same time the performance has improved up to 50% compared to using Unity 3.5 version and DirectX 9.

If you’re interested in using Coherent UI with Unity 4, you’re welcomed to request a public beta of our integration with the game engine from our download page.

Tuesday, November 13, 2012

Coherent UI in the Unity3D editor - Introduction

We would like to share a video showing the first version of the Coherent UI integration in the Unity3D editor. In this video we show how to:
  • Import the Coherent UI package
  • Create an in-game object with a web page on it
  • Interact with a web page in the game
  • Add a HUD powered by Coherent UI
  • Build the game

We plan to release a Beta version of the product in a couple of weeks tops so stay tuned! For any suggestions or thoughts about the Unity integration please leave a comment or visit this thread.

How it works

The integration is very powerful yet very simple to use and requires little or no programming at all as we have wrapped everything in components with editor-accessible properties. However, we also expose to script all the features available in the .NET and C++ version of the library so more custom behavior can also be achieved.

What happens in the video:

1. We load an empty scene and add a floor, a light and a cube on which we'll project what in Coherent UI terms we call a 'View'. A view is something that Coherent UI renders - that could be a HUD element, a projected web page, an animation - anything wrapped in an HTML page.
Simple scene

2. We add a character controller so that we can move around

3.We import the Coherent UI package. The component we are interested in this tutorial is 'CoherentUIView'. We drag it on one of the faces of the cube. All the various properties of the View are editable in the Inspector. By default it will load google.com. Let's hit 'Play'.

A Coherent UI View on an object
4. We can see the web page on the game object in Unity!

5. We change the web page and the resolution.

6. Now we have a nicer page in a better resolution.

An interactable web-page projected on a game object
7. The next thing is to make the page interactable. To do this we add a Mesh Collider component to the mesh. Then a UserScipt component that just handles the raycast and mouse button translation to the Coherent UI View. We also add some code to the camera to stop it from receiving when we hit 'L', otherwise it's very hard to click on anything with the mouse-look on. That's it - the View is now fully interactable.

8. Now for the HUD - we just drag the 'CoherentUIView' component on our Main Camera. We have made the HUD resources and copy them in our project and set the View's Page property to coui://TestPages/demo/demo.html.

'coui' is a special protocol we use to signal that the resource is local and subject to loading through the file handlers supplied by the application. In this way you can use a custom resource manager as well as for instance encrypt your UI data. The HUD looks pixelated because the resolution we set does not coincide with the one of the Editor pane. It will however be OK in the game when we build it. In your games the resolution will always be tied to the actual resolution of the Camera (the back-buffer).
A sample HUD made rendered through Coherent UI
9. The Coherent UI integration handles all cases and detects if the component is attached to and object in the world or a camera. It is compatible with post effects. We can add an effect on the camera. By default that effect will be applied to the View also. However this might not be desirable so by clicking 'Apply After Post-Effects' you can disable them on the View.
Post effects can be applied or skipped on Coherent UI Views

10. We now just have to build the game. Coherent UI resources will automatically be copied and made available at runtime.
The built game
 All Coherent UI rendering happens in the native C++ plugin so it's impact on the performance of your game should be minimal. 

Thursday, November 8, 2012

Porting Brackets to a new platform

Brackets is a code editor for HTML, CSS and JavaScript that is built in HTML, CSS and JavaScript. That makes it a fully featured desktop application written using Web technologies. Brackets embeds a browser to show and run the entire editor and extends it with additional functionality used by JavaScript. There are more and more applications using this kind of mixed platform - HTML/JavaScript becomes first class User Interface (UI) (and not only) for Window 8 applications, other tools from Adobe such as Edge Animate, Icenium - a new cloud IDE, recently announced by Telerik. Sencha Animator also is an HTML5 application, running inside QT WebKit. Even the UI of most browsers is written in HTML.
This approach has several advantages:
  • fully cross-platform UI - as long as the browser is running on a platform, the UI is going to be running on that platform too
  • full UI customization using CSS lots of available application frameworks MVC, MVVM - Backbone.js, knockout.js, you name it
  • lots of UI libraries - Kendo UI, jQuery UI, mochaui
  • easy development of the UI using Chrome Dev Tools, Firebug, etc.
  • Live reload of the UI, without restarting the whole application!
  • native access to filesystem and everything without sandboxing
  • use existing native APIs
  • native performance where necessary
  • only single browser to support - this is a huge relief for the HTML/JavaScript developers
Given the advantages, I am sure that more and more mixed native and HTML applications are going to appear.

Brackets Architecture

Brackets consists of two applications running together - an HTML/JavaScript application and a native C++ shell that runs the HTML application. The native shell consists of two processes - one running the HTML application inside a browser, and one running the heavy native part like filesystem operations and number crunching. The communication between the two processes is asynchronous, using JavaScript callbacks and request / response for the native code.

  • The shell extends the standard HTML DOM with the following functions:
  • Open file or directory using the OS dialog
  • Read file
  • Write file
  • Create directory
  • Rename file or directory
  • Get file last modification time
  • List directory contents
  • Open and close browser for Live Preview
  • Open extensions directory in OS file browser
  • Open developer tools for brackets itself
  • Get the system default language
  • Time since the application start
  • Get the application support directory


Brackets Shell implements the asynchronous communication between the HTML render process and the browser in a very simplistic way: JavaScript executes a function appshell.fs.readdir(path, callback), the render process stores the callback in a mapping from a request id to callback and calls the native process with the name of the function. When the native process is ready it sends back any result of the call together with the request id. The HTML process finds the callback by the request id and executes it with any result.



This architecture is the same as for any good GUI application - the UI never executes any expensive functions and is always responsive and all data manipulation is in a separate thread.

Running Brackets in Coherent UI

Making Brackets run inside Coherent UI is really easy. We start by creating a view that loads www/index.html relatively to the executable. To support Coherent UI we have to include some JavaScript files in the index.html of Brackets

These scripts are Coherent UI dependencies, Coherent UI itself and the abstraction layer between all JavaScript code of Brackets and Coherent UI. Then we have to register our native callbacks for the asynchronous calls:

Brackets native functions always return an error code as first argument to the JavaScript callback. This mechanism can be implemented in Coherent UI, but then the callbacks always have to do two things - handle the correct result and handle the error, which is kind of annoying. engine.Call might take two callbacks - one for the successful result and one for error. Therefore we have to wrap the normal callback in an object with separate handlers for success and error.
gist: javascript callback wrapper
All that is left now is to wrap the callbacks and use engine.Call instead of native function.

and to write the native function

Handling synchronous calls  

Brackets has and some synchronous methods that return to JavaScript immediately. These methods are:
  • Get the application support directory
  • Get the system default language
  • Time since the application start
Coherent UI does not support providing synchronous JavaScript functions by design, so we will have to work around that.

The application support directory remains constant through a single run of Brackets, so we can set it once and for all during application initialization:

Getting the system default language might be implemented in the same way. The last method left is time since the application start and is used only in Show Performance Data menu. This method might be implemented entirely in JavaScript, assuming Brackets is not going to be reloaded during the performance test run.

Porting Bracket to Linux

Since Coherent UI already runs on Linux and we have implemented most of the native functions using the cross-platform boost::filesystem library, all we have to do to get is showing an open file dialog, creating and closing a chrome instance opening an URL and folder in the default OS HTML browser and file manager.

We use the GtkFileChooserDialog and the xdg-open tool. Unfortunately, the Live Preview doesn't work under Linux. Live Preview in Brackets creates a new Google Chrome instance with enabled remote debugger, attaches to the debugger using XmlHttpRequest and WebSockets and controls the instance via the debugger. What happens on Linux is that one of the XmlHttpRequests fails with "DOM Exception" and the debugger is unable to attach to the instance.

Another Linux related issue is that I couldn't find a way to close a Google Chrome  tab on Linux gracefully, so when the developer tools are closed you get the "Ow, Snap" page. In a future version we will stop using Google Chrome for Live Preview and for showing the developer tools, which will fix this problem.

Here is a short video of Brackets running on Linux:

Get a prebuild package or get Coherent UI and start hacking!

Thursday, November 1, 2012

Announcing Coherent UI for .Net

We are proud to announce the official release of Coherent UI for .Net.

With Coherent UI game developers and UI artists can use standard modern HTML5, CSS3, and JavaScript to create user interface and interaction for their XNA, SlimDX or SharpDX games. Features like secure micro-transactions and in-game store, social networks integration are easy to implement using the full in-game browser that Coherent UI provides. In addition to incredible HUDs for XNA and SlimDX based games, Coherent UI gives you fully integrated browser controls for Windows Forms, WPF and Gtk#, so that you can integrate your desktop application with any social network, show YouTube videos or access a web service.
The major highlights are:
  • WinForms browser control - full HTML5 and CSS3 support with 3D transformations, HTML5 video and Flash support
  • YouTube running in a Windows Forms application
  • WPF browser control - integrated with XAML, without the complexity of using the WebBrowser control from Windows Forms
    Editing the WPF browser control XAML in Visual Studio design mode
  • Gtk# browser control - create truly cross-platform managed applications with embedded browser
  • integrates with SlimDX and XNA
  • connecting arbitrary .Net delegates to JavaScript events
  • exposing arbitrary .Net types to JavaScript
  • supports both Windows and Linux via Mono
For complete list of Coherent UI features visit our website.

Our next milestone is fully integrating Coherent UI with Unity and now is the time to share your thoughts and ideas about Coherent UI for Unity!

Monday, September 24, 2012

Announcing Coherent UI

Finally! We, the Coherent Labs team, are very proud to announce our first product - Coherent UI.


After a mammoth work (that is of course still on-going), I can openly talk about the exciting new technology we are building.

Coherent UI is a user interface middleware aimed at game development companies. It greatly increases the quality and optimizes production costs for UI development.
HUD, in-game browser and a game-in-the-game; all integrated through Coherent UI

The biggest news - you can write the UI for ANY type of game on ANY platform with HTML5. I am a big fan of using the right tools for the job they are designed for and I think HTML5 is exactly the kind of tech game companies have been lacking in their development ecosystem.

Now that I can talk about it, I'll be able to write much more about the technology we are creating and how we achieved many of our goals. For a quick-start I'll list some of the tech features we had in mind when we started and that are now available:

  • Feature-full HTML5 and CSS3 rendering (3D elements in your UI + canvas + WebGL!)
  • GPU acceleration
  • Multi-platform
  • Full browsing support (you can have a fully featured browser embedded in your game)
    •   SSL
    •   plugins
    •   cookies
    •   local storage
    •   proxies
    •   etc.
  • Fast JavaScipt (yes, it's usually V8)
  • Super fast and powerful binding (native <-> JavaScript = FAST)
  • Debugging and profiling (you can debug JS code with breakpoints, watches etc.; performance profiling on JS and rendering)
  • Built-in support for click-through queries (I've seen unbelievable hacks in the past dealing with this and couldn't stand it anymore) 
  • Proper composition of ClearType text on transparent background (it's amazing how few people get this one right)
  • Easy to use and clean API (it's more difficult than it sounds)
A sample game menu made with Coherent UI

These is just a high-level overview of what we now have and continue to improve.


Stay tuned for I plan to post many of my thoughts about how we achieved all this, what mistakes we made (and probably are still making) and what went really right. Hope you'll enjoy.

You can check out Coherent UI on our site for free.