Egret Free open source HTML5 game engine
This article will address issues arising during the selection of the Game Engine for the development of 2D games. And, as an answer to these questions, it will be proposed to use Egret.
The material of the article suggests that the reader already has a general idea of ​​the following:
JoyRocks development team creates games for social networks, namely, CityBuilder BirdsTown for FB, OK, VK MM and others. We use Flash, AS3, PHP, MySql, Memcahced, Redis. We are constantly exploring new technologies that can speed up game development and replace Flash.
Many companies, teams begin their way from developing games for the Web. The richness of choice technology for writing a client is diverse - it is Flash + AS3, engines that support JavaScript and that's it. Everything? Yes all. We forget all sorts of UnityPalyer and the rest of the heresy, with time they promise to deal with Flash. And while Flash is promised to be killed, he is very much alive and the majority choose Flash + AS3.
')
Based on the experience of our team, let me highlight the main points why Flash:
But there is nothing ideal in the world, and the decision to use Flash has its drawbacks:
The second approach is Flash + starling.
Pros:
Minuses:
All good. But again, Web support is lame. One of the round tables where the problem was discussed can be found at https://www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story .
Of those that we tried, the following candidates did not pass:
OOP On javascript is still the test. Who tried classes and JavaScript inheritance after C ++ / C # / AS3 should understand.
Having sufficient experience in developing CityBuilder, having tried various engines, our team has formulated the requirements that Game Engines must meet:
Egret Engine is a free, open source HTML5 Game Engine. Using the Egret Engine, as well as other relevant tools, developers can create HTML5 applications for Web and mobile platforms. And most importantly, it meets all the requirements of our development team.
http://www.egret.com/en/
After Unity, this is the second time when I wanted to cry out: “YES ...., ...,. Well, that's what we need !!!”. So positive, strong was the impression of an egret. The programming language is normal, debugging is not bad.
Even with poor documentation in Chinese, using debugging and access to the source code of the engine, you can study its work. Is the resource manager caching or not the resources loaded by RES.getResByUrl ()? We start debugging and we look. GUI skins are another feature that will simplify life when changing HUD, for example, on New Year.
English version: http://edn.egret.com/en/ . API documentation is there, but more information, of course, in Chinese http://edn.egret.com/cn/ . I think there is no need to explain how in chrome to translate a page from one language to another https://support.google.com/chrome/answer/173424?hl=en ? I highly recommend translating to English, not Russian. Problems with English? Then you are here https://www.google.com.ua/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=%D0%BA%D1%83%D1 D1% 8B% 20% D0% B0% D0% BD% D0% B3% D0% BB% D0% B8% D0% B9% D1% 81% D0% BA% D0% BE% D0% B3% D0% BE% 20% D1% 8F% D0% B7% D1% 8B% D0% BA% D0% B0 .
In this world, there is a lot about what we heard, at one time many doubted the iPhone, when Nokia had the lion’s share of the market.
The first mention of the egret we found on http://dragonbones.imtqy.com/ .
“DragonBones support Egret Framework”.
The second is on the site Tiled Map Editor http://www.mapeditor.org/ in the sponsors section.
Project page on Facebook: https://www.facebook.com/egrettechnologyinc .
CEO Egret Technology Inc: https://www.facebook.com/cnedwin .
As already mentioned, Egret is one of the game engines that can be used to create 2D games. The wealth of tools available out of the box is enough to start developing a team with minimal experience. If something is missing, you can always add or use alternative tools. For example, instead of using the standard Texture Merge toolbox for wrapping DragonBones animation sprites, we used TexturePacker. And, accordingly, we had to write our own version of TextureAtlas for working with atlas which unloads TexturePacker. Implementation details in the following articles.
According to the author, in practice you can safely make games like Quiz, Match3. The hitTestPoint functionality is also present, so for a Hidden Object it should also be appropriate. Prototypes of games of the genre Quiz, Match3 will be discussed in the following articles.
The question of applicability in CityBuilder (for example, https://apps.facebook.com/birdstowngame/ ) remains open. A lot of content and functionality difficult. The technical demo with a tile map and objects (animated trees, stones) proved to be not bad - everything loaded, Draw Call as we expected 2, adequately found objects using hitTestPoint.
To be or not to be is the question. As always, only time will tell. My personal opinion, if you are looking for HTML 5 Game Engine - Egret is a worthy candidate. And the author will use it to develop new games. Read about the results of use in the following articles.
Restrictions
The material of the article suggests that the reader already has a general idea of ​​the following:
- Adobe Flash, AS3
- Stage3D https://en.wikipedia.org/wiki/Stage3D
- Starling https://en.wikipedia.org/wiki/Starling_Framework
- JavaScript http://www.w3schools.com/js/default.asp
- Type Script http://www.typescriptlang.org/
- Game Engine https://en.wikipedia.org/wiki/Game_engine
- Spine http://esotericsoftware.com/
- DragonBones http://dragonbones.imtqy.com/
- HUD https://en.wikipedia.org/wiki/HUD_(video_gaming)
- Front end https://en.wikipedia.org/wiki/Front_and_back_ends
About
JoyRocks development team creates games for social networks, namely, CityBuilder BirdsTown for FB, OK, VK MM and others. We use Flash, AS3, PHP, MySql, Memcahced, Redis. We are constantly exploring new technologies that can speed up game development and replace Flash.
Problems with the choice of technology front end
Many companies, teams begin their way from developing games for the Web. The richness of choice technology for writing a client is diverse - it is Flash + AS3, engines that support JavaScript and that's it. Everything? Yes all. We forget all sorts of UnityPalyer and the rest of the heresy, with time they promise to deal with Flash. And while Flash is promised to be killed, he is very much alive and the majority choose Flash + AS3.
')
Flash
Based on the experience of our team, let me highlight the main points why Flash:
- Animation engine
- Having a wonderful WYSIWYG 2D animation editor.
- AS3 programming language
- IDE for all platforms (Windows, Mac) and Debugging Tools. (We use IntelliJ IDEA)
But there is nothing ideal in the world, and the decision to use Flash has its drawbacks:
- No GUI out of the box. He is, but a bit not what we need. Without going into details, the GUI is done independently, based on Flash animation.
- There are problems with porting to iOS, Android and other platforms. Dear reader, object - what about Starling, Adobe AIR? And he will be right. There is a toolkit that allows you to create iOS, Android applications using Adobe technologies. But, in most cases, the game is already written, and the usual Flash animations cannot be displayed using Starling, which wraps Stage3D. The entire animation must be initially done using, for example, Spine or DragonBones.
Flash + starling
The second approach is Flash + starling.
Pros:
- Spine or DragonBones animation engines
- Availability WYSIWYG 2D editors for animation Spine or DragonBones.
- AS3 programming language
- IDE and Debugging Tools.
- Porting on iOS, Android
Minuses:
- Fate FlashPlayer. Everything goes to the fact that the web browser will stop supporting it. One of those who suffered first is UnityPlayer.
Unity3d
All good. But again, Web support is lame. One of the round tables where the problem was discussed can be found at https://www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story .
What else flies by?
Of those that we tried, the following candidates did not pass:
- pixijs + spine
- phaser + spine
OOP On javascript is still the test. Who tried classes and JavaScript inheritance after C ++ / C # / AS3 should understand.
JoyRocks Team Engine Requirements
Having sufficient experience in developing CityBuilder, having tried various engines, our team has formulated the requirements that Game Engines must meet:
- 2D Animation (eg Spine, Flash, Unity, DragonBones)
- GUI - buttons, label, dialogs, HUD, etc.
- WYSIWYG editor for 2D Animation and GUI
- DLC (Not a problem in the vast majority of engines, but we specifically highlight it as important)
- Debugging tools
- Suitable for creating games Quiz, Match3, CityBuilder, Platformer.
- Cross-platform: Web, IOS, Android and etc
Egret engine
Egret Engine is a free, open source HTML5 Game Engine. Using the Egret Engine, as well as other relevant tools, developers can create HTML5 applications for Web and mobile platforms. And most importantly, it meets all the requirements of our development team.
http://www.egret.com/en/
Impressions
After Unity, this is the second time when I wanted to cry out: “YES ...., ...,. Well, that's what we need !!!”. So positive, strong was the impression of an egret. The programming language is normal, debugging is not bad.
Even with poor documentation in Chinese, using debugging and access to the source code of the engine, you can study its work. Is the resource manager caching or not the resources loaded by RES.getResByUrl ()? We start debugging and we look. GUI skins are another feature that will simplify life when changing HUD, for example, on New Year.
Egret components
- Egret Wing. An IDE in which you can edit and debug the game code in TypeScript, a WYSIWYG GUI editor. Up to the studio level from Microsoft does not reach, but there were no problems with the work in this tool.
- Egret Inspector. A plugin for chome that allows you to debug an application in Egret Wind. There is an old version of the plugin in the chrome store. I installed the latter by downloading with the help of manager Egret Engine.
- DragonBones. WYSIWYG animation editor. Details on the link http://dragonbones.imtqy.com/
- Res Depot. GUI tool for creating a repository of resources. Unfortunately, it is not yet localized in English, all in Chinese.
- Texture Merge. Packaging sprites in texture. Free analogue of TexturePacker https://www.codeandweb.com/texturepacker . Also localization is Chinese.
- Egret Android Support. Android support. Checked those demos - works.
- Egret ios support. IOS support. I haven't tried those demos.
- Egret Conversion. Convert Flash games to HTML5. While localization is Chinese.
- Egret feather. Particle editor.
- Lakeshore. A tool for creating games without programming. While localization is Chinese.
Egret Documentation
English version: http://edn.egret.com/en/ . API documentation is there, but more information, of course, in Chinese http://edn.egret.com/cn/ . I think there is no need to explain how in chrome to translate a page from one language to another https://support.google.com/chrome/answer/173424?hl=en ? I highly recommend translating to English, not Russian. Problems with English? Then you are here https://www.google.com.ua/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=%D0%BA%D1%83%D1 D1% 8B% 20% D0% B0% D0% BD% D0% B3% D0% BB% D0% B8% D0% B9% D1% 81% D0% BA% D0% BE% D0% B3% D0% BE% 20% D1% 8F% D0% B7% D1% 8B% D0% BA% D0% B0 .
What kind of engine is this? Where do they write about him?
In this world, there is a lot about what we heard, at one time many doubted the iPhone, when Nokia had the lion’s share of the market.
The first mention of the egret we found on http://dragonbones.imtqy.com/ .
“DragonBones support Egret Framework”.
The second is on the site Tiled Map Editor http://www.mapeditor.org/ in the sponsors section.
Where to write on what to subscribe?
Project page on Facebook: https://www.facebook.com/egrettechnologyinc .
CEO Egret Technology Inc: https://www.facebook.com/cnedwin .
Conclusion
As already mentioned, Egret is one of the game engines that can be used to create 2D games. The wealth of tools available out of the box is enough to start developing a team with minimal experience. If something is missing, you can always add or use alternative tools. For example, instead of using the standard Texture Merge toolbox for wrapping DragonBones animation sprites, we used TexturePacker. And, accordingly, we had to write our own version of TextureAtlas for working with atlas which unloads TexturePacker. Implementation details in the following articles.
According to the author, in practice you can safely make games like Quiz, Match3. The hitTestPoint functionality is also present, so for a Hidden Object it should also be appropriate. Prototypes of games of the genre Quiz, Match3 will be discussed in the following articles.
The question of applicability in CityBuilder (for example, https://apps.facebook.com/birdstowngame/ ) remains open. A lot of content and functionality difficult. The technical demo with a tile map and objects (animated trees, stones) proved to be not bad - everything loaded, Draw Call as we expected 2, adequately found objects using hitTestPoint.
To be or not to be is the question. As always, only time will tell. My personal opinion, if you are looking for HTML 5 Game Engine - Egret is a worthy candidate. And the author will use it to develop new games. Read about the results of use in the following articles.
Source: https://habr.com/ru/post/267905/
All Articles