Tuesday, September 1, 2015

Phaser tutorial: Phaser and Spriter skeletal animation

 





Previous Phaser tutorials:
Phaser tutorial: DronShooter - simple game in Typescript - Part 3
Phaser tutorial: DronShooter - simple game in Typescript - Part 2
Phaser tutorial: adding 9-patch image support to Phaser
Phaser tutorial: DronShooter - simple game in Typescript - Part 1
Phaser tutorial: custom easing functions for tweening and easing functions with parameters
Phaser tutorial: sprites and custom properties for atlas frames
Phaser tutorial: manage different screen sizes
Phaser tutorial: How to wrap bitmap text


 Recently I was looking for some way how to play skeletal / bone animated characters in Phaser. Unfortunately, there is not too much choices if you just want to try some tool in end-to-end way (from creating animation in tool to playing it in Phaser game).
 Finally, I managed to do it and it is what this article is about. So, read on...


Tools overview

 First I was looking for available tools. I found four which interested me and which I decided to examine deeper:
  • Creature - looks very impressive. From Phaser 2.4.0 it is even supported in engine. But, it costs $99 for Basic and $170 for Pro version. In Trial version you cannot save or export your project. It can be good for artist to try the tool, but I am coder and, as already mentioned, my attempt was to try end-to-end implementation. Beside this, it looks that WebGL rendering mode is needed,
  • DragonBones - this tool attracted me with it price - it is free. But it looks you need Flash Pro to use it. DragonBones is supported by Adobe. So, buy Adobe Flash Pro to get DragonBones for free :-) Beside this, I did not find any documentation on tool's export files,
  • Spine - this tool has documentation on export format, but it does not let you to save and export in trial version. Essential version costs $89 and Professional $289. Hey, I just want to try to make simple animation, export it and implement it in Phaser. I will not blindly buy any tool that does not let me do this - what if its export is horrible mess and making the player will turn into nightmare?,
  • Spriter - this tool made by BrashMonkey has also free and Pro version for $59. But, finally tool, that let me try it, export my animation into .xml or .json. Has some documentation on format. Beside this, its use is simple even for programmer and there is also series of video tutorials, that will guide you through program functions. It also shows, what is only in Pro version.
 From above list I selected Spriter. And if in future I wanted to go Pro with some of the tools, I would definitely do so with Spriter, as I now know it little and I invested time into making runtime for Phaser.


Runtimes

 Despite some other tools, Spriter does not come with runtimes. It is up to you to find some already existing one or to write your own. Spriter has forum, where peoples using it and coder implementing runtimes meets. There you can get links to various runtime implementations. From those I found these two attracted me most:
  • spriter-scon-js by Dean Giberson. It is reading .scon files, which is .json export from Sprites. The implementation is minimal, but reading it helps you to find what is in export and what are relations between its data structures. Also its length encourages you to write your own!,
  • spriter by Trixt0r (Heinrich Reich). This one is more massive supporting Java2D, libGDX and others. I regret that I did not find it earlier. I found it with half of my implementation finished, when I was searching internet for solving reverted y axis issue. At least, I used its test character animation instead of my crappy programmer animation I was using before.

Runtime for Phaser

 Before I will go further here is result: Spriter bone animation running in Phaser (press A to switch to next animation):


 Runtime is written in Typescript and significant part of it is just structure of all objects needed for animation and filling these structures when loading animation data. Currently, this is first version of implementation and only tweening between two positions is linear (will add curves later), but I am happy with the result! Also some features, that are available only in Spriter Pro are not implemented (character maps, sounds, events, ...).
 Second part of source is the player, that takes loaded data and tweens bones and sprites between keyframes and also transforms it from its local spaces into world space.
 Phaser specific is that all visible parts are Phser.Sprite objects and whole character is Phaser.Group object. So, you can further take it and transform (scale, move, rotate) - it is part of scene graph.


Quick export structure overview

 Export begins with information on folders and files. Files are in fact files with individual sprite parts. As I am using atlas I use file names as frame names. Folders can help you to organize your assets, but with atlas I am not using them.

Spriter editor


 Next part is Entity. Entity is your character and one file can contain multiple entities. Entity has one or more animations. Entity is that grey guy and animations are short sequences you can either loop or play only once.

 Core of each animation is main timeline - bottom third on editor picture. Whenever you change some part (either bone or sprite) it creates keyframe on main timeline. These keyframes reference to particular timelines for individual bones or sprites. Keyframes are those small vertical rectangles on picture. It keeps information on time, position, rotation, scale, spin ... and file and folder for sprites.

 Of course, during implementation, you will encounter lot of issues. My biggest problem was correct handling of y axis. In Spriter 0,0 point is in top left corner, but when rotating, 90 degrees points up. In export coordinates are exported in "OpenGL" way with 0,0 in bottom left corner, and 90 degrees points up (and after long debugging I also found, that sprite y pivots were reverted during export). In Phaser 0,0 is in top left corner again, but 90 degrees points down. It was necessary to flip all angles along horizontal axis and also correctly handle spins. Spins say in which direction bone or sprite should rotate to its target position.

 Detailed information on structure can be found here and also examining other implementations can fill holes where documentation is not actual or missing.


