<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/atom10full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Living and Programming - YJ Park's Blog]]></title>
  
  <link href="http://blog.yjpark.org/" />
  <updated>2013-04-16T00:06:42+08:00</updated>
  <id>http://blog.yjpark.org/</id>
  <author>
    <name><![CDATA[YJ Park]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/atom+xml" href="http://feeds.feedburner.com/yjpark" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="yjpark" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><entry>
    <title type="html"><![CDATA[Marmalade Tricks and Tips]]></title>
    <link href="http://blog.yjpark.org/blog/2013/04/14/marmalade-tricks-and-tips/" />
    <updated>2013-04-14T20:22:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2013/04/14/marmalade-tricks-and-tips</id>
    <content type="html"><![CDATA[<p>During the days to develop our first game: <a href="https://itunes.apple.com/us/app/day-day-birds/id608802879?mt=8&amp;uo=4">Day Day Birds</a>, I went through the progress of learning to use Marmalade, generally it&#8217;s very easy to use, and save me lot of time, though there are some little things that I hoped that I know earlier.</p>

<h2>Stack Size</h2>

<p>The game started to crash randomly before I noticed, it&#8217;s quite hard to debug, especially without the tools in Xcode or other IDEs provide. And it never crash in the simulator, so the debugging is quite awkward, a lot of guess, build, test-run going on.</p>

<p>When it crashed on iOS device, some information were provided, though full stack trace is not availabe, and the place of crash is not consistent. After 2 or 3 days and nights figihting with this bug, finally found out the root cause, which is very surprising.</p>

<!--more-->


<p>It&#8217;s caused by stack overflow, since Marmalade is designed to support many different mobile devices, many of them are with limited hardware, the stack size is 32k by default, since I&#8217;m having a LUA layer, and also allocated some string buffer in stack for convinience, it got overflowed, so caused the random crash.</p>

<p>There is actually a <a href="http://www.madewithmarmalade.com/devnet/forum/advice-anyone-experiencing-heap-corruption-3">forum thread</a> mentioned this.</p>

<p>Since I only plan to support the modern devices (iPhone, iPad, maybe Android as well), gave it a much bigger setting fix the crash perfectly.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>   [s3e]
</span><span class='line'>   SysStackSize=4000000</span></code></pre></td></tr></table></div></figure>


<h2>Accelerate framework</h2>

<p>I&#8217;m using libBass for the audio playpack, for some reason it require Accelarate frame under iOS to compile. so I add <code>iphone-link-opts="-weak_framework Accelerate"</code> into the mkf file.</p>

<p>For unknown reason, the Accelerate.framework stub in <code>/Developer/Marmalade/6.2/s3e/deploy/plugins/iphone/sys_libs/System/Library/Frameworks/Accelerate.frameworks/Accelerate</code> is not working, might be the nested frameworks inside it.</p>

<p>Not really understand how the stub frameworks work in Marmalade, seems a smart way to use the system&#8217;s SDK libraries, though a hacky solution make it compiled.</p>

<p>Current fix is to copy the framework from <code>/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk/System/Library/Frameworks/Accelerate.framework</code>. Not sure whether there is side effects.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>cp -r /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk/System/Library/Frameworks/Accelerate.framework/* /Developer/Marmalade/6.2/s3e/deploy/plugins/iphone/sys_libs/System/Library/Frameworks/Accelerate.framework/</span></code></pre></td></tr></table></div></figure>


<h2>iOS device crash report</h2>

<p>This page explains how to read the crash report nicely, also don&#8217;t forget to save the mapping file of the version you submitted to app store, otherwise you will have no idea to debug when get crash logs from Apple.</p>

<p><a href="https://marmalade.zendesk.com/entries/22126117-how-to-map-iphone-crash-log-addresses-to-your-code">How to map iPhone crash log addressed to your code</a></p>

<h2>Some mkb settings</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>deployments
</span><span class='line'>{
</span><span class='line'>    name="Slingshot"
</span><span class='line'>    version=1.0
</span><span class='line'>
</span><span class='line'>    ["Default"]
</span><span class='line'>    iphone-provisioning-profile="data/provisions/DayDayBirdsDev.mobileprovision"
</span><span class='line'>    iphone-enable-4inch-retina=1
</span><span class='line'>    iphone-no-splash=1
</span><span class='line'>    iphone-prerendered-icon=1
</span><span class='line'>    iphone-icon="data/icon/Icon.png"
</span><span class='line'>    iphone-icon-high-res="data/icon/Icon@2x.png"
</span><span class='line'>    iphone-icon-ipad="data/icon/Icon-72.png"
</span><span class='line'>    iphone-icon-ipad-high-res="data/icon/Icon-72@2x.png"
</span><span class='line'>    iphone-icon-ipad-search="data/icon/Icon-Small-50.png"
</span><span class='line'>    iphone-icon-ipad-search-high-res="data/icon/Icon-Small-50@2x.png"
</span><span class='line'>    iphone-icon-settings="data/icon/Icon-Small.png"
</span><span class='line'>    iphone-icon-settings-high-res="data/icon/Icon-Small@2x.png"
</span><span class='line'>    
</span><span class='line'>    #Android
</span><span class='line'>    android-icon="data/android/icon/icon_48.png"
</span><span class='line'>    android-icon-gallery="data/android/icon/icon_170.png"
</span><span class='line'>    android-icon-hdpi="data/android/icon/icon_72.png"
</span><span class='line'>    android-icon-ldpi="data/android/icon/icon_36.png"
</span><span class='line'>    android-icon-mdpi="data/android/icon/icon_48.png"
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p><code>iphone-enable-4inch-retina=1</code> enabled the iPhone 5 wide screen mode.</p>

<h2>Some app.icf settings</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>DispFixRot="Landscape"
</span><span class='line'>IOSDispScaleFactor=200
</span><span class='line'>
</span><span class='line'>{ID=IPHONE "iPad1,1"}
</span><span class='line'>[s3e]
</span><span class='line'>memSize = 30000000
</span><span class='line'>SysStackSize=1000000
</span><span class='line'>{ID=IPHONE "iPad2,1","iPad2,2","iPad2,3","iPad2,4","iPad2,5","iPad2,6","iPad2,7"}
</span><span class='line'>[s3e]
</span><span class='line'>memSize = 64000000
</span><span class='line'>{ID=IPHONE "iPod1,1","iPod2,1","iPod3,1","iPod4,1","iPhone1,1","iPhone1,2","iPhone2,1"}
</span><span class='line'>[s3e]
</span><span class='line'>memSize = 34000000
</span><span class='line'>SysStackSize=1000000
</span><span class='line'>{ID=IPHONE "iPod5,1","iPhone3,1","iPhone3,2","iPhone4,1","iPhone4,2"}
</span><span class='line'>[s3e]
</span><span class='line'>memSize = 64000000
</span><span class='line'>{OS=ANDROID}
</span><span class='line'>[s3e]
</span><span class='line'>memSize = 80000000
</span><span class='line'>{OS=OSX}
</span><span class='line'>[s3e]
</span><span class='line'>memSize = 256000000
</span><span class='line'>{}</span></code></pre></td></tr></table></div></figure>


<p><code>DispFixRot="Landscape"</code> is to lock the screen rotation to be landscape only, I&#8217;ve met quite some problem with landscape, probably will write another post about it.</p>

<p><code>IOSDispScaleFactor=200</code> is used to activate the retina screen support, so the resolution of retina iPad will be 2048 x 1536,</p>

<p>It took me quite some efforts to learn how to do the device-specific settings in app.icf, the syntax is quite complex, the marmalade documents actually cover this, though lacking good samples.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Initial Release of s3eBass - Marmalade extension for BASS audio engine]]></title>
    <link href="http://blog.yjpark.org/blog/2012/11/06/initial-release-of-s3ebass-marmalade-extension-for-bass-audio-engine/" />
    <updated>2012-11-06T23:24:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/11/06/initial-release-of-s3ebass-marmalade-extension-for-bass-audio-engine</id>
    <content type="html"><![CDATA[<p>The audio and music are playing a very important role in games, for our future games, I want them to have good quality of audio and music, e.g. don&#8217;t use short loop of mp3 music, but something much longer and more dynamic without taking much space. My first thought is to use MIDI+soundfonts or some mod-based music, so I spent some time to try to see the possibility.</p>

<p>There are quite some libraries to support xm playback, though I can&#8217;t find any Marmalade extensions on the web, in the forum someone mentioned that they made use of FMOD in their game, though there is no code shared, and FMOD is quite expansive.</p>

<p>After some search, I decided to use <a href="http://www.un4seen.com/bass.html">BASS audio engine</a>, which is quite powerful, with well designed API, not bad documentation and sample, and a reasonable price for small projects (the shareware license can cover product with small price).</p>

<p>Now I&#8217;ve got a working extension(though the only test I did was to play a xm file on OSX, iOS and Android), think other people maybe interesting in the extension or how to create similar extensions, so I&#8217;m going to share the extension and some experiences I&#8217;ve learn from the process(not in this post).</p>

<!-- more -->


<h2>Quick Note about Implementation</h2>

<p>BASS itself support many platform, the platforms I need are: OSX, iOS, Android. It&#8217;s pure C, so it shouldn&#8217;t be too hard to make it work with Marmalade. Though it took me quite a while to get some basic idea about the Marmalade extension system.</p>

<p>Most documentation from Marmalade about extensions seems focusing on writing platform specific codes in custom extension, in this case, it&#8217;s actually much more easier since BASS is already platform independent, all we need is to make it work with Marmalade&#8217;s build system.</p>

<p>Will write more about how to wrap C libraries into Marmalade extension in other posts later.</p>

<h2>Code of the Extension</h2>

<p>Since basically I have no idea about how to use BASS now, I just tried to use some codes from the BASS examples, it works pretty good, the xm files sounds quite good.</p>

<p>Think I will write some wrapper layer around the C function calls to expose audio functionalities to C++, XML and Lua codes. Guess I will have much better idea about it in a couple of months after our first game get done.</p>

<p>I&#8217;ve put the codes at <a href="https://github.com/yjpark/s3eBass">Github</a>, feel free to clone it, and give it a try. see the github pages for more details about it.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Convert Cocos2D Font (BMFont) to Marmalade's GxFont]]></title>
    <link href="http://blog.yjpark.org/blog/2012/11/05/convert-cocos2d-font-bmfont-to-marmalades-gxfont/" />
    <updated>2012-11-05T19:16:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/11/05/convert-cocos2d-font-bmfont-to-marmalades-gxfont</id>
    <content type="html"><![CDATA[<p>In 2D games, it&#8217;s typical to use image based font for UI elements, which can provide better graphic result, fast rendering, and usually smaller then true type fonts (especially if you want to support languages with big character set, e.g. Chinese).</p>

<p>There are quite some tools to generate such font images, I&#8217;m using <a href="http://www.bmglyph.com/">bmGlyph</a> as the font generator, it can publish the popular &#8220;Cocos2d / BMFont&#8221; format, though it&#8217;s not directly usable in Marmalade.</p>

<p>Marmalade is using its own font format, and provide a font generator in the SDK, though it only support plain color, and when I feed it with some Chinese characators, they are not included in the generated files. I&#8217;m using the OS X version of the font builder, not sure about how the Windows version works.</p>

<p>My first thought was to add function to use the BMFont generated, though it&#8217;s not an easy task, also I want to use IwGame&#8217;s label components, which are based on Marmalade&#8217;s GxFont and Truetype support.</p>

<p>After reading <a href="http://docs.madewithmarmalade.com/native/api_reference/iwgxfontapidocumentation/iwgxfontapioverview/iwgxfontfiles.html">GxFont Reference</a>, turns out it&#8217;s using a fairly simple format, so I decided to write a converter to create gxfont files.</p>

<!-- more -->


<h2>Code of the Converter</h2>

<p>I&#8217;ve put the codes at <a href="https://github.com/yjpark/marmalade-tools">Github</a>, feel free to clone it, and try to run it. see the github pages for more details about it.</p>

<p>The converter support UTF-8 characters with no problem, the size of the tga files is a bit big comparing to the Cocos2d version, since more empty spaces are needed for GxFont format.</p>

<p>It&#8217;s kind of a straight-forward implementation, and probably there are ways to make it better, especially if the bmGlyph&#8217;s console support is out (in the coming feature list now), the whole process of extracting characters from data file, create Cocos2d font, convert to GxFont can be fully automatied.</p>

<p>Just read the code if you&#8217;re interested in the implementation details. :)</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Level Editor Based on IwGame - Introduction]]></title>
    <link href="http://blog.yjpark.org/blog/2012/10/12/level-editor-based-on-iwgame-introduction/" />
    <updated>2012-10-12T22:56:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/10/12/level-editor-based-on-iwgame-introduction</id>
    <content type="html"><![CDATA[<p>It&#8217;s been more than a month since my post about the idea of <a href="http://blog.yjpark.org/blog/2012/08/30/game-engine-based-on-marmalade-and-iwgame/">game engine based on Marmalade and IwGame</a>, after the post, spent many hours busy coding, now I&#8217;ve got the basic level editor up running, I think it&#8217;s pretty cool, so here are some details about it.</p>

<p>Here is a screenshot of the level editor:</p>

<p><img src="http://blog.yjpark.org/images/pfgame/leveleditor-screenshot-1.png"></p>

<!-- more -->


<h2>Updates about Original Post</h2>

<p>Before talking about the level editor, first I want to share some updates about Marmalade and IwGame in the last month.</p>

<p>First, Marmalade 6.1 was released, it&#8217;s great for me, the 2 most useful feature for me are: Open GL ES 2.0 shader support in simulator, easy to debug shader now, and OSX deployment to send game/editor as running application to Graphic Artists.</p>

<p>Second, DrMop commented in the original post, assure that IwGame is very actively developed and <a href="http://www.drmop.com/index.php/2012/10/08/iwgame-0-4-coming-very-soon-iwgame-is-going-portable/">version 0.40 is about to be released</a>.</p>

<p>Quick test with Chinese characters in CIwGameActorText, it works out of box, just specify a truetype font, write the text in UTF-8, then it&#8217;s done. I guess there is no need for CIwGameString to support unicode, since it can pass the bytes to Marmalade correctly.</p>

<h2>Current Features</h2>

<p>Now back to the level editor, it support image objects with layer(display order), depth(for parallel perspective), users can add/remove/copy/group objects, and can change position/size/scale/angle/origin with mouse, zoom in/out and move the camera around. Also I&#8217;ve integrated a Box2D debug view, and you can edit simple shape in it too (boxes and circles).</p>

<p>Actually it&#8217;s a bit easier than I thought to implement it, caused me about 5 weeks so far, worked quite hared during the time, but also had a basic animation editor and a game prototype at the same time, so the pure time on it was about 3 weeks.</p>

<p>Our graphic artists have already used the editor to build a few nice scenes and they are getting more productively with it day by day, It&#8217;s just what I wished it to be: a tool to make developer and other roles to collaborative more effectively, think it&#8217;s at the right direction.</p>

<p>Also it&#8217;s extremely useful for prototyping and debugging, the way I did it is to add a few tools around the objects, so when you&#8217;re running your game, you can switch to editor mode at any time (by tapping the tab key), then you can check the scene to see what&#8217;s going on, or adjust the objects right in the editor, then you can switch back to game mode. It feels like you can freeze time in game at any time, then make changes, then go back, very cool, and very useful.</p>

<p>To make it clear, here is a screenshot of our game prototype:
<img src="http://blog.yjpark.org/images/pfgame/leveleditor-screenshot-2.png"></p>

<p>After I switch to editor mode, and zoom out a bit, I can get the screen as the first screenshot, then I can adjust the level, and switch back to keep playing. Our graphic artist feels very happy with this in game editing ability, they can see their changes instantly, which make the whole process very efficiently.</p>

<p>Another very useful feature is the Box2D shape editor and debug view, we can create boxes and circles right through the level editor, they will be effective instantly, so for a game based on Box2D, it&#8217;s very easy to create the levels by non-programmers.</p>

<p>Here is the same game prototype with Box2D debug view enabled:
<img src="http://blog.yjpark.org/images/pfgame/leveleditor-screenshot-3.png"></p>

<p>As you can see, we use boxes and circles to create a rather complicate level. Also it&#8217;s very helpful to debug the collisions between objects, e.g. when I was implementing the effect of arrows hitting targets.</p>

<h2>What&#8217;s Missing</h2>

<p>As a basic level editor with advanced features (particle, animations&#8230;), I think it&#8217;s quite complete and usable, we&#8217;ve got quite some prototype scenes with it till now, and the artists feel happy with it most of the time.</p>

<p>The biggest missed feature is undo/redo, only deleting have a quick undo since it can cause big trouble when touch wrong key accidentally. To make it better, all version of saved files are kept on disk, so if you made big mistakes, then it&#8217;s recoverable by hand. It&#8217;s non trivial to implement a good undo/redo system, so probably this feature will only be added in a much later stage.</p>

<p>Also there is on gui at all, all functions are done by keyboard shortcut and mouse movement, so there is a learning curve, and you&#8217;ll feel a bit awkward at first. Though this is the quickest way for implementation and also for actually using IMO, after a few days using it, both of our graphic artists can use it with no big problem, and they said that it&#8217;s a bit geeky feeling when using it. :)</p>

<p>And manual works required to create a skeleton scene and import images to it, it&#8217;s not hard, just running some python scripts, but it&#8217;s still not so simple for non-programmers.</p>

<h2>What&#8217;s Next</h2>

<p>Guess I&#8217;ll keep improving it, fixing bugs first, now the focus is character animation editor, and the game prototype. After that, I&#8217;ll add particle feature to the level editor.</p>

<p>I feel quite happy doing this kind of tool works, and actually it&#8217;s not hard to make it usable as a standalone project and let other people to use it. e.g. I can make a converter to generate cocos builder format, then it can be used in cocos2d projects. Or if I make my animation editor to export spriter&#8217;s xml syntax, it can be used in many other projects too.</p>

<p>And at least for myself and our graphic artists, we think that our homebrew tools are much easier to use and feature complete (for just our needs) comparing to the tools we&#8217;ve tried. e.g. cocos builder, sprite helper, and spriter. Not saying that my editors are better products, just they are tailored by exactly our need and my design approach, and since it&#8217;s integrated in the exact game process, the workflow is much better comparing to a 3rd party tools. Also our level is pretty big(currently the demo scene is about 20000 pixel wide, and the engine/editor can support much bigger usage), I can&#8217;t find a proper tool to handle such big scene.</p>

<p>Though making a generic tool will involve many not so interesting works, and it&#8217;s very hard to make it works for more people, and probably my tools are just too tailored to our need, so I think I will keep focusing on our games in the near future.</p>

<p>But anyway, I already have some demo scene editor running as OS X application, will make it downloadable in next few days, after I wrote a very basic manual about it. like Jakub commented in the original post, even if I decided to keep it private, it can still help others a bit, and maybe by using it in a experimental way, people can get some ideas about improving their own tools.</p>

<p>If you are interested to see more information about the editor, please leave comments, thanks.</p>

<p>I&#8217;ll try to post more about technical details about some aspects of the editors, some hacks I used, and some mistakes I&#8217;ve overcomed.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[OpenGL ES 2.0 Shader in Marmalade]]></title>
    <link href="http://blog.yjpark.org/blog/2012/10/02/opengl-es-2-dot-0-shader-in-marmalade/" />
    <updated>2012-10-02T18:00:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/10/02/opengl-es-2-dot-0-shader-in-marmalade</id>
    <content type="html"><![CDATA[<p>Marmalade provide good support for writing custom shaders in it, though it&#8217;s not easy to get all the information to start writing the first shader in my case, here is some information that I gathered during the process.</p>

<p>I decided to only support Open GL 2.0 Shaders in our games, most current devices support it, and as a small team, supporting older devices is a bit hard since we don&#8217;t have testers for now, also the architect of 2.0 is simpler and cleaner.</p>

<p>The sample shader&#8217;s function is to replace non-transparent part of the image to a given color, then the color can be changed programmingly (also by xml thanks to IwGame). Basically the images will be just working as masks, the actually color to be rendered are controlled by the shader.</p>

<p>I will not cover the basics about Open GL Shaders, there are plenty of information on the web about that, also a PDF doc is included in Marmalade installation, it&#8217;s a good start point to me, you should read it first to get the concepts.</p>

<!-- more -->


<h2>Marmalade Rendering with Custom Shader</h2>

<p>Marmalade support shader very well by the <a href="http://docs.madewithmarmalade.com/native/api_reference/api/classCIwGxShaderTechnique.html">CIwGxShaderTechnique</a> class, to use it, you need to set it to material, here is the snnipet for that:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CIwMaterial</span><span class="o">*</span> <span class="n">mat</span> <span class="o">=</span> <span class="n">IW_GX_ALLOC_MATERIAL</span><span class="p">();</span>
</span><span class='line'><span class="n">mat</span><span class="o">-&gt;</span><span class="n">SetTexture</span><span class="p">(</span><span class="n">image</span><span class="o">-&gt;</span><span class="n">getImage2D</span><span class="p">()</span><span class="o">-&gt;</span><span class="n">GetMaterial</span><span class="p">()</span><span class="o">-&gt;</span><span class="n">GetTexture</span><span class="p">());</span>
</span><span class='line'><span class="n">mat</span><span class="o">-&gt;</span><span class="n">SetShaderTechnique</span><span class="p">(</span><span class="n">shader</span><span class="p">);</span>
</span><span class='line'><span class="n">IwGxSetMaterial</span><span class="p">(</span><span class="n">mat</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>The shader here is a pointer to CIwGxShaderTechnique, and the image is a pointer to CIwGameImage (part of IwGame), if you are not using IwGame, you can use Iw2d, or IwGx directly.</p>

<p>The following function can load a shader from a resource group.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CIwGxShaderTechnique</span><span class="o">*</span> <span class="n">getShader</span><span class="p">(</span><span class="k">const</span> <span class="kt">char</span><span class="o">*</span> <span class="n">shaderName</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="n">CIwGxShaderTechnique</span><span class="o">*</span> <span class="n">shaderTemplate</span> <span class="o">=</span> <span class="p">(</span><span class="n">CIwGxShaderTechnique</span><span class="o">*</span><span class="p">)</span><span class="n">IwGetResManager</span><span class="p">()</span><span class="o">-&gt;</span><span class="n">GetResNamed</span><span class="p">(</span><span class="n">shaderName</span><span class="p">,</span> <span class="s">&quot;CIwGxShaderTechnique&quot;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">shaderTemplate</span> <span class="o">==</span> <span class="nb">NULL</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">shader</span> <span class="o">=</span> <span class="k">new</span> <span class="n">CIwGxShaderTechnique</span><span class="p">();</span>
</span><span class='line'>    <span class="n">IwSerialiseOpen</span><span class="p">(</span><span class="s">&quot;shader-Duplicate.bin&quot;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'>    <span class="n">shaderTemplate</span><span class="o">-&gt;</span><span class="n">Serialise</span><span class="p">();</span>
</span><span class='line'>    <span class="n">IwSerialiseClose</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">IwSerialiseOpen</span><span class="p">(</span><span class="s">&quot;shader-Duplicate.bin&quot;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</span><span class='line'>    <span class="n">shader</span><span class="o">-&gt;</span><span class="n">Serialise</span><span class="p">();</span>
</span><span class='line'>    <span class="n">IwSerialiseClose</span><span class="p">();</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">shader</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Note: since I need multiple instance of the shader for diffrent images with differnt colors, here I use a quick solution with marmalade&#8217;s serialization, which is NOT thread safe due to the hard code file name.</p>

<p>Load the resource group as this:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">IwGetResManager</span><span class="p">()</span><span class="o">-&gt;</span><span class="n">LoadGroup</span><span class="p">(</span><span class="s">&quot;effect/Shaders.group&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Files Used</h2>

<p>You need to include the shader files in the asset section of the mkb/mkf file, like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">files</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="p">[</span><span class="n">Data</span><span class="p">]</span>
</span><span class='line'>    <span class="p">(</span><span class="n">data</span><span class="p">)</span>
</span><span class='line'>    <span class="n">effect</span><span class="o">/</span><span class="n">Shaders</span><span class="p">.</span><span class="n">group</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="n">assets</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="p">(</span><span class="n">data</span><span class="o">-</span><span class="n">ram</span><span class="o">/</span><span class="n">data</span><span class="o">-</span><span class="n">gles1</span><span class="p">)</span>
</span><span class='line'>    <span class="n">effect</span><span class="o">/</span><span class="n">Shaders</span><span class="p">.</span><span class="n">group</span><span class="p">.</span><span class="n">bin</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Please refer to Marmalade&#8217;s documents if you are not familiar with the resource compiling process and mkb syntaxes.</p>

<p>Here is data/effect/Shaders.group</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CIwResGroup</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="n">name</span> <span class="s">&quot;PettyFun Environment Shaders&quot;</span>
</span><span class='line'>    <span class="n">shared</span> <span class="kc">true</span>
</span><span class='line'>
</span><span class='line'>    <span class="s">&quot;./PfMaskEffectShader.itx&quot;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The content of data/effect/PfMaskEffectShader.itx</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CIwGxShaderTechnique</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="n">name</span> <span class="s">&quot;PfMaskEffectShader&quot;</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">param</span> <span class="s">&quot;p_Color&quot;</span> <span class="n">vec4</span> <span class="mi">1</span> <span class="p">{</span><span class="mf">0.0</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">shader</span> <span class="s">&quot;vertex&quot;</span>
</span><span class='line'>    <span class="p">{</span>
</span><span class='line'>        <span class="n">attribute</span> <span class="n">highp</span> <span class="n">vec4</span> <span class="n">inVert</span><span class="p">;</span>
</span><span class='line'>        <span class="n">attribute</span> <span class="n">mediump</span> <span class="n">vec2</span> <span class="n">inUV0</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">uniform</span> <span class="n">highp</span> <span class="n">mat4</span> <span class="n">inPMVMat</span><span class="p">;</span>
</span><span class='line'>        <span class="n">uniform</span> <span class="n">mediump</span> <span class="n">vec2</span> <span class="n">inUVOffset</span><span class="p">;</span>
</span><span class='line'>        <span class="n">uniform</span> <span class="n">mediump</span> <span class="n">vec2</span> <span class="n">inUVScale</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">varying</span> <span class="n">mediump</span> <span class="n">vec2</span> <span class="n">v_UV0</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="kt">void</span> <span class="n">main</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
</span><span class='line'>        <span class="p">{</span>
</span><span class='line'>            <span class="n">gl_Position</span> <span class="o">=</span> <span class="n">inPMVMat</span> <span class="o">*</span> <span class="n">inVert</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>            <span class="n">v_UV0</span> <span class="o">=</span> <span class="n">inUV0</span> <span class="o">*</span> <span class="n">inUVScale</span> <span class="o">+</span> <span class="n">inUVOffset</span><span class="p">;</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>    <span class="n">shader</span> <span class="s">&quot;fragment&quot;</span>
</span><span class='line'>    <span class="p">{</span>
</span><span class='line'>        <span class="n">uniform</span> <span class="n">sampler2D</span> <span class="n">inSampler0</span><span class="p">;</span>
</span><span class='line'>        <span class="n">varying</span> <span class="n">mediump</span> <span class="n">vec2</span> <span class="n">v_UV0</span><span class="p">;</span>
</span><span class='line'>        <span class="n">uniform</span> <span class="n">mediump</span> <span class="n">vec4</span> <span class="n">p_Color</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="kt">void</span> <span class="n">main</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
</span><span class='line'>        <span class="p">{</span>
</span><span class='line'>            <span class="n">mediump</span> <span class="n">vec4</span> <span class="n">c</span> <span class="o">=</span> <span class="n">texture2D</span><span class="p">(</span><span class="n">inSampler0</span><span class="p">,</span> <span class="n">v_UV0</span><span class="p">);</span>
</span><span class='line'>            <span class="k">if</span> <span class="p">(</span><span class="n">c</span><span class="p">.</span><span class="n">a</span> <span class="o">&lt;</span> <span class="mf">0.1</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                <span class="n">gl_FragColor</span> <span class="o">=</span> <span class="n">vec4</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">);</span>
</span><span class='line'>            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>                <span class="n">gl_FragColor</span> <span class="o">=</span> <span class="n">p_Color</span><span class="p">;</span>
</span><span class='line'>            <span class="p">}</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Please read <a href="http://docs.madewithmarmalade.com/native/api_reference/api/group__IwGxShaderTechnique.html">IwGxShaderTechnique Reference</a> for the list of the attributes that you can use. It took me quite a while to find this document since this is no links to this page on the class reference page. This is VERY useful for writing shaders in Marmalade.</p>

<h2>Update Params By Code and XML</h2>

<p>the <strong>param</strong> in the shader is for the parameters from your code, change it&#8217;s value like this.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
</pre></td><td class='code'><pre><code class='cpp'><span class='line'><span class="kt">void</span> <span class="n">PfShaderEffect</span><span class="o">::</span><span class="n">SetShaderParam</span><span class="p">(</span><span class="k">const</span> <span class="kt">char</span> <span class="o">*</span><span class="n">paramName</span><span class="p">,</span> <span class="n">CIwGxShaderUniform</span><span class="o">::</span><span class="n">CIwGxShaderUniformType</span> <span class="n">type</span><span class="p">,</span> <span class="k">const</span> <span class="kt">void</span><span class="o">*</span> <span class="n">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">Shader</span> <span class="o">==</span> <span class="nb">NULL</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">CIwGxShaderUniform</span><span class="o">*</span> <span class="n">param</span> <span class="o">=</span> <span class="n">Shader</span><span class="o">-&gt;</span><span class="n">GetParam</span><span class="p">(</span><span class="n">paramName</span><span class="p">);</span>
</span><span class='line'>    <span class="k">if</span><span class="p">(</span> <span class="n">param</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="n">param</span><span class="o">-&gt;</span><span class="n">Set</span><span class="p">(</span><span class="n">type</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">value</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="n">PfTrace</span><span class="p">(</span><span class="s">&quot;Shader Param Not Exist: %s&quot;</span><span class="p">,</span> <span class="n">paramName</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kt">void</span> <span class="n">PfShaderEffect</span><span class="o">::</span><span class="n">SetShaderParamAsInt</span><span class="p">(</span><span class="k">const</span> <span class="kt">char</span> <span class="o">*</span><span class="n">paramName</span><span class="p">,</span> <span class="kt">int</span> <span class="n">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="n">SetShaderParam</span><span class="p">(</span><span class="n">paramName</span><span class="p">,</span> <span class="n">CIwGxShaderUniform</span><span class="o">::</span><span class="n">INT</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">value</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="kt">void</span> <span class="n">PfShaderEffect</span><span class="o">::</span><span class="n">SetShaderParamAsFloat</span><span class="p">(</span><span class="k">const</span> <span class="kt">char</span> <span class="o">*</span><span class="n">paramName</span><span class="p">,</span> <span class="kt">float</span> <span class="n">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="n">SetShaderParam</span><span class="p">(</span><span class="n">paramName</span><span class="p">,</span> <span class="n">CIwGxShaderUniform</span><span class="o">::</span><span class="n">FLOAT</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">value</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kt">void</span> <span class="n">PfShaderEffect</span><span class="o">::</span><span class="n">SetShaderParamAsColor</span><span class="p">(</span><span class="k">const</span> <span class="kt">char</span> <span class="o">*</span><span class="n">paramName</span><span class="p">,</span> <span class="n">CIwColour</span> <span class="n">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="kt">float</span> <span class="n">color</span><span class="p">[</span><span class="mi">4</span><span class="p">];</span>
</span><span class='line'>    <span class="n">color</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="mf">1.0f</span> <span class="o">*</span> <span class="n">value</span><span class="p">.</span><span class="n">r</span> <span class="o">/</span> <span class="mh">0xff</span><span class="p">;</span>
</span><span class='line'>    <span class="n">color</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="mf">1.0f</span> <span class="o">*</span> <span class="n">value</span><span class="p">.</span><span class="n">g</span> <span class="o">/</span> <span class="mh">0xff</span><span class="p">;</span>
</span><span class='line'>    <span class="n">color</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mf">1.0f</span> <span class="o">*</span> <span class="n">value</span><span class="p">.</span><span class="n">b</span> <span class="o">/</span> <span class="mh">0xff</span><span class="p">;</span>
</span><span class='line'>    <span class="n">color</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mf">1.0f</span> <span class="o">*</span> <span class="n">value</span><span class="p">.</span><span class="n">a</span> <span class="o">/</span> <span class="mh">0xff</span><span class="p">;</span>
</span><span class='line'>    <span class="n">SetShaderParam</span><span class="p">(</span><span class="n">paramName</span><span class="p">,</span> <span class="n">CIwGxShaderUniform</span><span class="o">::</span><span class="n">VEC4</span><span class="p">,</span> <span class="n">color</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kt">void</span> <span class="n">PfShaderEffect</span><span class="o">::</span><span class="n">UpdateColorFromAnimation</span><span class="p">(</span><span class="n">CIwColour</span><span class="o">*</span> <span class="n">color</span><span class="p">,</span> <span class="n">CIwGameAnimInstance</span> <span class="o">*</span><span class="n">animation</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="n">CIwGameAnimFrameVec4</span><span class="o">*</span> <span class="n">value</span> <span class="o">=</span> <span class="p">(</span><span class="n">CIwGameAnimFrameVec4</span><span class="o">*</span><span class="p">)</span><span class="n">animation</span><span class="o">-&gt;</span><span class="n">getCurrentData</span><span class="p">();</span>
</span><span class='line'>    <span class="n">color</span><span class="o">-&gt;</span><span class="n">r</span> <span class="o">=</span> <span class="n">value</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">.</span><span class="n">x</span><span class="p">;</span>
</span><span class='line'>    <span class="n">color</span><span class="o">-&gt;</span><span class="n">g</span> <span class="o">=</span> <span class="n">value</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">.</span><span class="n">y</span><span class="p">;</span>
</span><span class='line'>    <span class="n">color</span><span class="o">-&gt;</span><span class="n">b</span> <span class="o">=</span> <span class="n">value</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">.</span><span class="n">z</span><span class="p">;</span>
</span><span class='line'>    <span class="n">color</span><span class="o">-&gt;</span><span class="n">a</span> <span class="o">=</span> <span class="n">value</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">.</span><span class="n">w</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Since I&#8217;m using IwGame, it&#8217;s very easy to make the color controlled by the XOML animation, all I need to do is to override the UpdateFromAnimation method of CIwGameActor, and handle the color value from it.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='cpp'><span class='line'><span class="kt">bool</span> <span class="n">PfMaskEffect</span><span class="o">::</span><span class="n">UpdateFromAnimation</span><span class="p">(</span><span class="n">CIwGameAnimInstance</span> <span class="o">*</span><span class="n">animation</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">PfShaderEffect</span><span class="o">::</span><span class="n">UpdateFromAnimation</span><span class="p">(</span><span class="n">animation</span><span class="p">))</span>
</span><span class='line'>        <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>    <span class="kt">bool</span> <span class="n">delta</span> <span class="o">=</span> <span class="n">animation</span><span class="o">-&gt;</span><span class="n">isDelta</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>    <span class="kt">unsigned</span> <span class="kt">int</span> <span class="n">element_name</span> <span class="o">=</span> <span class="n">animation</span><span class="o">-&gt;</span><span class="n">getTargetPropertyHash</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">element_name</span> <span class="o">==</span> <span class="n">PfHash</span><span class="p">(</span><span class="s">&quot;Color&quot;</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'>        <span class="n">UpdateColorFromAnimation</span><span class="p">(</span><span class="o">&amp;</span><span class="n">Color</span><span class="p">,</span> <span class="n">animation</span><span class="p">);</span>
</span><span class='line'>        <span class="n">SetShaderParamAsColor</span><span class="p">(</span><span class="s">&quot;p_Color&quot;</span><span class="p">,</span> <span class="n">Color</span><span class="p">);</span>
</span><span class='line'>    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>        <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Then you can generate smooth color switch animation by pure XML as normal IwGame Animation.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='xml'><span class='line'><span class="nt">&lt;Template</span> <span class="na">Name=</span><span class="s">&quot;MaskColorTimelineTemplate&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;Animation</span> <span class="na">Name=</span><span class="s">&quot;MaskColorAnim$name$&quot;</span> <span class="na">Duration=</span><span class="s">&quot;$duration$&quot;</span> <span class="na">Type=</span><span class="s">&quot;vec4&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;Frame</span> <span class="na">Value=</span><span class="s">&quot;$startcolor$&quot;</span> <span class="na">Time=</span><span class="s">&quot;0&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>        <span class="nt">&lt;Frame</span> <span class="na">Value=</span><span class="s">&quot;$endcolor$&quot;</span> <span class="na">Time=</span><span class="s">&quot;$duration$&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/Animation&gt;</span>
</span><span class='line'>    <span class="nt">&lt;Timeline</span> <span class="na">Name=</span><span class="s">&quot;MaskColorTimeline$name$&quot;</span> <span class="na">AutoPlay=</span><span class="s">&quot;true&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>        <span class="nt">&lt;Animation</span> <span class="na">Anim=</span><span class="s">&quot;MaskColorAnim$name$&quot;</span> <span class="na">Target=</span><span class="s">&quot;Color&quot;</span> <span class="na">Repeat=</span><span class="s">&quot;1&quot;</span> <span class="na">StartAtTime=</span><span class="s">&quot;0&quot;</span><span class="nt">/&gt;</span>
</span><span class='line'>    <span class="nt">&lt;/Timeline&gt;</span>
</span><span class='line'><span class="nt">&lt;/Template&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="nt">&lt;Actor</span> <span class="err">...</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nt">&lt;FromTemplate</span> <span class="na">Template=</span><span class="s">&quot;MaskColorTimelineTemplate&quot;</span> <span class="na">name=</span><span class="s">&quot;ColorChange&quot;</span> <span class="na">duration=</span><span class="s">&quot;2&quot;</span>
</span><span class='line'>        <span class="na">startcolor=</span><span class="s">&quot;180, 220, 251, 255&quot;</span> <span class="na">endcolor=</span><span class="s">&quot;255, 0, 0, 255&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'><span class="nt">&lt;/Actor&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>This is very flexible and powerful, no need to recompile, just updating plain XML files.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Game Engine Based on Marmalade and IwGame]]></title>
    <link href="http://blog.yjpark.org/blog/2012/08/30/game-engine-based-on-marmalade-and-iwgame/" />
    <updated>2012-08-30T22:58:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/08/30/game-engine-based-on-marmalade-and-iwgame</id>
    <content type="html"><![CDATA[<p>Since August 2012, 2 developers(including me) and 2 graphic designers come together and started a small game studio to work on some mobile casual games, as the tech lead, I need to choose a development way for our first batch of games.</p>

<p>Our games will be mostly 2D games, might with some 3D charactors, though the scenes or levels will be 2D, I think that&#8217;s better for the team and the graphic quality of the games.</p>

<p>After quite some readings and experiments, I finally have a clear idea about how we gonna build these games, We will create our small game engine, on top of Marmalade and IwGame.</p>

<h2>Why choose Marmalade?</h2>

<p>I did have quite some experience on cocos2d, though it&#8217;s been ruled out pretty quickly. I want our game to work on multiple platforms, since we don&#8217;t use much platform-specific features, we don&#8217;t get much with objective-c. Also personally I am not really a big fan of cocos2d, it&#8217;s kind of a simple framework with good quality, though missing some of the features I want with a solid framework, e.g. Tool or Markup for graphic scene editor, I&#8217;ve tried Cocos Builder and Level Helper very breifly, might be just me, but I don&#8217;t like neither one. A similar option is to go with cocos2d-x, which is cross platform, but because of similar reason, I didn&#8217;t dig into it deeply.</p>

<p>The second option is Unity3d, I&#8217;ve used it for about 3 months before, It&#8217;s pretty good, easy to use, and have a hugh community with tons of good plugins. My biggest concern about it is the binary format of the prefebs, it&#8217;s a bit like the xib file in App development, hard to change and track, as a developer, I want a text based format. Also don&#8217;t really think the .Net virtual machine is the best way for our rather small games. My feeling is that it&#8217;s more like a tool for game designers and graphic designers, as developers, we gave up full control in exchange with a full-feature game development environment. And also it&#8217;s mostly 3D centric, 2D works are possible, but a bit awkard, since we don&#8217;t need the 3D power and I want more control with my codes, I did not take this path either.</p>

<!-- more -->


<p>For good performance and graphic effects, I didn&#8217;t investigate the fast development tools, most of them are HTML based or LUA based, more like quick prototype tools for me.</p>

<p>I&#8217;ve played with Airplay for a couple of days 2 years ago, technically it was very good, though with a rather steep learning curve, and lack of tutorials and blog post, so I didn&#8217;t really learn it as a hobby. Now it&#8217;s renamed to Marmalade, been updated pretty often, and having a much bigger user base and many successful games are based on it, like Draw Something or Cut The Rope. Since I will use the chosen platform for at least 1 or 2 years, I spend a week to really try to learn it this time.</p>

<p>The first impression was kind of negative, the OSX support seems to be much weaker than the windows one, a bunch of small problems were met, which almost make me give it up. Now I&#8217;ve been using it for about 1 month, still got some problem, though I think I start to feel comfortable with it.</p>

<p>There are still very few technical information about marmalade other than the official documents and forum, the only helpful tutorial I can find is the <a href="http://www.drmop.com/index.php/marmalade-sdk-tutorials/">DrMop tutorials</a>. It&#8217;s very helpful to provide basic ideas for new Marmalade users.</p>

<p>The API documents of Marmalade is actually quite good after you get the basic ideas about it. Also the examples included are good learning source.</p>

<p>My current feeling about Marmalade is quite positive, it has nice features and solid quality, provide full control, has native bridge for potential platform-specific development.</p>

<p>The things I wish to be better:</p>

<ul>
<li>1st class OSX support, add the missing features of the simulator, fix the broken &#8220;mkb &#8211;iphone&#8221; device building (only trid on 10.8 + Xcode 4.4, not sure about other environments). (Update: &#8211;iphone is fixed in 6.1, simulator seems not updated)</li>
<li>Release to osx ability, then I can create desktop tools such as customized level editor instead of let my graphic designers to use the simulator to run them. (Update: Added in 6.1)</li>
<li>Float data types in IwGx, it&#8217;s said to be included in 6.1 release which should be out soon, much simpler and less error-prone, we&#8217;ll target on OpenGL ES 2.0 devices only (iOS devices first) to make our life easier since we can&#8217;t afford dedicated tester anyway. (Update: Float added in 6.1 and works great, though we probably will not change IwGame to use float)</li>
<li>High level document besides API reference, and generally more documentations.</li>
<li>Better community and 3rd party components, it&#8217;s quite unpopular in stackoverflow, very few blogs, and the github community projects are not very active and organized.</li>
</ul>


<h2>What is IwGame, and Why it is Helpful</h2>

<p>Marmalade is very low level, its design priciple is that people can make their engine working on it rather easily, but we don&#8217;t have any game engine yet, so either I need to write a 2D engine from scratch, or choose a C/C++ engine to work with. Cocos2d-X works on Marmalade, though I want something more powerful. Many 3D engine works on it too, but they are too complex to me, I probably will choose Unity3D if I want a 3D engine.</p>

<p>According to the website, <a href="http://www.drmop.com/index.php/iwgame-engine/">IwGame</a> is a &#8220;Free Open Source Cross Platform Mobile Game Engine for Smart Phones and Tablets&#8221;, it&#8217;s a quite ambitious project, already has a long feature list with many future features, though still in an rather early stage.</p>

<p>The main reasons I chose it:</p>

<ul>
<li>Open source, I can tweak the codes to suit my needs better, and even if its development stopped, we can still improve it by ourselves.</li>
<li>XML file format, it&#8217;s very powerful, e.g. make simple animations easily without coding. Also it&#8217;s very easy to extend the system to add our own extensions. This is a hugh advantage to me.</li>
<li>Complete 2D framework, including sprite, scene, particle, physics, UI&#8230; No need to reimplement the basic things from the scratch, we can focus on more interesting stuffs.</li>
<li>Support 2D and 3D rendering, since the rendering codes are based on IwGx now, even for 2D games, some part of 3D elements can be very useful, so I think this flexibility is very good.</li>
<li>Good document and a full game source included, there are quite some typos in the included PDF document, though it provide most information I need to get started, plus reading the source code, It&#8217;s kind of easy to learn (though still much harder comparing to cocos2d family).</li>
<li>Good code quality, easy to read and not hard to expand.</li>
</ul>


<p>Some worries about base our codes on it:</p>

<ul>
<li>It&#8217;s a big project, and seems most code and docs are written by DrMop in several monthes. He did very great so far, though he has too many works ahead him, I am not sure where this project will be after 1 year, what if it&#8217;s dead? also it&#8217;s been a while since the last update.</li>
<li>On the other hand, if it&#8217;s been developed rapidly, since it&#8217;s not finished yet, we will need to expand it by ourself, it can be a problem to keep update with the future updates. I don&#8217;t want to make a fork since many good features are on the list, though we can&#8217;t wait for they to appear, We will be careful with out changes to make them easy to merge, but what if the owner decide to change the API interface drasticly?</li>
<li>The core string class (CIwGameString) is not unicode compatible, and the author didn&#8217;t have plan to support it soon. This can be a big problem for us to support multiple language, especially the asian languages. I want to find a clean solution for this, though haven&#8217;t started working on it yet.</li>
<li>There is no unit tests yet, so it might introduce its own bugs, especially if it&#8217;s been update quickly.</li>
</ul>


<h2>My Plan on The Game Engine</h2>

<p>Now I feel OK working with Marmalade and IwGame, the next steps will be creating the features/tools we need for our games, i.e. create a game engine for our requirements.</p>

<p>Here is the current list of works to be done:</p>

<ul>
<li>Basic level editing, to arrange 2D sprites on screen, supporting basic operations such as moving, scaling, rotating, etc. Our level/scene will be 2D non-tile with multiple layers, something similar to <a href="http://javilop.com/gamedev/c-game-programming-tutorial-non-tile-based-arbitrary-positioned-entity-engine-editor-like-in-braid-or-aquaria-games/">this</a></li>
<li>Complex charactor editing, 2D or 3D charactors with body parts, movement and animations.</li>
<li>Advanced level editing, particles, visual effects, events, etc.</li>
<li>UI editing.</li>
</ul>


<p>All these editors will base on the XOML markup system of IwGame.</p>

<p>These are still quite some works, might be over engineering for our first game, though as a developer, I don&#8217;t want to just do things in the quick and dirty way, I want to do it in a proper way. And I think a proper engine can make future games easier to develop, so in the long run, it will worth the efforts.</p>

<p>Think I will start to write more about Marmalade and IwGame in the future, both help myself to understand them better, and hopefully might help some other developers too.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[PettyFun 游戏工作室成立了！]]></title>
    <link href="http://blog.yjpark.org/blog/2012/07/27/pettyfun-game-studio-established/" />
    <updated>2012-07-27T18:31:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/07/27/pettyfun-game-studio-established</id>
    <content type="html"><![CDATA[<h2>一点小小的历史</h2>

<p>之前工作的公司是做外包的，因为环境和人都不错，在那里工作了好几年。渐渐的由一个独自写代码的程序员，认识了很多同行，接触了开源技术，开始做技术管理，和不少面试培训的工作。过程中学到了很多，也对自己能做些什么，有那些长处开始有了信心。</p>

<p>外包的好处是比较清闲，压力并不大，在技术和流程上做的相对比较完善，然而外包最大的问题是实质上是不鼓励程序员有太高的效率的。由于技术难度和工作效率的难以衡量，很难判断是效率高低还是项目难易的关系导致的工作时间的变化。虽然业内都会同意好的程序员和差的程序员的生产率会有数十倍的差距，然而外包的很大出发点就是节约成本，想给好的程序员提供有吸引力的条件是很难的。</p>

<p>我们做的是个长期项目，基本是按人数计算收入的，也就是说在客户关系正常的情况下，项目组的人数越多，公司得到的收入也就越多。因此，运作的模式基本是比较好的程序员倾向于成为技术组长，把大量的时间花在如何让其他能力不够强的程序员正常工作上，具体说来就是大量的代码审查。</p>

<p>读别人的代码，并提出意见，最终改善的过程，对于程序员来说是个很好的学习提高的过程，我也做了很久。但是工作的内容往往技术含量并不高，受到扩大规模的压力，进人的标准也渐渐放低，感觉自己做的事越来越没有意思，虽然通过业余时间做了些纯技术的学习，然而已经感觉在工作中没有热情了。</p>

<p>公司在iPhone刚出来不久就开始了产品开发的尝试，选择的方向是游戏，做了两款小型游戏，有些进展，然而收入不够理想，老板把方向调整为社交相关的方向，不过产品开发过程有点纠结，花了相当长的时间做了一款相对比较大的产品。（最终结果还是很好，产品有自己的创意，相当成功）</p>

<!-- more -->


<p>一直和我的上司说着想到产品部门工作，但不知为什么，一直也没能过去，可能是成本问题，不过自认为从工作效率来看，让一些能力还不够强的程序员开发产品，可以说是事半功倍，走了很多弯路。</p>

<p>2010年3月的时候，公司给了我一个月的时间，在产品组工作，让我找到了久违的兴奋感。用了1周的时间熟悉了 Objective C, Xcode, iOS 基本知识，然后用了3个星期的时间，学习 Cocos 2D，Box 2D，开发了一个小小的游戏，iPad上面 4 个人同时对战的碰碰车游戏，成功通过审核，App store 上线了，自己还是很自豪在短短的一个月中所取得的成果。</p>

<h2>策划与执行的冲突</h2>

<p>而在这一个月中的后两周，其实相当不顺利，原型已经有了点样子，这时老板作为 Product Owner （SCRUM 中的术语，基本上相当于产品经理，对产品的方向和细节拥有决定权的角色）介入了，开始定义 Milestone，给需求排优先级，并对任务是否完成做出判断。</p>

<p>老板是个典型的产品人，极度自信，又追求细节，同时又是个程序员出身，有时也会流露出 “这不是很简单么” 的态度，不是个容易合作的，不少同事也警告过我。</p>

<p>我在开始之前想得还是比较简单，一个是项目太小了，除了我自己，恐怕也没人真正相信能做出一个可发布的东西，再一个是老板很忙，没理由花太多时间在这么一个小小的项目上，Product Owner 应该是挂名的。</p>

<p>事实证明我错了，还相当彻底，老板极其认真的行使了 PO 的权力，让我又一次切身体会到了策划与执行的角色冲突。</p>

<p>冲突的关键在于两点，物理与操控，物理相对抽象，老板想要好的车的 “感觉”，参考游戏是 Wii 上面 Rayman 里面的碰碰车小游戏，问题是它是3D的，大屏幕的视觉感和 iPad 不一样，节奏相当快。我对 Box2D 了解的又很浅，几次尝试也没能得到很理想的结果。</p>

<p>操控是个更大的问题，iPad 的 4 人同时操作，意味着每人只有很小的一点屏幕面积可供使用，而且触摸屏意味着反馈的基本缺失。我的一个想法是提供基本操控，同时提供手机连接，使用加速度仪来实现近似 Wii Remote 的操控。基本代码用了两天，然而老板很生气，说我没有按照优先级，联网功能完全不在计划中，说我浪费了两天时间。最后的结果是，我先后实现了模拟摇杆，两个按钮，三个按钮，油门、方向，的多种操控方式，也没能得到他想要的效果，一起调了几次参数，当时 OK，过一两天就又要再改。</p>

<p>累一点我没问题，不过我觉的自己在浪费时间，还剩下 1 周多点，除了加上美术的图片，和之前的原型没有本质的区别，是不是完不成了？</p>

<p>于是渐渐摩擦开始了，我想先把一些必须的功能做上，像是计分功能，在尝试些可能的方向，像是手机操控、甚至联网游戏，而老板坚持必须把操控调好，其他的都要推后（最后的版本并没有计分功能，也是玩家抱怨所集中的一点）。问题是他只能说出什么不好，而不能告诉我该怎么做，进度上直接的结果就是做不完，又拒绝采用渐进的方式、在今后再做改进。</p>

<p>从他的方面可能感觉就是我开始不听话了，作为一个程序员，不应该坚持自己的想法，应该无条件服从 PO 的安排，为了项目的整体考虑。</p>

<p>于是矛盾慢慢积累，终于爆发了，在一次对操控的反复之后，我们比较激烈的吵了起来，他没有能从道理上说服我，而试图用 PO 的身份来解决问题，让我服从，潜台词是我过于情绪化，没有用专业的方式处理冲突。</p>

<h2>不再觉的这是自己的产品了</h2>

<p>我觉得他也有一定的道理，毕竟不可能大家想法都一致，PO 的设置也是要在有冲突的时候加以解决，所以又试着更听话一点，再试试，也许真的能找到理想的操控方式。</p>

<p>和之前与客户的冲突不太一样，以前也会试图坚持自己的想法，发上一两封信，说出自己的想法，好像就可以了，一般客户都会坚持自己的，我也会尽量的照他们的做，尽管暗暗认为在做错误的事，反正客户有权利选择错误。而这次似乎有些不同，怎么也无法集中精力来做，进入不了状态。</p>

<p>其实这就是对待自己的产品和别人的产品的区别，虽然小，但这原本是我自己的产品，当其他人用身份、职务来试图控制它时，我才会愤怒，想要继续把它当成自己的产品，如果失败了，我便无法用同样的热情来继续下去了，原本很有意思的编程似乎也变了味道，晚上回家也会玩玩游戏，上上网，无法再每天十几个小时的投入到开发中去了。</p>

<p>后面一个多星期的时间好像过的比较快，我写信又做了一次努力，想成为 PO ，老板不同意，不过也没在项目上继续之前的纠缠，匆匆做了些调整，加了声音，画面继续润色，最终在一个月到期的时候成功提交，一周后通过审核，收入么也只有一点点而已。</p>

<h2>从中学到了些什么？</h2>

<p>首先技术上学了不少，Objective C，Xcode， iOS API，Cocos2d，Box 2d，iOS开发流程。</p>

<p>游戏的润色很重要，代码上的原型和产品的差距远远没有美术上的大，好的美术设计对游戏来说太重要了。</p>

<p>产品人的权利很大，但很容易把项目变成“一个人的产品”，把其他的参与者变成纯粹的“打工者”，这对开发效率的影响是非常大的。</p>

<p>最重要的是，我不希望一辈子只做程序员，希望能有机会做自己的产品，或是找到合适的方式，让一组人都发挥各自的最大能量，从管理的角度把产品做好。</p>

<h2>后来</h2>

<p>之后又回到了外包团队，继续之前的工作，很快就离开了，去了一个台资的手机芯片公司，想做些 Android 平台方面的事，也学习一下大公司里面是如何进行管理的。</p>

<p>没做几个月，刚刚开始有点进展，以前公司的同事拉我加入他们公司，一个移动游戏公司，刚刚出了一个成功的产品，投资刚刚进来，形势不错。</p>

<p>当时想了一下，还是加入了，原因一个是台资公司确实累，技术之外的因素也有点多，再一个对公司的运转有了一定的了解，要取得进一步的信息恐怕至少要个三年五载的，主要是这家公司能给我一些机会尝试自己想做的事，可以试试自己的想法是否有效。</p>

<p>当然事情进展的不够顺利，不然也不会再加入以后短短八个月就又一次离职，也不会有工作室的成立了，具体原因就不多写了。</p>

<h2>为什么要做休闲游戏？</h2>

<p>离职后面临选择，再找一个公司，希望碰到合适的人、合适的环境。或是 SOHO，自由职业，成立工作室并不是当时的第一反应。</p>

<p>先是想着在家歇歇，慢慢找找有没有合适的工作。对我来说，找一个开发，或是技术管理的工作应该说非常容易，我也有足够的信心能胜任大部分的开发工作，做一个好的程序员。</p>

<p>之前的经历告诉我在不能对公司有决定权的情况下，只从管理的角度想要把产品做好，是很难的一件事。而在没有实质的经验的情况下，想要直接得到产品经理的职位，也是近乎不可能的事了。</p>

<p>于是想做自由职业了，毕竟我会写代码，写的还相当不错，之前用业余时间做的小软件(Movable Write) 也上线一年多了，赚一点小钱，自已也喜欢这样的方式。</p>

<p>就是做软件一个人很累，或者用户群相对较小，或者竞争相当激烈。好的产品需要长时间的改善，打磨，对于我这样一个没什么积蓄的人来说，有点难。</p>

<p>之前在两家公司时，都建议他们加大些休闲游戏开发的力度，不过老板们都没有采纳。我个人还是非常相信这个方向的。</p>

<p>于是基本确定了个人的方向，制作休闲小游戏，不求发财，能收回成本，养家即可，自由的工作方式，和自己控制的工作内容对我来说就足够了。</p>

<h2>为什么要做工作室？</h2>

<p>后来有朋友主动提出给我投点钱，还是别用纯个人的方式，那样限制太多，一个人的力量太小，移动游戏的前景能提供足够的空间，只要把自己的事做好，风险并不是太大的一件事，他也愿意和我一起承担。</p>

<p>和一些前同事、朋友聊过，也看了不少有关创新的书，如果能处理好的话，一个十人以下的小团队的能量是很大的。我以前也有过身处一个好团队中，集体大于个人，大家互相照应，相互鼓励的经历。</p>

<p>于是认真的计算了一下成本，最后还是决定了做一个自己的工作室。</p>

<p>然后开始拉团队，并不是很容易的一件事，有风险（在赚钱之前，大家都要减少收入的），我并没有带产品的成功经验，游戏策划也并非我的专长。</p>

<h2>团队</h2>

<p>目前的人员是两个程序，两个美术，经验都算是比较丰富的，平均年龄也过三十岁了，其实并不是一个典型的创业团队。</p>

<p>我们的优势在于团队中的成员都是做事非常认真的，即便是在自己不喜欢、不认可的情况下，也会出于职业道德尽力完成工作。可能给人感觉创业的激情不够，不过我觉得如果能把这样的人的积极性调动起来，让我们做自己喜欢、认可的工作，我们的能量会是非常大的。</p>

<p>我会学着做一个合格的游戏策划，不过我们的产品一定要是大家的成果，如果把产品做成我自己“一个人的产品”，对我来说将是个巨大的失败。我们都证实是好的员工，但一起创业，其实都是不满足于简单的作为一个执行者，仅仅去实现其他人的想法。</p>

<p>最让我感动的是，所有的团队成员在谈到风险时，担心的都不是自己会少挣多少钱，而是自己的能力够不够，会不会误了大家的事。这种无形的压力会带来前进的动力，让我更有信心面对前面的困难。</p>

<h2>坚持原创休闲游戏</h2>

<p>大家都同意我对工作室的定位，和想做的产品方向。</p>

<p>手机对游戏行业的冲击其实不仅仅是在于载体上，更重要的是在游戏方式上，休闲游戏的目标并不是和沉浸式的游戏体验相竞争，而是提供碎片化，相对浅层的游戏体验。而休闲游戏的主流玩家其实恰恰是传统意义上的非玩家，视觉效果上的吸引力对于游戏的成功与否是至关重要的。</p>

<p>关于山寨，不否认Copy是更容易的方式，但我想这种方式也容易让人落入很多容易忽视的陷阱，例如失去对目标人群的定位、压制正常合理的争论，导致产品没有灵魂。而且Copy模式隐含的目标就是盈利为第一目标，很容易一步一步把一个有意思的事变成一个没意思的事，人们总习惯说先挣钱，有钱了以后再怎样怎样，然而恰恰是能不能在没钱时坚持做自己喜欢的事才能证明是真正的喜欢。</p>

<p>游戏的内容应该是比较健康的，那种利用人性中比较阴暗的部分的我个人很不喜欢，而且所谓面向高端用户（利用玩家的重度沉迷从玩家身上尽可能的榨取利益）的做法也是我不能接受的。从每个用户身上能拿到1～2美元我认为对于休闲小游戏就已经足够好了，用户基数已经足够大了，就看我们能不能把自己的产品做好。</p>

<p>我们会用相对较长的时间一起讨论游戏的概念、细节、美术风格、技术难点，争取在项目正式开始时大家达到共识，也对开发的难度有所了解。半年内，第一款产品应能上线，根据带来的收入情况再确定下一步的具体计划。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[PlantUML Plugin for Octopress]]></title>
    <link href="http://blog.yjpark.org/blog/2012/04/30/plantuml-plugin-for-octopress/" />
    <updated>2012-04-30T23:20:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/04/30/plantuml-plugin-for-octopress</id>
    <content type="html"><![CDATA[<h2>What is PlantUML?</h2>

<p><a href="http://plantuml.sourceforge.net/">PlantUML</a> is a component that allows to quickly write:</p>

<ul>
<li>sequence diagram,</li>
<li>use case diagram,</li>
<li>class diagram,</li>
<li>activity diagram,</li>
<li>component diagram,</li>
<li>state diagram</li>
<li>object diagram</li>
</ul>


<p>I really like the idea of writing UML diagram with plain text. Since it&#8217;s totally plaintext, it&#8217;s very easy to do diff and version track, also you don&#8217;t need to do anything about the layout (the text itself looks pretty good too).</p>

<p>Also the syntax of it is very well designed, and the generated diagrams looks really nice, so I use PlantUML for technical documentation with trac and sphinx.</p>

<h2>The Plugin</h2>

<p>After switching <a href="http://octopress.org/">Octopress</a> to my blog platform, I was looking for a way to integrate PlantUML within it, though I can&#8217;t find one, so I wrote this very simple jekyll plugin (Octopress is based on <a href="http://jekyllrb.com/">Jekyll</a>).</p>

<p><a href="https://github.com/yjpark/jekyll-plantuml">jekyll-plantuml</a></p>

<!-- more -->


<h2>Configuration</h2>

<p>You need to download the plantuml.jar file from <a href="http://plantuml.sourceforge.net/download.html">http://plantuml.sourceforge.net/download.html</a></p>

<p>In your _config.xml, setup plantuml_jar to the downloaded jar file, e.g.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>plantuml_jar: ../_lib/plantuml.jar
</span><span class='line'>plantuml_background_color: "#f8f8f8"</span></code></pre></td></tr></table></div></figure>


<p>The plantuml_background_color is optional, which will change the background of the generated diagram.</p>

<h2>Usage</h2>

<p>Just wrap the diagram text in &#8220;plantuml&#8221; block, e.g.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>
</span><span class='line'>{% plantuml %}
</span><span class='line'>Alice -&gt; Bob: Authentication Request
</span><span class='line'>Bob --&gt; Alice: Authentication Response
</span><span class='line'>
</span><span class='line'>Alice -&gt; Bob: Another authentication Request
</span><span class='line'>Alice &lt;-- Bob: another authentication Response
</span><span class='line'>{% endplantuml %}
</span><span class='line'></span></code></pre></td></tr></table></div></figure>


<h2>An Example</h2>

<center><img src='http://blog.yjpark.org/images/plantuml/9c73e1984d305ac440792be9dc65b164.png'></center>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Movable Write Open Sourced]]></title>
    <link href="http://blog.yjpark.org/blog/2012/04/22/movable-write-open-sourced/" />
    <updated>2012-04-22T13:35:00+08:00</updated>
    <id>http://blog.yjpark.org/blog/2012/04/22/movable-write-open-sourced</id>
    <content type="html"><![CDATA[<h2>What is Movable Write</h2>

<p>Back in 2010, I already had some experiences on iOS development. Did wrote some very simple application to fetch information over HTTP-RPC to a trac instance, and wrote a very simple game with Cocos2D and Box2D. Did spend some time to catch up with the versions or iOS updates and read about the new APIs.</p>

<p>But my feeling was that by only spend small amount of time like it, I can never learn enough to have real experience on it, and I&#8217;ve been working on Web development for a few years. So I decided to work part-time in the company, and use the other half time to develop a real application, by real I mean with proper quality and released at app-store.</p>

<p>I just got a iPad1 as development device, and tried a few apps, I liked note plus a lot, it&#8217;s very powerful, but a bit too powerful for my need, I want to write words most of the time, and I want to write largely, but view the written lines small.</p>

<p>So I decided to write a note taking app for myself, after 3 months, Movable Write was released at app store.</p>

<ul>
<li><a href="http://itunes.apple.com/us/app/movable-write/id416413981?mt=8">App store link</a></li>
<li><a href="http://wolfewithane.com/blog/2011/6/22/review-hand-notes-over-to-movable-write.html">A nice introduction from wolfewithane.com</a></li>
<li><a href="http://iapp.com.tw/ex/topic_inside.php?id=2447">Another nice introduction from iapp.com.tw (in Chinese)</a></li>
</ul>


<!-- more -->


<h2>What is missed</h2>

<p>I did implement support for USB transfer for backup/restore, though didn&#8217;t write document about this feature, the plan was to implement synchronization for it, Dropbox and/or iCloud, though didn&#8217;t get time for it.</p>

<p>Another interesting possibility is Evernote integration, the code should be very easy to be runnable on OSX, also can be added as image or pdf.</p>

<p>A bigger change is adding bigger element into page, e.g. a photo then wrap the lines around it. I&#8217;ve done some experiments about bigger writing area, it&#8217;s not easy to put it into the current structure though.</p>

<p>Another bigger one is OCR for the written words, there are open-source libraries, though not sure how mature they are, all the original writing information are saved in file, it might be easy to add this feature.</p>

<p>A small one is to replay the writing process of the note, since all the timing infomation was saved too, this is not hard to implement.</p>

<p>&#8230;</p>

<h2>Why open sourced</h2>

<p>It&#8217;s sadly that I can&#8217;t put more dedicated time into it, since it didn&#8217;t bring much money as a product for a small group of people, though I get quite some very good comments from some users.</p>

<p>I feel very happy that some people found it useful and use it frequently, so in case any of them are programmer, I decided to put all the source codes at github, please fork it if you&#8217;re interesting.</p>

<ul>
<li><a href="https://github.com/pettyfun/MovableWrite">Movable Write at Github</a></li>
</ul>


<p>Might write more about the technical side of the project later, what I&#8217;ve learned, and how to extend it.</p>
]]></content>
  </entry>
  
</feed>
