Current News

Engineering @ Ace2three – HTML5, Behind the scenes (Updated: 15 Dec 2017)

With wide adoption and industry support, HTML5 is poised to transform desktop and mobile gaming, creating amazing user experiences that are only one click away for users. With over 125 million across the world using HTML5 capable browsers just from their mobile phone, and that numbers growing daily, we know we are headed towards this as the future.

Today the capabilities of HTML5 as a high performance gaming platform today are still not completely clear. New HTML5 games regularly appear, they often exhibit quirks and low frame rates. Although there are many other benchmark suites that measure JavaScript performance, we wanted to build one focused specifically on key game performance metrics

Some of the pointers which affected our decision making process while choosing our tech stack are as below:

1) Choosing JavaScript framework:

There are many java scripts framework are available in market which goes with HTML5. Like Phaser, Pixi JS, Sench touch cocos2dJs and ImpactJS etc. however every framework has its pros and cons. Choosing the framework is not easy, and many parameters like cost, resource availablility in market, performance easy to implement, framework community etc. needs to be factored. We felt Phaser has an edge over others since we found it great for game jams. It has an easy-to-understand API that does a lot of heavy lifting and it is completely open sourced. The best part though is the good support offered by the community and abundant plugins available at the same time to have scope for customization

Previously html games are very cumbersome to develop in terms of communication with back end systems as it was very tedious task to implement http polling from html in order to create to and fro communication. Also this creates additional performance overhead. Now technology has grown rapidly thanks to Web sockets and it help us address this bidirectional communication. This implies that the server can push information to the client in contrast to direct HTTP. WebSockets allows the server to send things to the browser without the browser having to request it. The browser can also send data to the server. This is quite useful for sending notifications and updates because the server can send them when it gets them, instead of waiting for the browser to ask for them.

2) Communication channel

Previously html games are very cumbersome to develop in terms of communication with back end systems as it was very tedious task to implement http polling from html in order to create to and fro communication. Also this creates additional performance overhead. Now technology has grown rapidly thanks to Web sockets and it help us address this bidirectional communication. This implies that the server can push information to the client in contrast to direct HTTP. WebSockets allows the server to send things to the browser without the browser having to request it. The browser can also send data to the server. This is quite useful for sending notifications and updates because the server can send them when it gets them, instead of waiting for the browser to ask for them.

3) Designing for Performance

A product with no users is no product. User Experience is something that defines state-of-the-art applications. We focused on parameters such as page load time, time to first paint, visual feedback on every action etc. maintaining necessary page transitions and designs aesthetics in game.

Following points must need to think in order to address performance challenges in html. Developing a game is not possible without the inclusion of high resolution picture arts and complex business logic. Using such high resolution images generally leads to longer page load times. Using Sprite sheets and Texure Atlas has proven to be good solutions for us to overcome these challenges.

Sprite Sheets: A sprite sheet is one large file containing multiple images for your website, saving loading time and web space. The essential point of using Sprite Sheets is that the server only has to send one image file containing all your images, not a host of individual ones. Combining your images into a single file will not only significantly lower the number of HTTP Requests, but will also decrease the total file size of the images.

Texture Atlas: This is mostly same as a sprite sheets, the reason for using this is Sprite sheets can accommodate images of only same dimensions whereas texture atlas can accommodate images of any dimension.

4) Minification – To reduce the javascript files resource usage

Minification works by analyzing and rewriting the text-based parts of a website to reduce its overall file size. Minification extends to scripts, style sheets, and other components that the web browser uses to render the site.

Minification is a fast and easy way to reduce a web application’s resource usage. Minification leads to reducing the page load time of application which means that users experience identical service without the additional overload. It also helps in securing our code base since the code is neither directly replicable nor easily understandable. This translates to our game client downloading fewer bytes, enabling the page to load faster, use less battery and consume lesser data

5) Web GL – Good performance while building games

WebGL is fast and fully utilizes hardware acceleration, making it suitable for games or complex visualizations. It has the ability to run applications on many different platforms and browsers. WebGL isn't just about performance - it also allows for incredible shader effects to make games look extra awesome. Blackberry 10 and Firefox OS are also launching with WebGL enabled by default, and it looks like a WebGL-enabled Chrome will eventually be the default browser for Android