Conclusion and download

 I am really happy that I managed to make it work. I hope it will help great Phaser community. If you are interested, you can get whole project (MS Visual Studio 2015) here: SpriterExample.zip
 Most of the project is the Spriter player and the rest are some small help classes necessary to run the example.



Tuesday, August 18, 2015

Mobile Income Report #13 - July 2015






previous parts
  Mobile Income Report #12 - June 2015
  Mobile Income Report #11 - May 2015
  Mobile Income Report #10 - April 2015
  Mobile Income Report #9 - March 2015
  Mobile Income Report #8 - January and February 2015
  Mobile Income Report #7 - December 2014
  Mobile Income Report #6 - November 2014
  Mobile Income Report #5 - October 2014 
  Mobile Income Report #4 - September 2014 
  Mobile Income Report #3 - August 2014
  Mobile Income Report #2 - July 2014
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)


 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports. The portfolio is regularly updated with new information (releases for new platforms, new updates, ...)


What I did in July

  • started working on new HTML5 game. This time it will be classic match-3 game. Below are first screenshots with placeholder graphics downloaded from internet here and there. We have some experience with match-3 genre as we released Flat Jewels Match 3 game in past. FJM3 was minimalistic clone in modern flat design. This time it will be full blown one with all the bells and whistles. Currently, we have basic gameplay with several different kinds of tasks like getting minimal score, clearing floor tiles, collecting special items, ...

  • still learning Unity and Soomla libraries. I decided to take one of our old games - Futoshiki - and rewrite it in Unity. The reason is that I accidentally lost source for Android version and the game was never released on iOS. Fortunately, I still have old bada C++ code for the game core. Futoshiki is Japanese puzzle similar to Sudoku, but still different. You have to fill Latin square with numbers from 1-5, so each number is in each row and column only once. You also have to obey relation signs between adjacent cells. My Futoshiki implementation has built in generator and solver so it never runs out of puzzles. The solver solves it in human like manner, so it can rate difficulty of generated puzzle. Most of the game is currently finished. We implemented Soom.la libraries into it to handle IAPs and social networks. Here are two screenshots from WIP version:



Report

 Here are figures for paid apps in July:


 There is increase from $15,0 i June to $20,4.


 Dominant income from paid versions is from Shards - the Brickbreaker - more than 90%.

 Figures for free versions supported with ads show increase, compared to June, from $57,6 to $103,9.


 Again, the most profitable game is Shards. From ad network point of view, Amazon stays at 20%, while Chartboost increased its share from 42% to 47%. AdMob is losing 9% from 35% to 28%.


 Last income source is from HTML5 licences. For July we earned $988 for Woodventure license. It is less than earnings in June, but it still means I am over my mid-term target ($750).

 Total income for July is $20,4 + $103,9 + $988 = $1 112,3. It is -55% decrease, but I am still happy with it as in figures for June several payments were accumulated for long time work. I am also happy that income from mobile games finally stopped its fall.


Next 

 In August I will continue to work on HTML5 match-3 game in Phaser and I hope we will also finish Futoshiki game made in Unity.







Monday, July 20, 2015

Mobile Income Report #12 - June 2015






previous parts
  Mobile Income Report #11 - May 2015
  Mobile Income Report #10 - April 2015
  Mobile Income Report #9 - March 2015
  Mobile Income Report #8 - January and February 2015
  Mobile Income Report #7 - December 2014
  Mobile Income Report #6 - November 2014
  Mobile Income Report #5 - October 2014 
  Mobile Income Report #4 - September 2014 
  Mobile Income Report #3 - August 2014
  Mobile Income Report #2 - July 2014
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)


 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports. The portfolio is regularly updated with new information (releases for new platforms, new updates, ...)


What I did in June

  •  with help of CocoonJS by Ludei we created native versions of our latest HTML5 game Woodventure for Android and iOS and published it at Google Play, Amazon and iTunes,

  • did some contracted work (small game in HTML5), 
  • started examining Soom.la Unity tools for IAPs and social network profiles,
  • beside this I am still learning Unity and Phaser engine.



Report

 This month the report will have one additional part - income from HTML5 licences as we finally got some money for our work. But let's start with paid mobile apps:


 June was very week month. There is next big decrease in income from paid versions from $23,9 in May to $15 in June. All income came from Shards.

 Next table shows income from free version supported with ads:


  I already added Woodventure, but the game was released in the very end of month. Here is structure of ads income:


 Here is also decrease from $84,2 in May to $57,6 in June. Most noticeable decrease is in Chartboost, which is less than half of previous month income. Contrary, AdMob is almost twice as much.

 And finally, income from licenses for Woodventure and Annihilate for June is $2 398,8.

 So, total numbers for June are $15 + $57,6 + $2 398,8 = $2 471,4. It is +2186% increase!!! But, if I take closer look inside, there is -33% decrease from mobile games income and big one time income for HTML5 work, that took several months to finish.


