tag:blogger.com,1999:blog-88154502006500604582024-02-19T11:34:59.881+07:00Fugocode : Me, Myself, and Codea blog about codes I wrote. currently I work with Haxe NMEAnonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-8815450200650060458.post-24709900902702309112014-02-03T14:13:00.001+07:002014-02-03T14:13:45.944+07:00Apologize for the long break, and I got a new game for you to try :)Hello everyone!<br />
<br />
Very sorry for not updating this blog anymore.<br />
Things is , I'm not doing code anymore because now I'm more focus in business side of my game studio <a href="http://amagineinteractive.com/">Amagine Interactive</a> . But of course I still following the development of OpenFL . very nice to know that OpenFL now is quite well known.<br />
<br />
And now we just released new game called <a href="https://play.google.com/store/apps/details?id=com.Amagine.Bugpanic2">Bug in Panic</a> . This game is about a bug called Mr.Tomcat which need to survive by avoiding obstacles coming to him. This game is free and available for Android :)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/Note%20:%20This%20game%20use%20accelerometer%20as%20the%20control%20Bug-world%20apocalypse%20survival%20game.%20You%20run,%20you%20jump,%20you%20stay%20alive.%20You're,%20likely,%20the%20last%20of%20your%20kin.%20Dodge%20every%20barrage%20of%20obstacle%20with%20your%20tomcat%20instinct%20and%20collect%20berryfruit%20for%20saving%20your%20hunger%20to%20survive%20longer.%20After%20saving%20yourself%20through%20a%20number%20of%20level,%20you'll%20strong%20enough%20to%20overtake%20even%20more%20hardship.%20Unlock%20every%20secret,%20discover%20the%20story,%20and%20find%20the%20whereabout%20of%20your%20family.%20Don't%20worry%20about%20the%20situation%20since%20in%20every%20storm%20there%20is%20always%20a%20helping%20hand%20of%20angel%20coming%20from%20heaven,%20once%20in%20a%20while,%20for%20those%20who%20see%20the%20light."><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6PcE7YohuPZ_qEneHrl8fC6oK0FDWDRDT4llRVkEC3ediE-yJ-Ebg4kgNz-Nwwbj9I8zQGSYCIS1iQGNhbdJSF3YCPgJ1qVL_-QWliEGXCV2AFxgQr6df6NRJB79tp1DGYseyM8t2ks/s1600/IconBlack512.png" height="320" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
Here's the description I copied from the<a href="https://play.google.com/store/apps/details?id=com.Amagine.Bugpanic2"> Play store page</a> : <br />
<i><br /></i>
<i>"<span style="background-color: whitesmoke; color: #333333; font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px;">Note : This game use accelerometer as the control</span></i><br />
<div style="background-color: whitesmoke; border: 0px; color: #333333; font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 5px; padding: 0px;">
<i>Bug-world apocalypse survival game. You run, you jump, you stay alive. You're, likely, the last of your kin.</i></div>
<div style="background-color: whitesmoke; border: 0px; color: #333333; font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 5px; padding: 0px;">
<i>Dodge every barrage of obstacle with your tomcat instinct and collect berryfruit for saving your hunger to survive longer. After saving yourself through a number of level, you'll strong enough to overtake even more hardship.</i></div>
<div style="background-color: whitesmoke; border: 0px; color: #333333; font-family: Roboto, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 5px; padding: 0px;">
<i>Unlock every secret, discover the story, and find the whereabout of your family. Don't worry about the situation since in every storm there is always a helping hand of angel coming from heaven, once in a while, for those who see the light."</i></div>
<br />
watch the trailer here<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/QNvxxdjYTCc" width="560"></iframe>
<br />
<br />
I hope you like it guys! Try it! It's simple and fun. :)<br />
and if you don't mind, please rate and share :D<br />
<br />
So that's it guys! that's what I'm doing right now. we're very excited to get this game known by many people! we hope people can like this game.<br />
<br />
See ya!<br />
<br />
Ps : unfortunately this game not use OpenFL . but no worry I still love OpenFL :pAnonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0tag:blogger.com,1999:blog-8815450200650060458.post-79318695503446076312013-07-21T20:43:00.000+07:002013-07-21T20:43:04.769+07:00OpenFL gestures using roxlib gesture library<div style="text-align: justify;">
When I work with NME before , I used a gesture library called <a href="https://github.com/rockswang/roxlib">roxlib </a> for gesture handling. This roxlib library is greats! it's not dependent on native features so I can use it on flash also (for the sake rapid prototyping of course). now that this library is updated to support OpenFL (thanks rockswang!) I can happily tell everyone how awesome this library is. This library is great for basic mobile touch screen gestures, it supports :</div>
<div>
<ul>
<li>pinch</li>
<li>pan</li>
<li>swipe </li>
<li>long press</li>
<li>tap </li>
<li>rotation</li>
</ul>
<div>
All the gesture that is common usage in the mobile environment nowadays.<br />
<br />
<div style="text-align: justify;">
The only problem with this library is the lack of documentation and how cluttered it's code with so many unnecessary code (the "how to use" piece of code could be separated from the library itself I guess). But after a while I figured out how this library works. So I'll write a little tutorial for those who need to use gestures on their games :)</div>
</div>
</div>
<div>
<br /></div>
<h2>
<b>Gesture with Roxlib</b></h2>
<div>
First we must download the roxlib library from the <a href="https://github.com/rockswang/roxlib">github page</a> and extract it somewhere. </div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTde-TUOfZyW8pXUQilM4NlNLYIcbYYVn2qdM4a7NfyA8iykrlcVoxkUwL5ZkaNjrISgsp1WtFRP8Jp20iKjrDOP8vyhfjm373CF0pZNq1muWi9LwqVbHizGo7vwysIVPnasWSJzNIOjU/s1600/win+explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTde-TUOfZyW8pXUQilM4NlNLYIcbYYVn2qdM4a7NfyA8iykrlcVoxkUwL5ZkaNjrISgsp1WtFRP8Jp20iKjrDOP8vyhfjm373CF0pZNq1muWi9LwqVbHizGo7vwysIVPnasWSJzNIOjU/s1600/win+explorer.png" /></a></div>
</div>
<div>
<br /></div>
<div>
Then copy the roxlib library into your project, this is necessary because it's not a haxelib project so we need to import it manually into the project. </div>
<div>
<br /></div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs0ZWIxVrvSn_Kpr6pBUEn5OPgY9cfS90ns5z9fY56WPJcQQdvreeAz36qW_fAvd3SwBZ1VXxfWxWfkoqR8_BCixmOl_fulH7_hG4ZLESz4I5XMyaui-OVe2sRL_IUPrGCdnJrhseKr4/s1600/all+lib.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs0ZWIxVrvSn_Kpr6pBUEn5OPgY9cfS90ns5z9fY56WPJcQQdvreeAz36qW_fAvd3SwBZ1VXxfWxWfkoqR8_BCixmOl_fulH7_hG4ZLESz4I5XMyaui-OVe2sRL_IUPrGCdnJrhseKr4/s320/all+lib.png" width="277" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>copy library to project</i></td></tr>
</tbody></table>
<br /></div>
<div>
<br /></div>
<div>
There's not only gesture package inside the library, but we can remove the others without any problem (once again thanks roxswang for making it independent from another package).</div>
<div>
<br /></div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztV-a313JEg2Xk01h3ErVy7IPY-oTKPNZHkZ5aICbvtizRSrI7yCfk55GXM0e3LCw9RbIPfhXGGmnr2Wjj6qWPjjX8KbVikWdCG1gRy_3X6nLRmRSglmC9MXjG2lxM90OPN8lbIFf0dg/s1600/gesture+lib.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="277" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztV-a313JEg2Xk01h3ErVy7IPY-oTKPNZHkZ5aICbvtizRSrI7yCfk55GXM0e3LCw9RbIPfhXGGmnr2Wjj6qWPjjX8KbVikWdCG1gRy_3X6nLRmRSglmC9MXjG2lxM90OPN8lbIFf0dg/s320/gesture+lib.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>only gesture package left</i></td></tr>
</tbody></table>
<br /></div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
now for the coding part, all we need to do is create a RoxGestureAgent for the gesture event handler, and some sprite used for the target of gesture , the register the gesture event handler to the target sprite using RoxGestureEvent.</div>
</div>
<div>
<br /></div>
<div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">var</span> image:<span style="color: #333399; font-weight: bold;">Sprite</span> <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> <span style="color: #333399; font-weight: bold;">Sprite</span><span style="color: #333333;">();</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addChild</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">new</span> <span style="color: #333399; font-weight: bold;">Bitmap</span><span style="color: #333333;">(</span>Assets<span style="color: #333333;">.</span><span style="color: #0000cc;">getBitmapData</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"img/rock.png"</span><span style="color: #333333;">)));</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span> <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">300</span><span style="color: #333333;">;</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span> <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">200</span><span style="color: #333333;">;</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleX</span> <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">2</span><span style="color: #333333;">;</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleY</span> <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">2</span><span style="color: #333333;">;</span>
var roxAgent <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> <span style="color: #333399; font-weight: bold;">RoxGestureAgent</span><span style="color: #333333;">(</span>image<span style="color: #333333;">,</span> RoxGestureAgent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE</span><span style="color: #333333;">);</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addEventListener</span><span style="color: #333333;">(</span>RoxGestureEvent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE_SWIPE</span><span style="color: #333333;">,</span> onSwipe<span style="color: #333333;">);</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addEventListener</span><span style="color: #333333;">(</span>RoxGestureEvent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE_PAN</span><span style="color: #333333;">,</span> onPan<span style="color: #333333;">);</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addEventListener</span><span style="color: #333333;">(</span>RoxGestureEvent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE_PINCH</span><span style="color: #333333;">,</span> onPinch<span style="color: #333333;">);</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addEventListener</span><span style="color: #333333;">(</span>RoxGestureEvent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE_ROTATION</span><span style="color: #333333;">,</span> onRotation<span style="color: #333333;">);</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addEventListener</span><span style="color: #333333;">(</span>RoxGestureEvent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE_TAP</span><span style="color: #333333;">,</span> onTap<span style="color: #333333;">);</span>
image<span style="color: #333333;">.</span><span style="color: #0000cc;">addEventListener</span><span style="color: #333333;">(</span>RoxGestureEvent<span style="color: #333333;">.</span><span style="color: #0000cc;">GESTURE_LONG_PRESS</span><span style="color: #333333;">,</span> onLongPress<span style="color: #333333;">);</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
<br />
<div style="text-align: justify;">
then for each callBack method, as it receive RoxGestureEvent as parameter, the 2 necessary properties to remember from it are the <b>target </b>and <b>extra </b>properties. The target properties contain the target sprite used as gesture target, and extra properties contain different thing for different actions :</div>
<br />
<ul>
<li>extra on Pinch contain scale factor (float)</li>
<li>extra on Rotation contain rotation angle (float)</li>
<li>extra on Pan/Swipe contain pan/swipe speed (Point)</li>
</ul>
<div>
<div style="text-align: justify;">
One thing to note about Pan and Swipe difference is that Pan action called continously when you move your finger across the screen, and swipe is only called when you removed your hand from the screen. </div>
</div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
The below codes is the callback I use for this tutorial, you can create your own version. I'll not really explain too much about each callback but here's a brief explanation about each callback method </div>
</div>
<div>
<br /></div>
<div>
When tap gesture called the target will be scaled up:</div>
<div>
<br /></div>
<div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"> <span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">function </span><span style="color: #0066bb; font-weight: bold;">onTap</span><span style="color: #333333;">(</span>e<span style="color: #333333;">:</span><span style="color: #333399; font-weight: bold;">RoxGestureEvent</span><span style="color: #333333;">):</span><span style="color: #333399; font-weight: bold;">Void</span>
<span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">var</span> sp:<span style="color: #333399; font-weight: bold;">DisplayObject</span> <span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">target</span><span style="color: #333333;">,</span> DisplayObject<span style="color: #333333;">);</span>
var scX <span style="color: #333333;">=</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleX</span><span style="color: #333333;">;</span> <span style="color: #888888;">//current scaleX factor</span>
var scY <span style="color: #333333;">=</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleY</span><span style="color: #333333;">;</span> <span style="color: #888888;">//current scaleY factor </span>
Actuate<span style="color: #333333;">.</span><span style="color: #0000cc;">tween</span><span style="color: #333333;">(</span>sp<span style="color: #333333;">,</span> <span style="color: #6600ee; font-weight: bold;">0.5</span><span style="color: #333333;">,</span> <span style="color: #333333;">{</span> scaleX<span style="color: #333333;">:</span> scX <span style="color: #333333;">+</span> <span style="color: #6600ee; font-weight: bold;">0.1</span><span style="color: #333333;">,</span> scaleY<span style="color: #333333;">:</span>scY <span style="color: #333333;">+</span> <span style="color: #6600ee; font-weight: bold;">0.1</span> <span style="color: #333333;">}</span> <span style="color: #333333;">).</span>ease<span style="color: #333333;">(</span>Bounce<span style="color: #333333;">.</span><span style="color: #0000cc;">easeOut</span><span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
When long press gesture called the target will be scaled down:</div>
<div>
<br /></div>
<div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"> <span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">function </span><span style="color: #0066bb; font-weight: bold;">onLongPress</span><span style="color: #333333;">(</span>e<span style="color: #333333;">:</span><span style="color: #333399; font-weight: bold;">RoxGestureEvent</span><span style="color: #333333;">):</span><span style="color: #333399; font-weight: bold;">Void</span>
<span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">var</span> sp:<span style="color: #333399; font-weight: bold;">DisplayObject</span> <span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">target</span><span style="color: #333333;">,</span> DisplayObject<span style="color: #333333;">);</span>
var scX <span style="color: #333333;">=</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleX</span><span style="color: #333333;">;</span> <span style="color: #888888;">//current scaleX factor</span>
var scY <span style="color: #333333;">=</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleY</span><span style="color: #333333;">;</span> <span style="color: #888888;">//current scaleY factor </span>
Actuate<span style="color: #333333;">.</span><span style="color: #0000cc;">tween</span><span style="color: #333333;">(</span>sp<span style="color: #333333;">,</span> <span style="color: #6600ee; font-weight: bold;">0.5</span><span style="color: #333333;">,</span> <span style="color: #333333;">{</span> scaleX<span style="color: #333333;">:</span> scX <span style="color: #333333;">-</span> <span style="color: #6600ee; font-weight: bold;">0.3</span><span style="color: #333333;">,</span> scaleY<span style="color: #333333;">:</span>scY <span style="color: #333333;">-</span> <span style="color: #6600ee; font-weight: bold;">0.3</span> <span style="color: #333333;">}</span> <span style="color: #333333;">).</span>ease<span style="color: #333333;">(</span>Bounce<span style="color: #333333;">.</span><span style="color: #0000cc;">easeOut</span><span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
When pinch called the target will be resized:<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">function </span><span style="color: #0066bb; font-weight: bold;">onPinch</span><span style="color: #333333;">(</span>e<span style="color: #333333;">:</span><span style="color: #333399; font-weight: bold;">RoxGestureEvent</span><span style="color: #333333;">):</span><span style="color: #333399; font-weight: bold;">Void</span>
<span style="color: #333333;">{</span>
var sp <span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">target</span><span style="color: #333333;">,</span> DisplayObject<span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">var</span> scale: <span style="color: #333399; font-weight: bold;">Float</span> <span style="color: #333333;">=</span> e<span style="color: #333333;">.</span><span style="color: #0000cc;">extra</span><span style="color: #333333;">;</span>
var spt <span style="color: #333333;">=</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">parent</span><span style="color: #333333;">.</span><span style="color: #0000cc;">localToGlobal</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">new</span> <span style="color: #333399; font-weight: bold;">Point</span><span style="color: #333333;">(</span>sp<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span><span style="color: #333333;">,</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span><span style="color: #333333;">));</span>
var dx <span style="color: #333333;">=</span> spt<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span> <span style="color: #333333;">-</span> e<span style="color: #333333;">.</span><span style="color: #0000cc;">stageX</span><span style="color: #333333;">,</span> dy <span style="color: #333333;">=</span> spt<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span> <span style="color: #333333;">-</span> e<span style="color: #333333;">.</span><span style="color: #0000cc;">stageY</span><span style="color: #333333;">;</span>
var angle <span style="color: #333333;">=</span> Math<span style="color: #333333;">.</span><span style="color: #0000cc;">atan2</span><span style="color: #333333;">(</span>dy<span style="color: #333333;">,</span> dx<span style="color: #333333;">);</span>
var nowlen <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> <span style="color: #333399; font-weight: bold;">Point</span><span style="color: #333333;">(</span>dx<span style="color: #333333;">,</span> dy<span style="color: #333333;">).</span>length<span style="color: #333333;">;</span>
var newlen <span style="color: #333333;">=</span> nowlen <span style="color: #333333;">*</span> scale<span style="color: #333333;">;</span>
var newpos <span style="color: #333333;">=</span> Point<span style="color: #333333;">.</span><span style="color: #0000cc;">polar</span><span style="color: #333333;">(</span>newlen<span style="color: #333333;">,</span> angle<span style="color: #333333;">);</span>
newpos<span style="color: #333333;">.</span><span style="color: #0000cc;">offset</span><span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">stageX</span><span style="color: #333333;">,</span> e<span style="color: #333333;">.</span><span style="color: #0000cc;">stageY</span><span style="color: #333333;">);</span>
newpos <span style="color: #333333;">=</span> sp<span style="color: #333333;">.</span><span style="color: #0000cc;">parent</span><span style="color: #333333;">.</span><span style="color: #0000cc;">globalToLocal</span><span style="color: #333333;">(</span>newpos<span style="color: #333333;">);</span>
sp<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleX</span> <span style="color: #333333;">*=</span> scale<span style="color: #333333;">;</span>
sp<span style="color: #333333;">.</span><span style="color: #0000cc;">scaleY</span> <span style="color: #333333;">*=</span> scale<span style="color: #333333;">;</span>
sp<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span> <span style="color: #333333;">=</span> newpos<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span><span style="color: #333333;">;</span>
sp<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span> <span style="color: #333333;">=</span> newpos<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span><span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
When pan called the object will move following the mouse/finger movement:<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">function </span><span style="color: #0066bb; font-weight: bold;">onPan</span><span style="color: #333333;">(</span>e<span style="color: #333333;">:</span><span style="color: #333399; font-weight: bold;">RoxGestureEvent</span><span style="color: #333333;">):</span><span style="color: #333399; font-weight: bold;">Void</span>
<span style="color: #333333;">{</span>
var sp <span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">target</span><span style="color: #333333;">,</span> DisplayObject<span style="color: #333333;">);</span>
var pt <span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">extra</span><span style="color: #333333;">,</span>Point<span style="color: #333333;">);</span>
sp<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span> <span style="color: #333333;">+=</span> pt<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span><span style="color: #333333;">;</span>
sp<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span> <span style="color: #333333;">+=</span> pt<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span><span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
When swipe called the target will move using the swipe speed</div>
<div>
<br /></div>
<div>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">function </span><span style="color: #0066bb; font-weight: bold;">onSwipe</span><span style="color: #333333;">(</span>e<span style="color: #333333;">:</span><span style="color: #333399; font-weight: bold;">RoxGestureEvent</span><span style="color: #333333;">):</span><span style="color: #333399; font-weight: bold;">Void</span>
<span style="color: #333333;">{</span>
var sp<span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">target</span><span style="color: #333333;">,</span> DisplayObject<span style="color: #333333;">);</span>
var pt <span style="color: #333333;">=</span> cast<span style="color: #333333;">(</span>e<span style="color: #333333;">.</span><span style="color: #0000cc;">extra</span><span style="color: #333333;">,</span> Point<span style="color: #333333;">);</span>
Actuate<span style="color: #333333;">.</span><span style="color: #0000cc;">tween</span><span style="color: #333333;">(</span>sp<span style="color: #333333;">,</span> <span style="color: #6600ee; font-weight: bold;">0.5</span><span style="color: #333333;">,</span> <span style="color: #333333;">{</span> x<span style="color: #333333;">:</span>sp<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span> <span style="color: #333333;">+</span> pt<span style="color: #333333;">.</span><span style="color: #0000cc;">x</span><span style="color: #333333;">,</span> y<span style="color: #333333;">:</span>sp<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span> <span style="color: #333333;">+</span> pt<span style="color: #333333;">.</span><span style="color: #0000cc;">y</span> <span style="color: #333333;">});</span>
<span style="color: #333333;">}</span>
</pre>
</div>
</div>
<div>
<br /></div>
<div>
And here's the result of the example:</div>
<div>
<ul>
<li><a href="https://dl.dropboxusercontent.com/u/27073998/TestGesture.swf">gesture example</a> ,flash (only tap, long press, swipe and pan gesture available)</li>
<li><a href="https://copy.com/V8V1sLbCRlPVZFut">gesture example</a>, android (all gestures available)</li>
<li>code can be viewed on <a href="https://github.com/fugogugo/OpenFL-roxlib-gesture-example">my github</a></li>
</ul>
</div>
<div>
<b>Note </b>: I have only tested this on flash, android, and windows and works without problem . If anyone can try it on iOS or blackberry and tell me the result I would be grateful!</div>
<div>
<b>Note </b>: When I tested this on html5 ,swipe and pan didn't work. maybe anyone can figure out why? </div>
<h3>
That's all. </h3>
<div>
I hope you can make use of this awesome library. as for this is the best library I found for simple mobile gestures. again, all thanks for rockswang for this awesome gesture library :D</div>
<div>
<br /></div>
<div>
Cheers!</div>
</div>
Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0tag:blogger.com,1999:blog-8815450200650060458.post-84178139480465298442013-07-01T02:22:00.004+07:002013-07-12T09:47:13.862+07:00From NME to OpenFL with FlashDevelop<div style="text-align: justify;">
<span style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px;">Right now OpenFL already up on the haxelib so I could say that it's safe to use it now. For some , the migration process wouldn't be as smooth as one expect. Some problem like different build file type (NME use .nmml while OpenFL use .xml) and the support of OpenFL on FlashDevelop would cause a problem.</span></div>
<div style="text-align: justify;">
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px;"><br /></span>
<span style="color: #333333; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 17px;">I've sucessfully migrated my NME project into OpenFL, it's not a big deal but maybe it can help they who don't know how to migrate :) </span></span></div>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px;">
</span>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b style="color: #333333; line-height: 17px;">First here's how to install OpenFL and FlashDevelop :</b></span></div>
<ol>
<li style="text-align: justify;"><span style="color: #333333;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 17px;">Install haxe 3 from and the <a href="http://haxe.org/">official site</a></span></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif;">open the newly installed haxelib and install these libs: <i>openfl, openfl-compatibility, openfl-tools,openfl-native,openfl-html5</i></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif;">after those libs installed, run this command : <i>haxelib run openfl setup </i></span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif;">run additional setup command to setup each platform : <i>openfl setup android, openfl setup blackberry, etc . </i>If you already run <i>nme setup [platform] </i>previously , the setting would be saved in OpenFL</span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif;">The current release build of FlashDevelop doesn't support OpenFL project, so you need to install the dev build version of FlashDevelop. you can download it <a href="http://www.flashdevelop.org/community/viewtopic.php?f=9&t=3529">here</a></span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">if you select New Project in FlashDevelop you can see the OpenFL project can be created there.</span></li>
</ol>
<div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br /></b></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Migrating NME Project to OpenFL Project</b></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br /></b></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Using the new FlashDevelop we can migrate NME Project to OpenFL, but it need some configuration changes in .nmml file to do so.</span></div>
</div>
<div>
<ul>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">change .nmml file extension in your NME project into .xml </span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">change<i> <haxelib="nme"/> </i>into<i> <haxelib="openfl"/></i></span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">add<i> <haxelib="openfl-compatibility"/> </i>so OpenFL will recognize all the old nme package</span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">looks like<i> <haxelib="actuate"/> </i>is necessary in OpenFL so don't forget to add that (Edit: turns out It's not really necessary if you don't use actuate)</span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">I'm not sure if this one necessary or not but you can delete all<i> <ndll/></i> tags without problem (except your own ndll of course)</span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">This one too , delete the old <i><haxeflag/></i> tag and change with this one<i> <haxeflag name="-dce std" if="haxe3" /></i></span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Last, we need to tell FlashDevelop to use the .xml file as the build file. Right click Project -> Properties . On the output file, change the <i>application.nmml </i>extension to <i>application.xml</i></span></li>
<li style="text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif;">Try to run the project. It should be no problem now.</span></li>
</ul>
</div>
<div style="text-align: justify;">
<span style="color: #333333;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 17px;"><b><br /></b></span></span>
<span style="color: #333333;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 17px;"><b><br /></b></span></span>
<span style="color: #333333;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 17px;"><b>Other notes</b></span></span></div>
<div>
<ul>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px;">check the <a href="http://haxe.org/manual/haxe3/migration">haxe 3 migration </a> for some feature changes like Maps and properties</span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px;">haxe 3 use different haxelib repo than haxe 2. so make sure that your lib that you use is exist in <a href="http://lib.haxe.org/">lib.haxe.org</a> </span></li>
<li style="text-align: justify;"><span style="color: #333333; font-family: Arial, Helvetica, sans-serif; line-height: 17px;">some library like spritesheet changes it's package name so you need to be careful about that.</span></li>
</ul>
<div>
<div style="text-align: justify;">
<span style="color: #333333;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 17px;">for the end note, OpenFL is a great framework with so many potential. so don't hestitate to use it and keep creating awesome things . Cheers! :)</span></span></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0tag:blogger.com,1999:blog-8815450200650060458.post-73207299547892614772013-06-11T11:34:00.000+07:002013-06-11T13:11:07.333+07:00JKT48 Fanmade Game<div style="text-align: center;">
<embed height="600" pluginspage="http://www.macromedia.com/gogetflashplayer" quality="high" src="https://dl.dropboxusercontent.com/u/27073998/JKT48Puzzle.swf" type="application/x-shockwave-flash" width="360" wmode="transparent"></embed><br /></div>
<br />
So I create a fanmade game for all JKT48 out there. this is a small example, if the feedback is good I would consider to add more :)<br />
try to get as highest as you can, Enjoy!<br />
<br />
note : I could make the android version if there's anyone want to download :pAnonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0tag:blogger.com,1999:blog-8815450200650060458.post-40027549671050667052013-05-25T22:00:00.001+07:002013-05-25T22:00:33.681+07:00Resolving NME Android build fail after upgrading SDK to version 22I just met a problem with NME deployment to android after I upgraded the SDK to v22. The problem would look something like this<br />
<br />
<br />
<i>BUILD FAILED</i><br />
<i>D:\Programming\SDKs\android-sdk-windows\tools\ant\build.xml:479: SDK does not have any Build Tools installed.</i><br />
<div>
<br /></div>
<div>
After going for a googling for a while I found out from this <a href="http://stackoverflow.com/questions/16631693/android-build-failing-with-build-xml479-sdk-does-not-have-any-build-tools-inst">stackoverflow question</a> that now android separate the platform-tools and build-tools. you can check on android sdk folder that now there is <i>build-tools</i> folder inside. To resolve this problem we need to open the SDK Manager and install the missing build tools. </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZpNHaIOuokTmoYnNRdGWXM1HUycy2loEwvKKsvgT8yMBuNT3udMww2F5bJJYRYLifC0JH3yJdH6qs1H0203Gvo7uUDR58DDMO0WdSroLCVRux41o7cfXxQe_P_XS55jyVQX4J4mejtA/s1600/android+sdk.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRZpNHaIOuokTmoYnNRdGWXM1HUycy2loEwvKKsvgT8yMBuNT3udMww2F5bJJYRYLifC0JH3yJdH6qs1H0203Gvo7uUDR58DDMO0WdSroLCVRux41o7cfXxQe_P_XS55jyVQX4J4mejtA/s320/android+sdk.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
At first when I update the sdk to v22 this Android SDK build-tool doesn't exist, but after updating the list it showed up on the list. Install it and the problem can be solved. have fun :)</div>
Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0tag:blogger.com,1999:blog-8815450200650060458.post-790960835461443542013-04-28T22:45:00.002+07:002013-04-28T22:48:11.567+07:00Haxe Game : Color Word , a demonstration of Stroop EffectSo I create a simple game for the weekend. I just feel the urge to create it because I love the idea so much :))<br />
The idea is simple, it's demonstrate what it's called by <a href="http://en.wikipedia.org/wiki/Stroop_effect">Stroop Effect</a>. Simply said, Brain will have difficult to process a color when conflicted with different color name. <a href="http://faculty.washington.edu/chudler/words.html">Good explanation here</a> .<br />
This game created with Haxe NME . It also has the android version , you can download it <a href="https://dl.dropboxusercontent.com/u/27073998/ColorWords-release.apk">here</a><br />
<br />
enjoy :)<br />
<br />
<br />
<embed height="350" pluginspage="http://www.macromedia.com/gogetflashplayer" quality="high" src="https://dl.dropboxusercontent.com/u/27073998/ColorWords.swf" type="application/x-shockwave-flash" width="480" wmode="transparent"></embed><br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com1tag:blogger.com,1999:blog-8815450200650060458.post-64021554378095773332013-04-28T22:16:00.001+07:002013-08-03T14:15:48.794+07:00Animated Sprite using Bitmap Spritesheet with Haxe NME/OpenFL Spritesheet Library<div style="text-align: justify;">
NME comes with great <a href="http://lib.haxe.org/p/spritesheet">spritesheet </a>lib which can be installed with <i>haxelib install spritesheet</i> command on commandline. Unfortunately it lacks documentation and how to example tutorial. The only spritesheet tutorial available is the <a href="http://www.joshuagranick.com/blog/?p=493">singmajesty's tutorial</a> which also doesn't give a clue about how to work with bitmap spritesheet. So I tried to figured it out myself. And turns out it's not that hard, so I'll tell you how in a fast and effective way.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The first thing needed to create animated sprite of course is the spritesheet itself. I will use the spritesheet I took from <a href="http://opengameart.org/content/kit-the-firefox-mascot">opengameart</a> as example.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuE2X_Opy4-Ti-Z5gd0GH14FSZN1ldvkWw4VjsXpTWVPvcviXAXk4hwy36z_iTFbM4whRXnf3j_dM8fWEkIAz_hfvIPJGHxGVNNUgfacOw8-7fm3C94juPw-v9HZDFBCdirt7bx4wcMoo/s1600/kit_from_firefox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuE2X_Opy4-Ti-Z5gd0GH14FSZN1ldvkWw4VjsXpTWVPvcviXAXk4hwy36z_iTFbM4whRXnf3j_dM8fWEkIAz_hfvIPJGHxGVNNUgfacOw8-7fm3C94juPw-v9HZDFBCdirt7bx4wcMoo/s320/kit_from_firefox.png" width="74" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
also don't forget to add spritesheet lib to nmml with haxelib tag<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: navy;"><haxelib</span> <span style="color: teal;">name=</span><span style="color: #bb8844;">"spritesheet"</span> <span style="color: navy;">/></span>
</pre>
</div>
<br />
<br />
to load the bitmap and parse it as animation frames we can use <a href="http://lib.haxe.org/d/spritesheet/1.11/com/eclecticdesignstudio/spritesheet/importers/BitmapImporter">BitmapImporter</a> class inside <i>com.ecleticdesignstudio.spritesheet.importers</i> package. this class is really simple because it's only contain one static function called <i>create()</i>. as the input parameter it ask for the BitmapData , column count, row count, frame width, frame height, and some additional parameter which I'm not sure what it is so I'll leave it like that for now. The<i> create()</i> methods gives output a <a href="http://lib.haxe.org/d/spritesheet/1.11/com/eclecticdesignstudio/spritesheet/Spritesheet">Spritesheet </a>class, we need to create a variable to hold this output.<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="font-weight: bold;">var</span> spritesheet:<span style="color: #445588; font-weight: bold;">Spritesheet</span> <span style="font-weight: bold;">=</span> BitmapImporter<span style="font-weight: bold;">.</span><span style="color: teal;">create</span><span style="font-weight: bold;">(</span>Assets<span style="font-weight: bold;">.</span><span style="color: teal;">getBitmapData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"img/kit_from_firefox.png"</span><span style="font-weight: bold;">),</span> <span style="color: #009999;">3</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">9</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">56</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">80</span><span style="font-weight: bold;">);</span>
</pre>
</div>
<br />
<br />
we can (and must) assign <a href="http://lib.haxe.org/d/spritesheet/1.11/com/eclecticdesignstudio/spritesheet/data/BehaviorData">BehaviourData</a> this Spritesheet object. BehaviourData required to define how the spritesheet should be used, which frame should be played at what speed(fps) and should it be looped or not.<br />
for this example I create 9 behaviour for the spritesheet and assigns it to each row of frames, and I give different parameter for each behaviour. What's important for this BehaviourData input parameter is the name and frame number.<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"stand"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">0</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">1</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">2</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">true));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"down"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">3</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">4</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">5</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">15</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"jump"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">6</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">7</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">8</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">15</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"hit"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">9</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">10</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">11</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">15</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"punch"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">12</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">13</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">14</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">5</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"kick"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">15</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">16</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">17</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">15</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"flypunch"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">18</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">19</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">20</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">10</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"flykick"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">21</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">22</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">23</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">false,</span><span style="color: #009999;">10</span><span style="font-weight: bold;">));</span>
spritesheet<span style="font-weight: bold;">.</span><span style="color: teal;">addBehavior</span><span style="font-weight: bold;">(new</span> <span style="color: #445588; font-weight: bold;">BehaviorData</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"dizzy"</span><span style="font-weight: bold;">,</span> <span style="font-weight: bold;">[</span><span style="color: #009999;">24</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">25</span><span style="font-weight: bold;">,</span> <span style="color: #009999;">26</span><span style="font-weight: bold;">],</span> <span style="font-weight: bold;">true));</span>
</pre>
</div>
<br />
<br />
The spritesheet itself is ready, but we can't use it directly. spritesheet library has their own sprite class for animation called <a href="http://lib.haxe.org/d/spritesheet/1.11/com/eclecticdesignstudio/spritesheet/AnimatedSprite">AnimatedSprite</a>. We can use this AnimatedSprite to animate the spritesheet created before. to use it simply input the spritesheet into the constructor parameter.<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="font-weight: bold;">var</span> animated:<span style="color: #445588; font-weight: bold;">AnimatedSprite</span> <span style="font-weight: bold;">=</span> <span style="font-weight: bold;">new</span> <span style="color: #445588; font-weight: bold;">AnimatedSprite</span><span style="font-weight: bold;">(</span>spritesheet<span style="font-weight: bold;">,</span> <span style="font-weight: bold;">true)</span>
</pre>
</div>
<br />
<br />
AnimatedSprite need to update itself for animation, so we must call it's <i>update()</i> method on each update cycle<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"> <span style="font-weight: bold;">public</span> <span style="font-weight: bold;">function </span><span style="color: #990000; font-weight: bold;">onEnterFrame</span><span style="font-weight: bold;">(</span>e<span style="font-weight: bold;">:</span><span style="color: #445588; font-weight: bold;">Event</span><span style="font-weight: bold;">):</span><span style="color: #445588; font-weight: bold;">Void</span>
<span style="font-weight: bold;">{</span>
var delta <span style="font-weight: bold;">=</span> Lib<span style="font-weight: bold;">.</span><span style="color: teal;">getTimer</span><span style="font-weight: bold;">()-</span> lastTime<span style="font-weight: bold;">;</span>
animated<span style="font-weight: bold;">.</span><span style="color: teal;">update</span><span style="font-weight: bold;">(</span>delta<span style="font-weight: bold;">);</span>
lastTime <span style="font-weight: bold;">=</span> Lib<span style="font-weight: bold;">.</span><span style="color: teal;">getTimer</span><span style="font-weight: bold;">();</span>
<span style="font-weight: bold;">}</span>
</pre>
</div>
<br />
<br />
To play animation we can call behaviour names from spritesheet using <i>showBehaviour()</i> method or <i>showBehaviours() </i>if we want to call a list of behaviour consecutively. We can also queue behaviour using <i>queueBehaviour(), </i>the method will queue behaviour and animate it after the current animation finished. Remember that a looping behaviour will loop forever and so it should not be used inside the behaviour queue (if we use <i>showBehaviours() </i>or queueBehaviour())<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">animated<span style="font-weight: bold;">.</span><span style="color: teal;">showBehavior</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"stand"</span><span style="font-weight: bold;">);</span>
animated<span style="font-weight: bold;">.</span><span style="color: teal;">showBehaviors</span><span style="font-weight: bold;">([</span><span style="color: #bb8844;">"down"</span><span style="font-weight: bold;">,</span><span style="color: #bb8844;">"jump"</span><span style="font-weight: bold;">,</span><span style="color: #bb8844;">"hit"</span><span style="font-weight: bold;">,</span><span style="color: #bb8844;">"punch"</span><span style="font-weight: bold;">]);</span>
</pre>
</div>
<br />
<br />
So that's what I know about how to use spritesheet library . I hope it could help as the a simple tutorial of how to use Haxe NME spritesheet library because spritesheet is a fundamental thing in game. and spritesheet lib is a neat library for a playing animation. :)<br />
<br />
Here is the result: <a href="https://dl.dropboxusercontent.com/u/27073998/BitmapSpritesheet.swf">https://dl.dropboxusercontent.com/u/27073998/BitmapSpritesheet.swf</a><br />
you could find the example source <a href="https://github.com/fugogugo/NMEspritesheetExample">here</a> .<br />
<br />
Cheers! :)<br />
<br />
<b>Update : Dealing with Haxe 3 Change</b><br />
<b><br /></b>
if you switch to haxe 3 you may deal with error saying that package not found. that's happen because spritesheet library on haxe 3 use different package name. The solution is to change the package name<br />
<br />
From<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.eclecticdesignstudio.spritesheet.AnimatedSprite</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.eclecticdesignstudio.spritesheet.data.BehaviorData</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.eclecticdesignstudio.spritesheet.importers.BitmapImporter</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.eclecticdesignstudio.spritesheet.Spritesheet</span>;
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
to<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">spritesheet.AnimatedSprite</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">spritesheet.data.BehaviorData</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">spritesheet.importers.BitmapImporter</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">spritesheet.Spritesheet</span>;
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
there you go. now it will run without any problems . Good luck! :)Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0tag:blogger.com,1999:blog-8815450200650060458.post-57957665958638362292013-04-14T01:13:00.002+07:002013-04-28T23:01:04.408+07:00NME Gesture LibraryI was struggling with how to do gestures with NME . I need to do swipe control in my games but I can't found any good gesture library to use.<br />
Then luckily I stumbled upon this <a href="https://github.com/rockswang/roxlib">roxlib library</a>. it was after browsing through the haxe google group that I found a <a href="https://groups.google.com/forum/?fromgroups=#!topic/haxelang/SsRGFOATmfY">thread</a> about it. I tested it on my android and it works really well<br />
<br />
it's a good library but really need documentation about how to use it.<br />
I've figured out how it works and maybe will create some examples later.<br />
currently it support pan, pinch , swipe, long press, tap, double tap, and some other's that I forgot. (well at least I can use the swipe :p )<br />
<br />
the downside is it's need some sprite with graphic registered as the input listener so an empty sprite without anything inside would be no good. I use empty sprite as the input listener so this really troubles me. My solution is create a screen-sized transparent image as the graphic and add it to the sprite. it works well, but if there's any better solution maybe I'll try that.Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com2tag:blogger.com,1999:blog-8815450200650060458.post-69990421782947593482013-04-07T00:26:00.000+07:002013-04-14T01:16:16.317+07:00Integrating Chartboost with Haxe NME for Android<a href="http://www.nme.io/">Haxe NME</a> is a great cross platform framework for game which support wide range of platform from desktop to mobile. It compiles to native, and have the similarity with flash AS3. NME is extensible and have numbers of useful third party library support. I prefer it mostly because it could compile to many different platform especially flash, Android, iOS, and Blackberry10.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixnRot-rDiRBp9CMVTg8U-zp00ttBoGAAE1gFBmsP-ik1i53ooZII8GJbyiP0l1XPU7OYJpD5dliTpnxZdt1WKmEL85pM4yVShEGrllQsGELwFSqvhOjrUt8MCotk9zh6_ix68FmY-wyw/s1600/nme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixnRot-rDiRBp9CMVTg8U-zp00ttBoGAAE1gFBmsP-ik1i53ooZII8GJbyiP0l1XPU7OYJpD5dliTpnxZdt1WKmEL85pM4yVShEGrllQsGELwFSqvhOjrUt8MCotk9zh6_ix68FmY-wyw/s1600/nme.png" /></a></div>
<br />
maybe the only problem with NME is the lack of documentation and not so active community outside the forum and mailing list. there's still so many things not covered in the tutorial and some googling of NME-Android related things won't give you direct answer to the problem. stackoverflow tag of haxe/nme tag doesn't have so much question and reddit r/haxe sub just have a small number of reader.<br />
<br />
One problem stuck me now is integration of ads, specifically Chartboost . <a href="https://www.chartboost.com/">Chartboost </a>is a really good ads network with a high CPM. before using NME I used libgdx to create android games, and chartboost integration with libgdx is easy as breeze because it's covered on the tutorial.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59odkDEXWjW5WZQyxmyWwnkfYRc4tWLHLjNxZK5y2IY1i_Ft_45T9JnH6FnpgR2B3RzzuN4ikNAQmWlUevBxd88YMpRPG4KBE5Mf6qd-xTTJMBsuWBnr7xwtbRFlpkOgy8NSBeDr5igQ/s1600/chartboost.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59odkDEXWjW5WZQyxmyWwnkfYRc4tWLHLjNxZK5y2IY1i_Ft_45T9JnH6FnpgR2B3RzzuN4ikNAQmWlUevBxd88YMpRPG4KBE5Mf6qd-xTTJMBsuWBnr7xwtbRFlpkOgy8NSBeDr5igQ/s1600/chartboost.jpg" /></a></div>
<br />
I searched everywhere looking for how to integrate chartboost (Android) on NME and it result on nothing. Luckily, after struggling so much with so many different keyword I stumbled upon <a href="http://www.gigglingcorpse.com/2012/03/22/programming-for-android-in-java-but-using-nme/">gigglingcorpse's blog post</a> and found some answer. I contacted <a href="https://twitter.com/gigglingcorpse">gigglingcorpse</a> and after consulting for a while finally I could integrate the ads! Big Thanks!<br />
<br />
I feel the urge to write this tutorial to help others give more understanding about of how to integrate chartboost (Android) with NME. It's not really hard but maybe it could confuse new player which still not understand about how NME work behind the screen.<br />
<br />
<i>So let's start!</i><br />
<br />
First thing first! In order to integrate chartboost ads in our game we need to first register the app inside chartboost dashboard. just register on chartboost and Add App to get the APP_KEY and SIGNATURE. I won't tell you how to do that here. just look it up on the <a href="https://help.chartboost.com/documentation/android">official help</a> yourself. just make sure the test mode enabled . also you need to create campaign and check the created app so the app could display ads inside.<br />
<br />
After we got the APP_ID and APP_SIGNATURE we can integrate it in our NME project.<br />
<br />
I used FlashDevelop in this tutorial so I will create a HelloWorld project for the purpose of tutorial.<br />
<br />
First thing to do is adding chartboost library to the project. in order to do that we need to create libs folder inside assets folder so the structure will be like <i>assets/libs. </i>Download the chartboost android library from the <a href="https://help.chartboost.com/downloads/android">official download</a> and then copy it to libs folder .<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvGgAYacSe0VmTbDKwo3WpWe3x-V6Jn9KB81R9kK0KrPbSJE3_A2T0d5L8aFhu7E2Kp0W70-hbW57zmK56DJDRnC87HJwG-s4el6buJ6XTfpHR8pjSQvLAxtiFHrD8cGT3ypwOUE-y00/s1600/libs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvGgAYacSe0VmTbDKwo3WpWe3x-V6Jn9KB81R9kK0KrPbSJE3_A2T0d5L8aFhu7E2Kp0W70-hbW57zmK56DJDRnC87HJwG-s4el6buJ6XTfpHR8pjSQvLAxtiFHrD8cGT3ypwOUE-y00/s1600/libs.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>add chartboost library</b></td></tr>
</tbody></table>
<br />
Then on the application.nmml write a template tag to rename it as lib folder in android<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #007000;"><template</span> <span style="color: #0000c0;">path=</span><span style="background-color: #fff0f0;">"assets/libs"</span> <span style="color: #0000c0;">rename=</span><span style="background-color: #fff0f0;">"libs"</span> <span style="color: #0000c0;">if=</span><span style="background-color: #fff0f0;">"android"</span> <span style="color: #007000;">/></span>
</pre>
</div>
<br />
Adding chartboost library is done! Next step is putting the code.<br />
<br />
Chartboost integration require us to add some code on Activiy class in Android. So we need to override the default MainActivity.java emplate. MainActivity.java s an android class generated by haxe as the Activity class to launch in android. the default MainActivity.java will looks like a blank class as seen below<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: green; font-weight: bold;">package</span> <span style="color: #303030;">::</span><span style="color: #907000; font-weight: bold;">APP_PACKAGE:</span><span style="color: #303030;">:;</span>
<span style="color: green; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Bundle</span><span style="color: #303030;">;</span>
<span style="color: green; font-weight: bold;">public</span> <span style="color: green; font-weight: bold;">class</span> <span style="color: #b00060; font-weight: bold;">MainActivity</span> <span style="color: green; font-weight: bold;">extends</span> org<span style="color: #303030;">.</span><span style="color: #0000c0;">haxe</span><span style="color: #303030;">.</span><span style="color: #0000c0;">nme</span><span style="color: #303030;">.</span><span style="color: #0000c0;">GameActivity</span> <span style="color: #303030;">{</span>
<span style="color: #303030;">}</span>
</pre>
</div>
<br />
<br />
We cannot add code directly to the generated MainActivity.java class because the code added will be wiped out when we do the next build. In order to override the MainActivity.java class we need to change the MainActivity.java template and fill it with necessary code. To do that , copy MainActivity.java template from nme installation folder. The template located in <i>templates\default\android . </i>copy the MainActivity template to project directory and then register it as template on application.nmml . change the [package_path] with your app package path<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: navy;"><template</span> <span style="color: teal;">path=</span><span style="color: #bb8844;">"MainActivity.java"</span> <span style="color: teal;">rename=</span><span style="color: #bb8844;">"src/com/fugo/helloWorld/HelloWorld/MainActivity.java"</span> <span style="color: teal;">if=</span><span style="color: #bb8844;">"android"</span> <span style="color: navy;">/></span>
</pre>
</div>
<br />
<br />
Open MainActivity.java and add the code as instructed on the <a href="https://help.chartboost.com/documentation/android">official tutorial</a> . there's nothing need to be changed once you got it done so you can just copy paste code below to your MainActivity.java .just remember to change "YOUR_APP_ID" and "YOUR_APP_SIGNATURE" with the APP_ID and APP_SIGNATURE.<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: green; font-weight: bold;">package</span> <span style="color: #303030;">::</span><span style="color: #907000; font-weight: bold;">APP_PACKAGE:</span><span style="color: #303030;">:;</span>
<span style="color: green; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Bundle</span><span style="color: #303030;">;</span>
<span style="color: green; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.chartboost.sdk.*</span><span style="color: #303030;">;</span>
<span style="color: green; font-weight: bold;">public</span> <span style="color: green; font-weight: bold;">class</span> <span style="color: #b00060; font-weight: bold;">MainActivity</span> <span style="color: green; font-weight: bold;">extends</span> org<span style="color: #303030;">.</span><span style="color: #0000c0;">haxe</span><span style="color: #303030;">.</span><span style="color: #0000c0;">nme</span><span style="color: #303030;">.</span><span style="color: #0000c0;">GameActivity</span> <span style="color: #303030;">{</span>
<span style="color: green; font-weight: bold;">private</span> Chartboost cb<span style="color: #303030;">;</span>
<span style="color: #505050; font-weight: bold;">@Override</span>
<span style="color: green; font-weight: bold;">protected</span> <span style="color: #303090; font-weight: bold;">void</span> <span style="color: #0060b0; font-weight: bold;">onCreate</span><span style="color: #303030;">(</span>Bundle state<span style="color: #303030;">)</span> <span style="color: #303030;">{</span>
<span style="color: green; font-weight: bold;">super</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onCreate</span><span style="color: #303030;">(</span>state<span style="color: #303030;">);</span>
<span style="color: grey;">// Configure Chartboost</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span> <span style="color: #303030;">=</span> Chartboost<span style="color: #303030;">.</span><span style="color: #0000c0;">sharedChartboost</span><span style="color: #303030;">();</span>
String appId <span style="color: #303030;">=</span> <span style="background-color: #fff0f0;">"YOUR_APP_ID"</span><span style="color: #303030;">;</span>
String appSignature <span style="color: #303030;">=</span> <span style="background-color: #fff0f0;">"YOUR_APP_SIGNATURE"</span><span style="color: #303030;">;</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onCreate</span><span style="color: #303030;">(</span><span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">,</span> appId<span style="color: #303030;">,</span> appSignature<span style="color: #303030;">,</span> <span style="color: green; font-weight: bold;">null</span><span style="color: #303030;">);</span>
<span style="color: grey;">// Notify the beginning of a user session</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">startSession</span><span style="color: #303030;">();</span>
<span style="color: grey;">// Show an interstitial</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">showInterstitial</span><span style="color: #303030;">();</span>
<span style="color: #303030;">}</span>
<span style="color: #505050; font-weight: bold;">@Override</span>
<span style="color: green; font-weight: bold;">protected</span> <span style="color: #303090; font-weight: bold;">void</span> <span style="color: #0060b0; font-weight: bold;">onStart</span><span style="color: #303030;">()</span> <span style="color: #303030;">{</span>
<span style="color: green; font-weight: bold;">super</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onStart</span><span style="color: #303030;">();</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onStart</span><span style="color: #303030;">(</span><span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">);</span>
<span style="color: #303030;">}</span>
<span style="color: #505050; font-weight: bold;">@Override</span>
<span style="color: green; font-weight: bold;">protected</span> <span style="color: #303090; font-weight: bold;">void</span> <span style="color: #0060b0; font-weight: bold;">onStop</span><span style="color: #303030;">()</span> <span style="color: #303030;">{</span>
<span style="color: green; font-weight: bold;">super</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onStop</span><span style="color: #303030;">();</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onStop</span><span style="color: #303030;">(</span><span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">);</span>
<span style="color: #303030;">}</span>
<span style="color: #505050; font-weight: bold;">@Override</span>
<span style="color: green; font-weight: bold;">protected</span> <span style="color: #303090; font-weight: bold;">void</span> <span style="color: #0060b0; font-weight: bold;">onDestroy</span><span style="color: #303030;">()</span> <span style="color: #303030;">{</span>
<span style="color: green; font-weight: bold;">super</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onDestroy</span><span style="color: #303030;">();</span>
<span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onDestroy</span><span style="color: #303030;">(</span><span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">);</span>
<span style="color: #303030;">}</span>
<span style="color: #505050; font-weight: bold;">@Override</span>
<span style="color: green; font-weight: bold;">public</span> <span style="color: #303090; font-weight: bold;">void</span> <span style="color: #0060b0; font-weight: bold;">onBackPressed</span><span style="color: #303030;">()</span> <span style="color: #303030;">{</span>
<span style="color: grey;">// If an interstitial is on screen, close it. Otherwise continue as normal.</span>
<span style="color: green; font-weight: bold;">if</span> <span style="color: #303030;">(</span><span style="color: green; font-weight: bold;">this</span><span style="color: #303030;">.</span><span style="color: #0000c0;">cb</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onBackPressed</span><span style="color: #303030;">())</span>
<span style="color: green; font-weight: bold;">return</span><span style="color: #303030;">;</span>
<span style="color: green; font-weight: bold;">else</span>
<span style="color: green; font-weight: bold;">super</span><span style="color: #303030;">.</span><span style="color: #0000c0;">onBackPressed</span><span style="color: #303030;">();</span>
<span style="color: #303030;">}</span>
<span style="color: #303030;">}</span>
</pre>
</div>
<br />
we could also use the code above as a template for next project without changing much of the code, just the APP_ID and APP_SIGNATURE.<br />
<br />
save up the change and.... test run it on android.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYoxddWJBpSM0HS0tJZOT4wDEHInXyIAenesDSk8wJqy9vo6Y_gCH_VOZ-QS-muMT7r0V5XdAkkYzJfLv4-piBsYShDagEOK9MEzp6HZtLnceorbEyhDBX5mAWMP4h05GskihRamrxdA/s1600/2013-04-06+13.07.40.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYoxddWJBpSM0HS0tJZOT4wDEHInXyIAenesDSk8wJqy9vo6Y_gCH_VOZ-QS-muMT7r0V5XdAkkYzJfLv4-piBsYShDagEOK9MEzp6HZtLnceorbEyhDBX5mAWMP4h05GskihRamrxdA/s320/2013-04-06+13.07.40.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Voila! Chartboost (Android) with HaxeNME</td></tr>
</tbody></table>
Integration done!<br />
to give more control of the ads showing , you could change the<i> showInterstitial() </i>method with <i>cacheInterstitial() </i>in onCreate() and then call <i>cb.showInterstitial()</i> through JNI call from haxe. for convenience I created a public static method called <i>showChartboost() </i>in MainActivity.java and call it from haxe like below<br />
<br />
<div style="background: #ffffff; border-width: .1em .1em .1em .8em; border: solid gray; overflow: auto; padding: .2em .6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">var showChartboost <span style="font-weight: bold;">=</span> JNI<span style="font-weight: bold;">.</span><span style="color: teal;">createStaticMethod</span><span style="font-weight: bold;">(</span><span style="color: #bb8844;">"com/amagine/plate2/MainActivity"</span><span style="font-weight: bold;">,</span> <span style="color: #bb8844;">"showChartboost"</span><span style="font-weight: bold;">,</span> <span style="color: #bb8844;">"()V"</span><span style="font-weight: bold;">);</span>
showChartboost<span style="font-weight: bold;">();</span>
</pre>
</div>
<br />
there.. from here on much can be done via JNI so I'll leave it up to you about the advanced things. thanks for reading!<br />
<br />
~End of Tutorial~Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com3tag:blogger.com,1999:blog-8815450200650060458.post-85607975124685956592013-04-06T22:22:00.001+07:002013-04-06T22:26:08.940+07:00Hello WorldThis is a test post.<br />
<br />
I'm gonna make this blog as a simple diary of my programming days~<br />
<br />
<br />
<pre style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQZ-0eiWIg2LUJZLB97wtoXVHIl05fmy-8Iv8ZfjAgxODDAV43dRVsrl8yD6kRjW7icArWglbxSALhxfLyDwU1jEACa3RyehLJ00tnP2i5jV-NtpChI8990nhzGcf9_wGs8ZVADkQKR36V/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> printf("Hello World");
</code></pre>Anonymoushttp://www.blogger.com/profile/16748711243698508893noreply@blogger.com0