6) User Personalization

Personalization is far more than simply offering a welcoming experience. It’s centred on customizing the user’s experience on your website according to his or her own tastes, preferences and interests. For providing great user level personalization we have implemented the autologin and cross channel data sync on our games.

Autologin Implementation

Html is stateless and so in case of auto-refresh of URL (when browser goes into the background) or due to network connectivity issues, the users might have to start their journey from scratch. To provide a sophisticated user experience, it’s important to reduce number of steps and also provide the flexibility to the user to resume activity from the latest session. To provide a smoother experience for the user, we have implemented the auto-login feature in html5 game client which saves the user time.

Cross channel Experiences

Since we have our game clients on multiple channels (Desktop, Android and iOS), it is very important for the user to have a seamless experience when accessing our game from different channels. To achieve this our architecture enables users to interact with each other using a dedicated profile and sync data across platforms.

Future scope

We are currently satisfied with the performance of the game so far and are looking to build features to give users native app like experience. In this context, we are planning to introduce “Add to Home screen” feature. This gives users the ability to quickly and seamlessly add our game to their home screen without leaving the browser, providing a native app like experience. Another feature which is in our pipeline is push notifications. Re-engaging users on the web is tough. To overcome this challenge we are planning to leverage the browser based push notification technology to send Push Notifications to our users, even when the browser is closed.

Conclusion

Html5 games are not yet optimized for all browsers currently and this is a challenge being faced for all the gaming companies growing in this space. We at Ace2three are always looking to push boundaries and break stereotypes to apply the next generation of technology to create winning moments for our users!

We have tried to build a game that is fast, packs a punch and is reliable at the same time.

Clairvest backs India gaming platform Head InfoTech (Updated: 15 May 2017)

Head InfoTech India Pvt Ltd, an online skill-based gaming platform, has secured $73.7 million in funding. The investors included Clairvest Group Inc. Khaitan & Co provided legal advice to Clairvest on the transaction.

PRESS RELEASE

TORONTO, ON–(Marketwired – April 28, 2017) – Clairvest Group Inc. (TSX: CVG) (“Clairvest”) today announces that it, together with limited partnerships controlled by it, made a US$73.7 million investment in Head InfoTech India Pvt. Ltd (“Head InfoTech” or the “Company”). Clairvest’s portion of the investment will be approximately US$40 million.

Head InfoTech operates Ace2Three, the leading online skill based gaming platform in India providing distinctive online Rummy experiences to over 8 million customers. The opportunity was originated through Clairvest’s extensive domain work in the global gaming industry.

“This is an exciting new platform that builds on Clairvest’s 15 years’ experience in the gaming industry and expands our track record into skill gaming. We look forward to supporting the Company achieve its growth plan and are especially excited to partner with Deepak Gullapalli, a visionary entrepreneur and innovator with a top-notch organization”, said Michael Wagman, Managing Director of Clairvest.

“The Ace2Three platform is about to embark upon an exciting growth trajectory. Clairvest brings much more than capital to this deal: it brings a wealth of experience in building companies of our size as well as expertise in the gaming space which makes Clairvest a valuable resource to the Company”, said Deepak Gullapalli, Founder and CEO of Head InfoTech.

Head InfoTech is Clairvest’s 48th platform investment and the fourth investment by CEP V. The Clairvest / CEP V co-investment pool is capitalized at $600 million and focuses on equity investments in growth companies.

Khaitan & Co acted as legal advisor to Clairvest.

About Clairvest
Clairvest Group Inc. is a private equity management firm that invests its own capital, and that of third parties through the Clairvest Equity Partners limited partnerships, in businesses that have the potential to generate superior returns. In addition to providing financing, Clairvest contributes strategic expertise and execution ability to support the growth and development of its investee partners. Clairvest realizes value through investment returns and the eventual disposition of its investments.

https://www.pehub.com/2017/04/clairvest-backs-india-gaming-platform-head-infotech/