Next

 In July we started to work on new HTML5 game in Phaser engine. Continue work in Unity and I also published one Unity tutorial on making list of scrolling items you can swipe through.





Tuesday, July 7, 2015

Unity tutorial: swipe controlled ScrollRect with items snapping






 When using mobile apps you often see screen with list of items you can list through with finger swipes. Currently I also need such screen for one of my games. First, I searched through internet and found this page at Bitbucket. There is "HorizontalScrollSnap" component, but unfortunately, I did not managed to make it work, so I decided to create my own.

 My target was also to create component, that will work not only horizontally, but also vertically.

 Here is screenshots of component in action.


  Final component is one C# script (about 300 lines of code) and you can use it in your projects if you download it here.

 Here is short video showing how to set up the component and what are its features:





Sunday, June 28, 2015

Mobile Income Report #11 - May 2015






previous parts
  Mobile Income Report #10 - April 2015
  Mobile Income Report #9 - March 2015
  Mobile Income Report #8 - January and February 2015
  Mobile Income Report #7 - December 2014
  Mobile Income Report #6 - November 2014
  Mobile Income Report #5 - October 2014 
  Mobile Income Report #4 - September 2014 
  Mobile Income Report #3 - August 2014
  Mobile Income Report #2 - July 2014
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)


 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports. The portfolio is regularly updated with new information (releases for new platforms, new updates, ...)


What I did in May

  • in the beginning of May we finished our new HTML5 game Woodventure (you can play it here). Most of the May work was still related to it - looking for sponsors, negotiations with sponsors, solving requests of sponsors, ... Here is loading screen picture from Woodventure by Tomas Kopecky:
  • beside this I took a look inside CocoonJS by Ludei. This service wraps your HTML5 app into native package, that can be uploaded to Google Play or iTunes. In the end of June Woodventure was published at Google Play and at Amazon. iTunes version is still under approval.

  • still learning Unity. And now building simple game with words and letter. We call it Word Me Up and it is whole in modern flat design. From Unity coder point of view the interesting thing is, that except particle effects it is whole build in new Unity UI system.



Report


 Now comes financial part, which is really sad. Here are figures for paid versions:



 Almost all paid income is from Shards. Little bit higher than in April (from $17,4 to $23,9), but still very low. Versions supported with ads raised a bit too:



  Again, small increase from $75,9 in April to $84,2. Most profitable is Shards and from ad network point of view it is still Chartboost.

 Total numbers for May are $23,9 + $84,2 = $108,1. It is +15,9% increase compared to April. But still very far from mid term target ($750).


Next


 Woodventure still takes some time. I will continue with Unity and Phaser. In June we released native version of Woodventure and we are preparing for next HTML5 game.




Sunday, May 31, 2015

Woodventure mahjong connect is finished!

 





 Finally, we finished our new HTML5 game Woodventure mahjong connect. Game was made using Phaser engine.

 Woodventure mahjong connect is clone of popular game with mahjong tiles, where you have to connect matching pairs with way made of maximum three horizontal or vertical lines. Play here.

 Now, we are looking for sponsors. If you are interested, conntact me at my gmail address: tomas[dot]rychnovsky[at]gmail[dot]com

 Game features:
  • 18 levels (= 1 hour and 20 minutes if you do not fail in any level),
  • lot of animals - all animated,
  • nice and calm atmosphere,
  • scales well for different screen resolutions (no black belts on iPhone nor iPad). Allows also fullscreen,
  • ready for easy translation
 






Mobile Income Report #10 - April 2015






previous parts
  Mobile Income Report #9 - March 2015
  Mobile Income Report #8 - January and February 2015
  Mobile Income Report #7 - December 2014
  Mobile Income Report #6 - November 2014
  Mobile Income Report #5 - October 2014 
  Mobile Income Report #4 - September 2014 
  Mobile Income Report #3 - August 2014
  Mobile Income Report #2 - July 2014
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)


 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports. The portfolio is regularly updated with new information (releases for new platforms, new updates, ...)


What I did in April


  • in April I was working on our second HTML5 game made with Phaser engine.The game names Woodventure and it is mahjong connect clone. We replaced traditional mahjong tiles with pictures of animals and things you can find in woods. All animals are animated so the play board is "live" during game. We finished the game in the beginning of May and now we are negotiating with sponsors. You can try the game here and below is few pictures:



  •  finally, I continued in learning Unity.



Report


 Here are April figures for paid apps:


 There is decrease from $24,2 in March to $17,4.



 Shards - the Brickbreaker stays the most profitable game.

 There is also decrease in apps supported with ads. From $101,2 in March to $75,9 in April:



 Total numbers for April are $17,4 + $75,9 = $93,3. It is -25,6% decrease compared to March. If last month was very bad, this one is even worse...


Next


 I am continuing my journey to $750 target. In March I wrote some new Phaser tutorials and started exploring CocoonJS, that will allow us publish Woodventure on appstores.