tag:blogger.com,1999:blog-52002609039741549492024-03-14T12:30:25.134+01:00Amanullah TariqPlace to learn and shareUnknownnoreply@blogger.comBlogger20125tag:blogger.com,1999:blog-5200260903974154949.post-51244317924487483012015-01-07T00:31:00.004+01:002015-01-07T13:07:22.953+01:00Android Studio Tabs for our App Part 2<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzZqgDWy_wJ0uFuO0tWsKNysebqS7bmJsdNlzmCqDL5bke6IK7BFlBLmBXaBEBdsez8bzX3QzRv25ZSQHHBqiNdM8lQqURihqeIoA_u_UgpeldgJSeAc1QHN-49tpn0TnUVzGVukNb0k/s1600/android-studio-1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzZqgDWy_wJ0uFuO0tWsKNysebqS7bmJsdNlzmCqDL5bke6IK7BFlBLmBXaBEBdsez8bzX3QzRv25ZSQHHBqiNdM8lQqURihqeIoA_u_UgpeldgJSeAc1QHN-49tpn0TnUVzGVukNb0k/s1600/android-studio-1.png" height="150" width="200" /></a></div>
<br />
<span style="background-color: white; color: #333333; font-family: arial, sans-serif; font-size: 13px; line-height: 17px;">Welcome to the second part of the Android Studio App Development Tutorials in Java.</span><br />
<span style="background-color: white; color: #333333; font-family: arial, sans-serif; font-size: 13px; line-height: 17px;">Today we are adding a TabHost to our App and you will also see what we made so far.</span><span style="background-color: white; color: #333333; font-family: arial, sans-serif; font-size: 13px; line-height: 17px;">Next time we will create the Contact List and our own Contact</span><span style="background-color: white; color: #333333; font-family: arial, sans-serif; font-size: 13px; line-height: 17px;"> Class.</span><br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='620' height='320' src='https://www.youtube.com/embed/irDdBxamuZs?feature=player_embedded' frameborder='0'></iframe></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-41582555428795908782015-01-06T22:50:00.001+01:002015-01-07T13:07:32.055+01:00Android Studio First App Development Part 1<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" height="150" width="200" /></a><span style="background-color: white; font-family: arial, sans-serif; line-height: 17px;"><span style="font-size: 13px;">This time we are going to create another App in Android Studio. We aren't actually creating something completely useless and I just wanted to try a different approach at teaching, so I will be creating this project and comment on what I'm doing.</span> <b><a href="http://amanullahtariq.com/Projects/Download/ContactManager.zip" target="_blank">Download Code Here</a></b></span><br />
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='620' height='326' src='https://www.youtube.com/embed/jliH9hAQMOI?feature=player_embedded' frameborder='0'></iframe></span></div>
</div>
<!-- Blogger automated replacement: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" --><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F4.bp.blogspot.com%2F-LcOOSxKh3jE%2FVKxZQHlpp3I%2FAAAAAAAAAZA%2Fv_6Lbiimx54%2Fs1600%2Fandroid-studio-1.png&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" -->Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-43083914286994138152015-01-06T22:48:00.004+01:002015-01-07T13:07:41.243+01:00Android Studio Setting up a Project and Gradle<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" height="150" width="200" /></a>A video showing the new build system gradle for ndroid in android studio and how it differs from eclipse.</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='620' height='320' src='https://www.youtube.com/embed/jliH9hAQMOI?feature=player_embedded' frameborder='0'></iframe></div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-51923589594118171452015-01-06T13:16:00.004+01:002015-01-07T13:07:56.033+01:00Android Studio Getting Started with Android Studio<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWseMiD3y-yJ_Vs_rFpizf30UswxbHCBRPigQmrCWRBksc4yurztlFhRupqb3JMXqkc0XYFxMHMW4mg9UEKiXzTOIcE_1J1kSVgblKN8cnPsEoz2aSm3TmBr-tY4KVjp7lk3RHXUYUio/s1600/android-studio-1.png" height="150" width="200" /></a></div>
<h1 itemprop="name" style="background-color: #f9f9f9; color: #333333; font-family: Roboto, sans-serif; font-size: 34px; font-weight: 300; line-height: 30px; margin: 36px 0px 27px; padding: 0px 0px 10px;">
Android Studio Overview</h1>
<span style="font-family: Arial, Helvetica, sans-serif;">In this video, We will tell you how to set up Android Studio.<span style="background-color: #f9f9f9; color: #222222; font-size: 14px; line-height: 19px;">Android Studio is the official IDE for Android application development, based on</span><span style="background-color: #f9f9f9; color: #222222; font-size: 14px; line-height: 19px;"> </span><a class="external-link" href="https://www.jetbrains.com/idea/" style="background-attachment: initial; background-clip: initial; background-image: url(http://developer.android.com/assets/images/styles/open_new_page.png); background-origin: initial; background-position: 100% 50%; background-repeat: no-repeat; background-size: initial; color: #258aaf; font-size: 14px; line-height: 19px; padding-right: 16px; text-decoration: none;" target="_blank">IntelliJ IDEA</a><span style="background-color: #f9f9f9; color: #222222; font-size: 14px; line-height: 19px;">. On top of the capabilities you expect from IntelliJ, Android Studio offers:</span></span><br />
<span style="background-color: #f9f9f9; color: #222222; font-size: 14px; line-height: 19px;"><span style="font-family: Arial, Helvetica, sans-serif;">Flexible Gradle-based build system</span></span><br />
<ul style="background-color: #f9f9f9; color: #222222; font-size: 14px; line-height: 19px; margin: 0px 0px 15px 18px; padding: 0px;">
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">Build variants and multiple <code style="color: #006600; font-size: 13px; font-stretch: normal; line-height: 14px;">apk</code> file generation</span></li>
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">Code templates to help you build common app features</span></li>
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">Rich layout editor with support for drag and drop theme editing</span></li>
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">Lint tools to catch performance, usability, version compatibility, and other problems</span></li>
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">ProGuard and app-signing capabilities</span></li>
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">Built-in support for <a class="external-link" href="http://developers.google.com/cloud/devtools/android_studio_templates/" style="background: url(http://developer.android.com/assets/images/styles/open_new_page.png) 100% 50% no-repeat; color: #258aaf; padding-right: 16px; text-decoration: none;">Google Cloud Platform</a>, making it easy to integrate Google Cloud Messaging and App Engine</span></li>
<li style="margin: 0px 0px 5px;"><span style="font-family: Arial, Helvetica, sans-serif;">And much more</span></li>
<li style="margin: 0px 0px 5px;"><div style="margin-bottom: 15px;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://developer.android.com/sdk/index.html" style="color: #258aaf; text-decoration: none;">Download Android Studio now</a></b>.</span></div>
<div style="margin-bottom: 15px;">
<span style="font-family: Arial, Helvetica, sans-serif;">If you're new to Android Studio or the IntelliJ IDEA interface, this page provides an introduction to some key Android Studio features.</span></div>
<div style="margin-bottom: 15px;">
<span style="font-family: Arial, Helvetica, sans-serif;">For specific Android Studio how-to documentation, see the pages in the <a href="http://developer.android.com/tools/workflow/index.html" style="color: #258aaf; text-decoration: none;">Workflow</a> section, such as <a href="http://developer.android.com/tools/projects/projects-studio.html" style="color: #258aaf; text-decoration: none;">Managing Projects from Android Studio</a> and <a href="http://developer.android.com/tools/building/building-studio.html" style="color: #258aaf; text-decoration: none;">Building and Running from Android Studio</a>.</span></div>
</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='420' height='266' src='https://www.youtube.com/embed/ZddHwDYqyIw?feature=player_embedded' frameborder='0'></iframe></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-50607768232755907872014-12-26T18:24:00.001+01:002014-12-26T18:24:47.206+01:00Show that every graph with two or more nodes there must be two nodes that have equal degree<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">You can prove it by induction. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">A graph with 2 vertices has either 0 or 1 edges, </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">and in either case, the two nodes have the same degree. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">Assume the theorem holds for k vertices and there </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">are two (or more) of same degree. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">The existing k vertices have at most (k-2) different </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">degrees 1,2, ...., k-1 (with at least one missing, </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">and at least one pair). [ by induction hypothesis ] </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">Add another node and, one by one, its edges. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">When the first new edge is added, the new node has degree 1, </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">and we have one of the following possibilities: </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">1) connected to a node with a unique degree: </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">Then there was another pair which remains intact. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">2) connected to a member of a pair of same degree. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">a) if there is another pair, that pair remains. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">b) if this was the only pair, let it be degree d and before </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">we drew this edge, the list of degrees was </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">1, 2, 3, ..., d , d, d+1, d+2, .... k-1 </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">with one element missing. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">If 1 was missing before, we now have 2 (d+1)s. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">If (d+1) was missing before, we now have 2 (1)s. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">If neither was missing before we now have both of them paired. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">This is the situation for each new edge added, but a different </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">constant instead of 1 as the degree of the new node increases. </span><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><br style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;" /><span style="background-color: white; font-family: 'Helvetica Neue', Helvetica, Arial, san-serif; font-size: 13px; line-height: 16.25px;">Therefore, there is always a pair. </span></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-5666963497006701642014-12-23T15:42:00.002+01:002014-12-23T15:42:22.501+01:00Start a New Cocos2d-x Game<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 2em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Create A New Project</h2>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); color: #333333; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 15px; margin-left: 1.7em; margin-top: 15px; outline: 0px; overflow-x: auto; overflow-y: hidden; padding: 10px; vertical-align: baseline;">$ cd cocos2d-x
$ ./setup.py
$ source ~/.bash_profile # may be ~/.bash_login or ~/.profile, depends on your environemnt
$ cocos new MyGame -p com.MyCompany.MyGame -l cpp -d ~/MyCompany
</pre>
<ul style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 15px 0px; outline: 0px; padding: 0px 0px 0px 30px; vertical-align: baseline;">
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">MyGame</code>: name of your project</li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">-p com.MyCompany.MyGame</code>: package name for android</li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">-l cpp</code>: programming language used for the project, valid value is <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">cpp</code>and <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">lua</code></li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">-d ~/MyCompany</code>: directory to hold your project</li>
</ul>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="new game" src="http://www.cocos2d-x.org/attachments/download/4001" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
Folder structure of the generated project is as following:</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="folder structure" src="http://www.cocos2d-x.org/attachments/download/4002" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
(Note: The directory may be different when the project type is lua.)</div>
<h2 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 2em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Build And Run New Project</h2>
<pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); color: #333333; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 15px; margin-left: 1.7em; margin-top: 15px; outline: 0px; overflow-x: auto; overflow-y: hidden; padding: 10px; vertical-align: baseline;">$ cocos run -s ~/MyCompany/MyGame -p ios
</pre>
<ul style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 15px 0px; outline: 0px; padding: 0px 0px 0px 30px; vertical-align: baseline;">
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">-s</code>: directory of the new project. This could be an absolute path or a relative path.</li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">-p</code>: which platform to run on. Options are <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">ios</code>,<code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">android</code>,<code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">win32</code>,<code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">mac</code> and <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">linux</code>.</li>
</ul>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
(Note: You are a tmux user, you should add <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">reattach-to-user-namespace</code> before the command <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">cocos</code>. For more information, please refer to <a href="https://github.com/phonegap/ios-sim" style="border: 0px; color: #349fd0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">this link</a> for more information.)</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
You can run <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">cocos run --help</code> for more detail information.</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="run scree" src="http://www.cocos2d-x.org/attachments/download/4003" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<h3 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
For Win32 Users</h3>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
using <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">cmd</code> as your shell: <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">cd cocos2d-x-3.1.1\tools\cocos2d-console\bin</code> or to wherever you have this on your filesystem</div>
<a href="https://www.blogger.com/null" name="Build-And-Run-New-Project" style="background-color: #fafafa; border: 0px; color: #349fd0; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #fafafa; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px;"></span><a href="https://www.blogger.com/null" name="For-Win32-Users" style="background-color: #fafafa; border: 0px; color: #349fd0; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #fafafa; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px;"></span><br />
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
Then execute something like: <code style="background-color: #f7f7f9; border-radius: 3px; border: 1px solid rgb(225, 225, 232); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px 2px; outline: 0px; padding: 0px 5px; vertical-align: baseline;">cocos.py new YourGameTitle -p com.yourcompany.gametitle -l cpp -d C:\YourGameTitle</code></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-1129142441862595902014-12-23T13:25:00.001+01:002014-12-23T13:25:28.073+01:00Using Cocos2d-x with Visual Studio<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 2em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Environmental Requirements</h2>
<ul style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 15px 0px; outline: 0px; padding: 0px 0px 0px 30px; vertical-align: baseline;">
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Windows 8.0/8.1</li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Cocos2d-x v3.0 (<a href="https://github.com/cocos2d/cocos2d-x/" style="border: 0px; color: #349fd0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="cocos2d-x">https://github.com/cocos2d/cocos2d-x/</a>)</li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Visual Studio 2012</li>
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Windows Phone SDK 8.0 <a href="http://dev.windowsphone.com/en-US/downloadsdk" style="border: 0px; color: #349fd0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">http://dev.windowsphone.com/en-US/downloadsdk</a></li>
</ul>
<h2 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 2em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Enable to start develop on Windows phone</h2>
<h3 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
registe to be a windows phone developer</h3>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
visit the MSDN's windows phone link of developer register <a href="http://msdn.microsoft.com/en-us/library/windowsphone/help/jj206719(v=vs.105" style="border: 0px; color: #349fd0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">http://msdn.microsoft.com/en-us/library/windowsphone/help/jj206719(v=vs.105)</a>)<br style="margin: 0px; padding: 0px;" /><img alt="" src="http://www.cocos2d-x.org/attachments/download/4066" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
fill with your windows account and regist Windows phone developer account in steps</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
explanation of the Windows account:your account of Hotmail or SkyDrive or Xbox LIVE</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
the fee of developer account: $19 per year, while students account is free but cannot release applications with fees.</div>
<h2 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 2em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Compile and Run the TestCpp Project</h2>
<ul style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 15px 0px; outline: 0px; padding: 0px 0px 0px 30px; vertical-align: baseline;">
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Download cocos2d-x from our <a href="http://cocos2d-x.org/download" style="border: 0px; color: #349fd0; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">download page</a> and unzip it on your working directory. The structure of the directory should look like as following:</li>
</ul>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" src="http://www.cocos2d-x.org/attachments/download/4063" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<ul style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 15px 0px; outline: 0px; padding: 0px 0px 0px 30px; vertical-align: baseline;">
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Open file "cocos2d-wp8.vc2012.sln" in "build" folder as fllowing:</li>
</ul>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" src="http://www.cocos2d-x.org/attachments/download/4064" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" src="http://www.cocos2d-x.org/attachments/download/4065" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<ul style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 15px 0px; outline: 0px; padding: 0px 0px 0px 30px; vertical-align: baseline;">
<li style="border: 0px; font-style: inherit; font-weight: inherit; line-height: 1.7; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Right click the "cpp-tests" project, and select "Set as StartUp Project", you can select "Emulator" or a "Device" to run project, if you use Device, you need to connect your phone device using usb. <img alt="" src="http://www.cocos2d-x.org/attachments/download/4060" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></li>
</ul>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
then you can compile and run the TestCpp project, here is the screenshot in Emulator:</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" src="http://www.cocos2d-x.org/attachments/download/4067" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<h2 style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 2em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
How to debug in project</h2>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
right click cpp-tests, select "Properties", in "Debug", you can select debug target:</div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" src="http://www.cocos2d-x.org/attachments/download/4061" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
If you select "Managed Only" in "UI Task", it's to debug c# code in cpp-tests. And if you select "Native Only", it's to debug c++ code in cpp-testsComponent. Note that If you select "Native Only" and want to use CCLog function to write log in Output, right click cpp-testsComponent and define "COCOS2D_DEBUG=1" in "Preprocessor Definitions":</div>
<a href="https://www.blogger.com/null" name="Enable-to-start-develop-on-Windows-phone" style="background-color: #fafafa; border: 0px; color: #349fd0; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #fafafa; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px;"></span><a href="https://www.blogger.com/null" name="registe-to-be-a-windows-phone-developer" style="background-color: #fafafa; border: 0px; color: #349fd0; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #fafafa; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px;"></span><a href="https://www.blogger.com/null" name="Compile-and-Run-the-TestCpp-Project" style="background-color: #fafafa; border: 0px; color: #349fd0; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #fafafa; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px;"></span><a href="https://www.blogger.com/null" name="How-to-debug-in-project" style="background-color: #fafafa; border: 0px; color: #349fd0; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></a><span style="background-color: #fafafa; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px;"></span><br />
<div style="background-color: #fafafa; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="" src="http://www.cocos2d-x.org/attachments/download/4062" style="border: none; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 15px 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-9018149292290711022014-12-10T23:58:00.000+01:002014-12-10T23:58:00.730+01:00Using FileZilla Client<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="background: none rgb(255, 255, 255); border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; line-height: 36px; margin: 0px 0px 0.6em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em; text-align: left;">
<span class="mw-headline" id="Introduction"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Introduction</span></span></h2>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">Using of FileZilla is consist of 3 main steps:</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
</div>
<ol style="text-align: left;">
<li><span style="font-family: Arial, Helvetica, sans-serif;">Connect to an FTP server</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Download and upload files</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Use the site manager.</span></li>
</ol>
<br />
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">If you already know how to use an FTP client, you may want to read the more advanced <a href="https://wiki.filezilla-project.org/Using" style="background: none; color: #5a3696; text-decoration: none;" title="Using">usage instructions</a> instead.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">We assume that you already installed and started FileZilla Client (<a href="https://wiki.filezilla-project.org/Client_Installation" style="background: none; color: #5a3696; text-decoration: none;" title="Client Installation">installation instructions</a>).</span></div>
<h2 style="background: none rgb(255, 255, 255); border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; line-height: 36px; margin: 0px 0px 0.6em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Connecting_to_a_server"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Connecting to a server</span></span></h2>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">The first thing to do is connecting to a server.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">This is our (fictional) login data - please use your own data instead if you want to actively follow the tutorial.</span></div>
<pre style="background-color: #f9f9f9; border: 1px solid rgb(221, 221, 221); line-height: 1.1em; padding: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"> Hostname: example.org
Username: john
Password: 7PjU#.J3
</span></pre>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">We will use the quickconnect bar for establishing the connection:</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<a class="image" href="https://wiki.filezilla-project.org/File:Tutorial_Quickconnect.png" style="background: none; color: #5a3696; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Tutorial Quickconnect.png" height="30" src="https://wiki.filezilla-project.org/wiki/images/d/df/Tutorial_Quickconnect.png" style="border: none; margin: 0px; vertical-align: middle;" width="677" /></span></a></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">Enter the hostname into the quickconnect bar's <i>Host:</i> field, the username into the <i>Username:</i> field as well as the password into the <i>Password:</i> field. You may leave the <i>Port:</i> field empty unless your login information specifies a certain port to use. Now click on <i>Quickconnect</i>.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Note:</b> If your login information specifies a protocol like <i>SFTP</i> or <i>FTPS</i>, enter the hostname as follows: <tt><a class="external free" href="sftp://hostname" rel="nofollow" style="background: url(data:image/png; color: #3366bb; padding-right: 13px; text-decoration: none;">sftp://hostname</a></tt> or <tt><a class="external free" href="ftps://hostname" rel="nofollow" style="background: url(data:image/png; color: #3366bb; padding-right: 13px; text-decoration: none;">ftps://hostname</a></tt> respectively.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">FileZilla will now try to connect to the server. If all works well, you will notice that the right "column" switched from <i>Not connected to any server</i> to displaying a list of files and directories.</span></div>
<h2 style="background: none rgb(255, 255, 255); border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; line-height: 36px; margin: 0px 0px 0.6em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Navigating_and_window_layout"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Navigating and window layout</span></span></h2>
<div class="thumb tright" style="background-color: white; clear: right; float: right; line-height: 36px; margin: 0.5em 0px 1.3em 1.4em; width: auto;">
<div class="thumbinner" style="background-color: #f9f9f9; border: 1px solid rgb(204, 204, 204); overflow: hidden; padding: 3px !important; text-align: center; width: 432px;">
<a class="image" href="https://wiki.filezilla-project.org/File:Annotated_main_window_preview.png" style="background: none; color: #5a3696; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="" class="thumbimage" height="271" src="https://wiki.filezilla-project.org/wiki/images/6/67/Annotated_main_window_preview.png" style="border: 1px solid rgb(204, 204, 204); vertical-align: middle;" width="430" /></span></a><div class="thumbcaption" style="border: none; line-height: 1.4em; padding: 3px !important; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Legend: 1. Toolbar, 2. Quick connect bar, 3. Message log, 4. Local pane, 5. Remote pane, 6. Transfer queue (<a href="https://wiki.filezilla-project.org/File:Annotated_main_window.png" style="background: none; color: #5a3696; text-decoration: none;" title="File:Annotated main window.png">Full-size version</a>)</span></div>
</div>
</div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">The next step is to get familiar with FileZilla's window layout.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">Here is a quick introduction: Below the <i>toolbar</i> (1) and <i>quick connect bar</i> (2), the <i>message log</i> (3) displays transfer and connection related messages. Below, you can find the file listings. The left column (<i>local pane</i>, 4) displays the local files and directories, i.e. the stuff on the PC you're using FileZilla on. The right column (<i>server pane</i>, 5) displays the files and directories on the server you are connected to. Both columns have a directory tree at the top and a detailed listing of the currently selected directory's contents at the bottom. You can easily navigate either of the trees and lists by clicking around like in any other file manager. At the bottom of the window, the <i>transfer queue</i> (6) lists the to-be-transferred and already transferred files.</span></div>
<h2 style="background: none rgb(255, 255, 255); border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; line-height: 36px; margin: 0px 0px 0.6em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Transferring_files"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Transferring files</span></span></h2>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">Now we will upload these files (or the ones you choose, respectively):</span></div>
<pre style="background-color: #f9f9f9; border: 1px solid rgb(221, 221, 221); line-height: 1.1em; padding: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"> website/
+- index.html
+- images/
+- image01.jpg
+- image02.jpg
</span></pre>
<h3 style="background: none rgb(255, 255, 255); border-bottom-style: none; line-height: 36px; margin: 0px 0px 0.3em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Uploading"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Uploading</span></span></h3>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">First - in the <i>local pane</i> - bring the directory into view which contains data to be uploaded (e.g. <tt>index.html</tt> and <tt>images/</tt>). Now, navigate to the desired target directory on the server (using the <i>server pane'</i>s file listings). To upload the data, select the respective files/directories and drag them from the <i>local</i> to the <i>remote</i> pane. You will notice that the files will be added to the <i>transfer queue</i> at the bottom of the window and soon thereafter get removed again - since they were (hopefully, if nothing went wrong) just uploaded to the server. The uploaded files and directories should now be displayed in the server content listing at the right side of the window.</span></div>
<div class="center" style="background-color: white; line-height: 36px; text-align: center; width: 5051.25px;">
<div class="thumb tnone" style="background-color: transparent; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; width: auto;">
<div class="thumbinner" style="background-color: #f9f9f9; border: 1px solid rgb(204, 204, 204); margin-left: auto; margin-right: auto; overflow: hidden; padding: 3px !important; width: 547px;">
<a class="image" href="https://wiki.filezilla-project.org/File:Tutorial_Filelists.png" style="background: none; color: #5a3696; margin-left: auto; margin-right: auto; text-decoration: none;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="" class="thumbimage" height="297" src="https://wiki.filezilla-project.org/wiki/images/3/38/Tutorial_Filelists.png" style="border: 1px solid rgb(204, 204, 204); margin-left: auto; margin-right: auto; vertical-align: middle;" width="545" /></span></a><div class="thumbcaption" style="border: none; line-height: 1.4em; margin-left: auto; margin-right: auto; padding: 3px !important; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Local and remote file listings after uploading the example files</span></div>
</div>
</div>
</div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Note:</b> If you don't like using drag-and-drop, you can also right click on files/directories (in the lower local pane) and select <i>Upload</i> to upload them - or simply double-click a file entry (this does not work for directories).</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Note (advanced):</b> If you enable filtering and upload a complete directory, only the not-filtered-out files and directories inside this directory will be transferred.</span></div>
<h3 style="background: none rgb(255, 255, 255); border-bottom-style: none; line-height: 36px; margin: 0px 0px 0.3em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Downloading"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Downloading</span></span></h3>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">Downloading files, or complete directories, works essentially the same way as uploading - you just drag the files/directories from the remote pane to the local pane this time, instead of the other way round.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Note:</b> In case you (accidentally) try to overwrite a file during upload or download, FileZilla will by default display a dialog asking what to do (overwrite, rename, skip...).</span></div>
<h2 style="background: none rgb(255, 255, 255); border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; line-height: 36px; margin: 0px 0px 0.6em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Using_the_site_manager"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Using the site manager</span></span></h2>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">Now that you are confident in transferring files (if not, practice a little bit), you might want to add the server information to the site manager to make it easy to reconnect to this server. To do this, select <i>Copy current connection to Site Manager...</i> in the <i>File</i> menu. The site manager will be opened and a new entry will be created with all the important information already filled in. You will notice that the entry's name is selected and highlighted - you can enter some descriptive name so you will later on find your server again (enter something like <i>domain.com FTP server</i> for example - you can rename it later if you wish). Now close the dialog by clicking on <i>OK</i>.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">The next time you want to connect to this server, you can simply select it in the site manager and click <i>Connect</i>.</span></div>
<h2 style="background: none rgb(255, 255, 255); border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; line-height: 36px; margin: 0px 0px 0.6em; overflow: hidden; padding-bottom: 0.17em; padding-top: 0.5em;">
<span class="mw-headline" id="Conclusion"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Conclusion</span></span></h2>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">You should now be able to use the basic FileZilla features.</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">One final remark: Most tasks can be completed in several ways. The ways chosen for this tutorial are the most clear ones - if you invest a bit of time and just look around or read some of the advanced documentation, you will find much quicker ways to achieve what you want (there are toolbar buttons for often-used commands for example; some also react on right-clicking them).</span></div>
<div style="background-color: white; line-height: 36px; margin-bottom: 0.5em; margin-top: 0.4em;">
<span style="font-family: Arial, Helvetica, sans-serif;">If you feel reasonably confident by now, it might be worthwhile to also read the advanced <a href="https://wiki.filezilla-project.org/Using" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #5a3696; text-decoration: none;" title="Using">usage instructions</a> to learn about additional features not shown in this tutorial.</span></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-45466813710075707782014-05-08T19:26:00.000+02:002014-05-08T19:26:05.897+02:00How to make a Flappy Bird in HTML5 - Part 3<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<section class="post-content" style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px;"><div style="margin-bottom: 1.6em; margin-top: 1.6em;">
<br />
In <a href="http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">part 1</a> we made a simple Flappy Bird clone in HTML5, in <a href="http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-2/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">part 2</a> we improved the game with some animations and sounds. Now it's time to finish our game by adding states: a loading screen, a menu, and the actual game. You can play the new version that we are going to make<a href="http://lessmilk.com/flappy_bird/03/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">here</a>.</div>
<h3 id="thebasicidea" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
The basic idea</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Up until now we only used one state in our game, and now we are going to use three main states like this:</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
<img alt="" src="http://blog.lessmilk.com/content/images/2014/Mar/diag.png" style="border: 0px; display: block; height: auto; margin: 0px auto; max-width: 100%;" /></div>
<ul style="margin: 1.6em 0px;">
<li>Load: a state where we will do all the preloading</li>
<li>Menu: a simple state that tells the user how to start the game</li>
<li>Play: the state that contains the actual game</li>
<li>Game: this is not a state, but it will contain all our states</li>
</ul>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
All of this could be in a single .js file, but to keep things clean we are going to split this in 4 different files.</div>
<h3 id="setup" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Set up</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Download the template for this tutorial <a href="https://github.com/lessmilk/phaser-tutorials/raw/master/4-flappy_bird/flappy_bird_basic.zip" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">here</a>. It contains:</div>
<ul style="margin: 1.6em 0px;">
<li>Our 4 js files: load.js, menu.js, play.js, and game.js</li>
<li>And as usuall: index.html and phaser.min.js</li>
</ul>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
You might notice that all the .js files are empty for now. So let's code them one by one.</div>
<h3 id="loadjs" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
load.js</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
This state is super simple, we will just load all our assets like we did in the<code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">preload()</code> function in the previous tutorial.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> load_state </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
preload</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">stage</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">backgroundColor </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'#71c5cf'</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">load</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">image</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'bird'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'assets/bird.png'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">load</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">image</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'pipe'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'assets/pipe.png'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">load</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">audio</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'jump'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'assets/jump.wav'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
create</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// When all assets are loaded, go to the 'menu' state</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'menu'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">};</span></code></pre>
<h3 id="menujs" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
menu.js</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
For sake of simplicity, we are going to do a super basic menu: a line of text explaining how to start the game, and also display the score if the user has already played the game.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Notice two new things in the code below:</div>
<ul style="margin: 1.6em 0px;">
<li>The <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">score</code> variable is a global variable. That's because we will need to access the player's score in 2 different states (play and menu).</li>
<li>To center the text on the screen I use a combination of <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">game.world.width/2</code> (to get the center of the screen) and <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">anchor.setTo(0.5, 0.5)</code> (to set the x and y coordinates at the center of the text).</li>
</ul>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> menu_state </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
create</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Call the 'start' function when pressing the spacebar</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> space_key </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">input</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">keyboard</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">addKey</span><span class="pun" style="color: white;">(</span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="typ" style="color: palegreen;">Keyboard</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">SPACEBAR</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
space_key</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">onDown</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Defining variables</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> style </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;"> font</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"30px Arial"</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> fill</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"#ffffff"</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">};</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> x </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">world</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">width</span><span class="pun" style="color: white;">/</span><span class="lit" style="color: indianred;">2</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">world</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">height</span><span class="pun" style="color: white;">/</span><span class="lit" style="color: indianred;">2</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Adding a text centered on the screen</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> text </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">text</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">x</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y</span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">50</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"Press space to start"</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> style</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
text</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">anchor</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">setTo</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">0.5</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0.5</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// If the user already played</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">score </span><span class="pun" style="color: white;">></span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Display its score</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> score_label </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">text</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">x</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y</span><span class="pun" style="color: white;">+</span><span class="lit" style="color: indianred;">50</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"score: "</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">+</span><span class="pln" style="color: white;"> score</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> style</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
score_label</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">anchor</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">setTo</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">0.5</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0.5</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Start the actual game</span><span class="pln" style="color: white;">
start</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'play'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">};</span></code></pre>
<h3 id="playjs" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
play.js</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Now let's add the game itself. It's the same code that we made in the last tutorial with just 3-4 small changes. I commented the part that changed below.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> play_state </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// No more 'preload' function, since it is already done in the 'load' state</span><span class="pln" style="color: white;">
create</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> space_key </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">input</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">keyboard</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">addKey</span><span class="pun" style="color: white;">(</span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="typ" style="color: palegreen;">Keyboard</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">SPACEBAR</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
space_key</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">onDown</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">jump</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">group</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">createMultiple</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'pipe'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">timer </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">time</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">events</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">loop</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">1500</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add_row_of_pipes</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">sprite</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">245</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'bird'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">gravity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">y </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1000</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">anchor</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">setTo</span><span class="pun" style="color: white;">(-</span><span class="lit" style="color: indianred;">0.2</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0.5</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// No 'this.score', but just 'score'</span><span class="pln" style="color: white;">
score </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> style </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;"> font</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"30px Arial"</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> fill</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"#ffffff"</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">};</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">label_score </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">text</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"0"</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> style</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">jump_sound </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">audio</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'jump'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
update</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">inWorld </span><span class="pun" style="color: white;">==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">restart_game</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">angle </span><span class="pun" style="color: white;"><</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">angle </span><span class="pun" style="color: white;">+=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">physics</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">overlap</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">hit_pipe</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">null</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
jump</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">alive </span><span class="pun" style="color: white;">==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">return</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">velocity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">y </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">350</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">tween</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">to</span><span class="pun" style="color: white;">({</span><span class="pln" style="color: white;">angle</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">jump_sound</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">play</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
hit_pipe</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">alive </span><span class="pun" style="color: white;">==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">return</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">alive </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">time</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">events</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">remove</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">timer</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">forEachAlive</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">p</span><span class="pun" style="color: white;">){</span><span class="pln" style="color: white;">
p</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">velocity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">x </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
restart_game</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">time</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">events</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">remove</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">timer</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// This time we go back to the 'menu' state</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'menu'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
add_one_pipe</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">x</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> pipe </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">getFirstDead</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
pipe</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">reset</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">x</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
pipe</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">velocity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">x </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">200</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
pipe</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">outOfBoundsKill </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">true</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
add_row_of_pipes</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> hole </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Math</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">floor</span><span class="pun" style="color: white;">(</span><span class="typ" style="color: palegreen;">Math</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">random</span><span class="pun" style="color: white;">()*</span><span class="lit" style="color: indianred;">5</span><span class="pun" style="color: white;">)+</span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">for</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> i </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;"> i </span><span class="pun" style="color: white;"><</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">8</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;"> i</span><span class="pun" style="color: white;">++)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">i </span><span class="pun" style="color: white;">!=</span><span class="pln" style="color: white;"> hole </span><span class="pun" style="color: white;">&&</span><span class="pln" style="color: white;"> i </span><span class="pun" style="color: white;">!=</span><span class="pln" style="color: white;"> hole </span><span class="pun" style="color: white;">+</span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add_one_pipe</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">400</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> i</span><span class="pun" style="color: white;">*</span><span class="lit" style="color: indianred;">60</span><span class="pun" style="color: white;">+</span><span class="lit" style="color: indianred;">10</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// No 'this.score', but just 'score'</span><span class="pln" style="color: white;">
score </span><span class="pun" style="color: white;">+=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">label_score</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">content </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> score</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">};</span></code></pre>
<h3 id="gamejs" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
game.js</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
And the last part: we need to initialize Phaser and define our states.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="com" style="color: skyblue;">// Initialize Phaser</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> game </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">new</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="typ" style="color: palegreen;">Game</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">400</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">490</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">AUTO</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'game_div'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Our 'score' global variable</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> score </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Define all the states</span><span class="pln" style="color: white;">
game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'load'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> load_state</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'menu'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> menu_state</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'play'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> play_state</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Start with the 'load' state</span><span class="pln" style="color: white;">
game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'load'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
And we are done! Save all your files and test the game in your webserver. The game hasn't changed a lot, but it's a lot cleaner and you now know how to use states. If you want you can download the finished code <a href="https://github.com/lessmilk/phaser-tutorials/raw/master/4-flappy_bird/flappy_bird_final.zip" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">here</a>.</div>
<h3 id="whatsnext" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
What's next</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
We are now done with the Flappy Bird tutorials, I hope you enjoyed them!</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
I plan to write other tutorials about game making. But I'm not sure yet what I'll write about (technical, art, game design, etc.) so let me know in the comments what you'd like to read.</div>
</section></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-77615500719840442662014-05-08T19:22:00.002+02:002014-05-08T19:22:57.800+02:00Android Tutorial : Setting up your Java Enviornment<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="crumbs" style="border-bottom-color: rgb(221, 221, 221); border-style: none none solid; border-width: 0px 0px 1px; clear: both; font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px; list-style: none; margin: 0px 0px 10px; outline: none; padding: 0px 0px 5px;" xmlns:v="http://rdf.data-vocabulary.org/#">
<span style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;" typeof="v:Breadcrumb"><a class="crumbs-home" href="http://www.omistic.com/" property="v:title" rel="v:url" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;">Home</a></span> / <span style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;" typeof="v:Breadcrumb"><a href="http://www.omistic.com/category/tutorials/" property="v:title" rel="v:url" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;" title="View all posts in Tutorials">Tutorials</a></span> / <span style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;" typeof="v:Breadcrumb"><a href="http://www.omistic.com/category/tutorials/android-tutorial/" property="v:title" rel="v:url" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;" title="View all posts in Android Tutorial">Android Tutorial</a></span> / <span class="current" style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Android Tutorial Session 1</span></div>
<article class="post-129 post type-post status-publish format-standard has-post-thumbnail hentry category-android-tutorial category-tutorials tag-andorid-tutorial tag-andorid-tutorial-for-beginners tag-java-tutorial tag-java-tutorial-for-beginner tag-learn-android-step-by-step tag-learn-java-step-by-step post-listing" itemprop="review" itemscope="" itemtype="http://schema.org/Review" style="border: 0px none; font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px; list-style: none; margin: 0px 0px 20px; outline: none; padding: 0px;"><div class="single-post-thumb head-lightbox" style="border: 0px none; line-height: 0; list-style: none; margin: 0px; outline: none; padding: 0px;">
<a href="http://www.omistic.com/wp-content/uploads/2014/05/Android-Tutorial-Cover.jpg" rel="prettyPhoto" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; cursor: -webkit-zoom-in; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"><img alt="Android-Tutorial-Cover" class="attachment-slider wp-post-image" height="330" src="http://www.omistic.com/wp-content/uploads/2014/05/Android-Tutorial-Cover-620x330.jpg" style="border: 0px none; height: auto; list-style: none; margin: 0px; outline: none; padding: 0px; width: 2130px;" width="620" /></a></div>
<div class="post-inner" style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 20px 0px;">
<h1 class="name post-title entry-title" itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing" style="border: 0px none; font-family: Oswald, arial, Georgia, serif; font-size: 28px; font-weight: normal; list-style: none; margin: 0px 0px 10px; outline: none; padding: 0px;">
<span style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px; line-height: 1.5;">In this course we are going to learn Android native application development right from the beginning, We have divided this course in two modules. In the first module we’ll cover up Java language and all its features so you know what is going on and how things works when we write Android applications and than in the second module we’ll start our Android programming.</span></h1>
<div class="entry" style="border: 0px none; line-height: 1.5; list-style: none; margin: 0px; outline: none; padding: 0px;">
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em; text-align: center;">
<span style="border: 0px none; color: #339966; list-style: none; margin: 0px; outline: none; padding: 0px;"><i style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">So, fasten your seat belts and let’s get started!!</i></span></div>
<h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">
<b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 1 Downloading JDK:</b></h3>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
First of all you’ve to install the JDK SE (Java Development Kit Standard Edition) in your system.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
Click <span style="border: 0px none; color: #333399; list-style: none; margin: 0px; outline: none; padding: 0px;"><a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"><span style="border: 0px none; color: #333399; list-style: none; margin: 0px; outline: none; padding: 0px;">Here</span></a> </span>and download the JDK 8.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em;">
<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"><img alt="Java SE development kit image" class="aligncenter" height="385" src="https://lh5.googleusercontent.com/wDT3x9UTIfJSHJxOZnvrN5NnxGhaxtsTNIfuekLPrS04g7fMJGZi9LMjSYTA2TPWMHJhrTtZu_UqHXUTshMNNWL91jK_SDe8DPe1_i8P4U0GxvwN_5SaJ3TdTSaESIyQCg" style="border: 1px solid rgb(203, 205, 204); clear: both; display: block; height: auto; list-style: none; margin: 2px auto; max-width: 100%; outline: none; padding: 4px;" width="579" /></a></div>
<address style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center;">
This is the area we are looking for</address>
<address style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center;">
Now accept license agreement and download the version as per your OS</address>
<address style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center;">
</address>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
This is a good practise and would be helpful to download the API documentation for that JDK version.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
You can download API docs for JDK 8 <span style="border: 0px none; color: #333399; list-style: none; margin: 0px; outline: none; padding: 0px;"><a href="http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"><span style="border: 0px none; color: #333399; list-style: none; margin: 0px; outline: none; padding: 0px;">Here</span></a></span>.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em;">
<a href="http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"><img alt="Java SE 8 API Docs Image" class="aligncenter" height="209" src="https://lh6.googleusercontent.com/wMI1AxHgh0jVtO6z11EI5N9tMaQ7hPgRUddZKw8_BQQTL6lqlDcOl-1ms-8hmAPr5ajBnhGPZ7ixFWNeg9Xn6wuVpmdNyHmqIBBKFY54dpqn2mtVecXJWi2xLbuJiO11Bg" style="border: 1px solid rgb(203, 205, 204); clear: both; display: block; height: auto; list-style: none; margin: 2px auto; max-width: 100%; outline: none; padding: 4px;" width="573" /></a></div>
<address style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center;">
This is the area we are looking for</address>
<address style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: center;">
Now accept license agreement and download the API Documentation</address>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em;">
<br /></div>
<h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">
<b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 2 Installing JDK:</b></h3>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
Install JDK as simple as we usually install all our softwares but keep that in mind the path you choose to install JDK would not be the default Program Files path this time but to avoid some JDK path issues in the future we’ll install JDK in our main C directory.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
What you have to do is Goto <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">C:\</b> > make a folder named <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Java </b>and install your JDK in Java folder.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
</div>
<h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">
<b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 3 Set Environment Variables:</b></h3>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
<span style="border: 0px none; color: red; list-style: none; margin: 0px; outline: none; padding: 0px;">Now concentrate on these steps.</span></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
As JDK is installed in our system></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
Now goto the <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Control Panel </b>></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
open <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">System </b>icon ></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
than goto the <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Advance System Settings</b> on the top-left ></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
click on the <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Advanced</b> tab ></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
click the <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Environment Variables</b> button on the bottom right ></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
goto the <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">System Variables</b> area and click <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">New</b> ></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
New System Variable window popups ></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
set <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Variable name</b> as <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">JAVA_HOME </b>and <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Variable value</b> would be JDK installed path for me its <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">C:\Java </b>></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
now find out the existing <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">path</b> variable in <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">System variables </b>></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
click <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">path</b> variable and then click <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">edit</b> and add your java <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">bin folder</b> path in the existing <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Variable value</b> like this <b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">;C:\Java\bin </b>></div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
Click Ok in all the open windows and you’re done.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
</div>
<h3 style="border: 0px none; font-family: Helvetica; font-size: 24px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: none; padding: 0px;">
<b style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">Step 4 Download and Install IDE:</b></h3>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
In this course the IDE we recommend you to use is <i style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">JetBrains IntelliJ IDEA </i>for development.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
You can download <i style="border: 0px none; list-style: none; margin: 0px; outline: none; padding: 0px;">IntelliJ IDEA</i> from the official site as your desired OS <span style="border: 0px none; color: #333399; list-style: none; margin: 0px; outline: none; padding: 0px;"><a href="http://www.jetbrains.com/idea/download/" style="-webkit-transition: all 0.2s ease-in-out; border: 0px none; color: rgb(0, 51, 153) !important; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out;"><span style="border: 0px none; color: #333399; list-style: none; margin: 0px; outline: none; padding: 0px;">Here</span></a></span>.</div>
<div style="border: 0px none; list-style: none; outline: none; padding: 0px 0px 1em 30px;">
</div>
</div>
</div>
</article></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-24462005304109927462014-05-04T08:42:00.000+02:002014-05-04T08:42:07.116+02:00How to Increase App Reviews and Ratings<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="entry-header" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -0.02em; line-height: 1.2; margin: 0px 35px 10px; padding: 0px;">
</h3>
<div class="entry-content" style="background-color: white; clear: both; color: #222222; font-family: arial, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 35px; overflow: hidden; padding: 0px 0px 10px; position: static;">
<div class="entry-body" style="clear: both;">
<div style="margin-bottom: 10px;">
App reviews provide valuable customer feedback, influence people to download, and even impact rankings in app stores, like Google Play. However, most people aren’t likely to leave a review. If they do there’s a good chance they’re pissed about a bug or missing feature.</div>
<div style="margin-bottom: 10px;">
So how do you get more reviews and higher ratings for your app?</div>
<div style="margin-bottom: 10px;">
My team and I tackled this problem for our Kodak Gallery Android app. Here’s how we went about it. What we learned will surprise you.</div>
<h2 style="font-size: 14px; margin-bottom: 5px; margin-top: 10px; text-align: center;">
<strong>BACKGROUND</strong></h2>
<div style="margin-bottom: 10px;">
Our motivation for tackling this was two-pronged:</div>
<div style="margin-bottom: 10px;">
<strong> 1. We had low ratings in the Android Market / Google Play</strong>. We had quietly released an alpha version of the app for testing purposes. It crashed a lot and got low ratings from people that stumbled across it in the market. When we released v1.0 the reviews were good; however, ratings don’t reset in with each upgrade in Google Play so we were stuck with a low “lifetime rating” (~3.0 out of 5.0).</div>
<div style="margin-bottom: 10px;">
<strong> 2. Our Google Play ranking wasn’t as high as we thought it should be.</strong> We were stuck around #50 in the free photo category rankings despite some healthy download numbers. Like with Google search results, Google Play rankings are a black box but supposedly the number and quality of reviews is part of the ranking algorithm.</div>
<div style="margin-bottom: 10px;">
We felt if we had more reviews and better ratings our app would be more attractive to prospective users and do better in the market rankings. </div>
<h2 style="font-size: 14px; margin-bottom: 5px; margin-top: 10px; text-align: center;">
<strong>THE TEST</strong></h2>
<div style="margin-bottom: 10px;">
The initial plan was to simply add a "rate this app" prompt in the app. This is a common tactic employed by lots of apps, but we wanted to see if it actually worked.</div>
<div style="margin-bottom: 10px;">
However, we were concerned we would get more reviews but they might not be very good. Ron, our newly crowned ratings guru, had the idea to test another version where we only prompted people to rate the app in teh market if we knew really the app.</div>
<div style="margin-bottom: 10px;">
Here's what our 3 test cells looked like:</div>
<div style="margin-bottom: 10px;">
1. <strong>Default. </strong>No user prompts to rate the app</div>
<div style="margin-bottom: 10px;">
2. <strong>Market Prompt Only</strong>. Users see a prompt asking them to rate the app in the Google Play market.</div>
<div style="margin-bottom: 10px;">
3. <strong>Local Prompt</strong>. Before asking users to go the market to rate the app we present a local prompt to rate the app. If the user selects "Love it!" or "Like it" they get the market prompt. People selecting "Not crazy about it", "Hate it", or Cancel don't get the market prompt.</div>
<div style="margin-bottom: 10px;">
<strong>Local Prompt Market Prompt</strong></div>
<div style="margin-bottom: 10px;">
<a class="asset-img-link" href="http://conversationalmarketer.typepad.com/.a/6a00e553a0b9878833016765770840970b-pi" style="color: #005599;"><img alt="Local Review Prompt" class="asset asset-image at-xid-6a00e553a0b9878833016765770840970b" src="http://conversationalmarketer.typepad.com/.a/6a00e553a0b9878833016765770840970b-250wi" style="border: 0px; float: left; width: 250px;" title="Local Review Prompt" /></a><a class="asset-img-link" href="http://conversationalmarketer.typepad.com/.a/6a00e553a0b987883301676577085b970b-pi" style="color: #005599;"><img alt="Local Review Prompt" class="asset asset-image at-xid-6a00e553a0b987883301676577085b970b" src="http://conversationalmarketer.typepad.com/.a/6a00e553a0b987883301676577085b970b-250wi" style="border: 0px; display: block; margin-left: auto; margin-right: auto; width: 250px;" title="Local Review Prompt" /></a></div>
<div style="margin-bottom: 10px;">
We rotated the test cells every day. Day 1 was default, Day 2 local prompt, Day 3 market prompt, and then repeat. We cycled this for 3 weeks to normalize for any influence the day of the week might have on people's responses.</div>
<div style="margin-bottom: 10px;">
Once people received the local or market prompts they did not see them again. "Later" on the market prompt in this case meant a future date that we hadn't determined. Like an afterschool special, no meant no.</div>
<h2 style="font-size: 14px; margin-bottom: 5px; margin-top: 10px; text-align: center;">
<strong>RESULTS</strong></h2>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
We measure the results based on two success metrics:</div>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
1. Number of reviews per thousand visitors (RPMV). This eliminated the the impact the number of visitors had on reviews since more visitors = more prompts.</div>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
2. Average rating. Google Play ratings are based a 1-5 star rating.</div>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
Here are the cumulative results for the 3-week test that ran in April.</div>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
<strong>Number of Reviews</strong></div>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
<strong><a class="asset-img-link" href="http://conversationalmarketer.typepad.com/.a/6a00e553a0b9878833016765a7105b970b-popup" style="color: #005599;"><img alt="KG Reviews per Thousdand Visitors & Ratings" border="0" class="asset asset-image at-xid-6a00e553a0b9878833016765a7105b970b image-full" src="http://conversationalmarketer.typepad.com/.a/6a00e553a0b9878833016765a7105b970b-800wi" style="border: 0px; box-sizing: border-box; display: block; margin-left: auto; margin-right: auto; width: 550px;" title="KG Reviews per Thousdand Visitors & Ratings" /></a></strong></div>
<div style="margin-bottom: 10px; text-align: -webkit-auto;">
<strong><br /></strong></div>
<ul style="list-style-image: none; list-style-position: outside; margin: 0px 0px 10px 25px;"></ul>
<div style="margin-bottom: 10px;">
<strong>Winner</strong>: Local Prompt Screener</div>
<div style="margin-bottom: 10px;">
This was a landslide. The local prompt had 56% more reviews than the market only prompt while the average ratings were the same at 4.5. In each test cycle the local prompt had 17%-90% more reviews per visitor than the market only prompt so the results weren't affected by a big day.</div>
<div style="margin-bottom: 10px;">
An interesting sidenote is that the 14 days we ran the local and market prompt accounted for just under 30% of total reviews and increased the average overall rating from around 3.8 to 4.3.</div>
<div style="margin-bottom: 10px;">
<strong>Rankings Impact</strong></div>
<div style="margin-bottom: 10px;">
The ranking in the free photo category jumped from the low 50's to the low to mid 40's.</div>
<h2 style="font-size: 14px; margin-bottom: 5px; margin-top: 10px; text-align: center;">
<strong>THOUGHTS</strong></h2>
<div style="margin-bottom: 10px;">
If you're like us, these results are somewhat surprising.</div>
<div style="margin-bottom: 10px;">
We predicted that the <strong>Market Only</strong> prompt would drive the most reviews while the <strong>Local Screener</strong> would have fewer reviews but a higher average rating because we were filtering for people that really liked the app and making them go through more steps, which usually leads to lower conversion.</div>
<div style="margin-bottom: 10px;">
As you can see above, the local prompt had significantly more reviews. Why could this be?</div>
<div style="margin-bottom: 10px;">
1. <strong>People were invested</strong>. The local prompt was a super easy way to participate and once people did they had some stake in the game. When we then prompted them to rate the app in the market we were asking them to do the same thing they just did, but in a different place.</div>
<div style="margin-bottom: 10px;">
2. <strong>People really like the app</strong>. It turns out people really liked the app and we weren't filtering as many people as we expected. While 52% of people chose Cance", 94% of those that did rate the app locally said they "Love it" or "Like it".</div>
<div style="margin-bottom: 10px;">
The ~10 spot jump in the app rankings indicates the better reviews had an impact on the rankings but there could be other factors as well, like photo sharing seasonality. While it's hard to say if the increase reviews and higher rating affected the ranking algorithm we did move up and that was one of our goals so that makes us feel warm and fuzzy.</div>
</div>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-82450243309974861182014-05-04T08:39:00.000+02:002014-05-04T08:39:55.252+02:00Tips To Increase App Rating<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 3em; letter-spacing: -1px; line-height: 1.15em; margin: 0px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
</h1>
<div class="sContent intxt" style="background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; margin: 10px 0px 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
So you’ve just <a href="http://www.hongkiat.com/blog/ios-development-guide-part1/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">built an iOS app</a> or maybe <a href="http://www.hongkiat.com/blog/building-android-apps/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">an Android one</a>. You’re really proud of your design, the app works on every device you tested and there seems to be no competition in your niche. After publishing it, you go ahead and share it on your Facebook Profile page. You feel you’re onto a winner!</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img alt="mobile app development" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/mobile-app-development.jpg" height="300" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="600" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Next day you’re eager to check out how many people have downloaded it. "12 downloads" and not a single review. Hm… something must be wrong! So you start to really promote it now. You spam your friends constantly with Twitter and Facebook updates. A month later, you’re still below 500 downloads. What are you doing wrong?</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Here are a few tricks I’ve learned that will help your download numbers grow (while also keeping your Facebook friends from reporting you).</div>
<div class="recommended_top" style="background-color: #f9f9f9; border-left-color: rgb(191, 202, 218); border-left-style: solid; border-width: 0px 0px 0px 8px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 10px; vertical-align: baseline;">
<strong>Recommended Reading:</strong> <a href="http://www.hongkiat.com/blog/build-websites-apps-jquery-mobile/%E2%80%8E" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile</a></div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
1. Great Translated Descriptions</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Make sure you have a nice, long description for your app to put it up the market place. This is for your clients and for your app’s ranking. You need to invest the time and do this right.</div>
<h4 style="border: 0px; color: #252525; font-size: 1.8em; font-style: inherit; line-height: 1.25em; margin: 35px 0px 0px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
Language</h4>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Where possible, your description should be localized in most common languages such as Chinese, Korean, Spanish or French. Google Play has a nice feature (which won’t be available with the new Developer Console update, so hurry up) which will let you do the translation automatically using Google Translate. However, some translations do come up weird, so make sure you double check Google’s work.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
For the App Store, you could do it yourself or look into human translation; it’s worth the money, or just use the browser-version of Google Translate.</div>
<h4 style="border: 0px; color: #252525; font-size: 1.8em; font-style: inherit; line-height: 1.25em; margin: 35px 0px 0px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
Keywords</h4>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Your description should contain certain keywords you’re targeting with your app. Say you have a camera app named “Funky Camera Tricks”. Use the word ‘camera’ 3-6 times in your app description, (while keeping it relevant) and also use the words ‘tricks’ and ‘funky’ a few times.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Go on the normal <a href="https://adwords.google.com/o/KeywordTool" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Adwords Keyword Tool</a> and search for lateral keywords to use as well. Using lateral keywords (the ones suggested by Google after you’ve done your main search) will improve your app’s chance to get into the search results for those main keywords. You want to create a<strong>Goldilocks description: </strong>not too much keyword usage, not too long or too short. Keep it balanced.</div>
<h4 style="border: 0px; color: #252525; font-size: 1.8em; font-style: inherit; line-height: 1.25em; margin: 35px 0px 0px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
Declare Required Permissions</h4>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Don’t forget to talk about any permission your app is requesting upon installing. The user will see them anyway so it’s better to be honest from the start. List all your app’s features, while also being transparent about any monetization modals you have in place.</div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
2. Make A Video</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Making a video for your app is a must. If you’re going down this road, I would advise you to hire a professional agency, or a video editing (<a href="http://www.hongkiat.com/blog/out/freelancer" rel="nofollow" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">freelance</a>) plus a voice talent. There are even mobile specific video editors, like the guys at <a href="http://www.apptamin.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">Apptamin</a>, who specialize in app videos.</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/apptamin-video-marketing-for-your-app.jpg" height="379" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
If you are going to invest in a video, make sure it <strong>has subtitles for the local language</strong>. If you have the money, <strong>have it translated</strong> into the most common languages. It will do wonders to your download rate.</div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
3. CPI Burst Campaigns</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Most of the traffic from searches on both Google Play and the App Store will go only as far as the 50th app in the list.<strong> </strong>Naturally, developers strive to make their app reach the highest spot. One tactic is by making use of a CPI (Cost-Per-Install) Campaign via different advertisers.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
You’ll pay a certain amount of money for each install. The idea is not to make a positive return on your money, but to propel yourself in the list of Top 50 apps in your niche. If you reach that spot, the effects will last long enough for you to get your money’s worth.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
This is best used while you are <strong>already riding a high wave of downloads</strong>. Compounding that with a well thought-out CPI Burst Campaign can make your app into a winner.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
There are tons of ad networks offering CPI Campaigns. You could look into <a href="https://www.tapjoy.com/" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Tapjoy</a>, <a href="http://www.leadbolt.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">Leadbolt</a> or even specialized app discovery services such as <a href="http://www.magicsolver.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">MagicSolver</a> who are offering this service.</div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
4. Limited Discounts</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
You can offer your app for free or at half price for a period of time. Couple that with the beforementioned CPI campaign and a medium-sized user base already in place, and the effects can be mind-blowing. There are also apps which can help promote your discounted app, similar to the way daily deal sites work. <a href="http://appgratis.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">AppGratis</a> is one of them.</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/appgratis.jpg" height="373" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
So is <a href="http://www.appturbo.it/index.html" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">AppTurbo</a>.</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/appturbo-marketing-mobile-platform.jpg" height="390" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
5. Get The Word Out</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
There are some services out which can handle press release distribution for you such as <a href="http://www.prweb.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">PRWeb</a> or<a href="http://www.marketwire.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">MarketWired</a>. Just write your press release and send if out. There are even mobile specific agencies such as <a href="http://www.appshout.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">AppShout</a> which can help you contact a massive number of blogs and publications.</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/appshout-marketing-campaigns.jpg" height="279" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Even if you use these services, I would advise you to <strong>personally contact medium-sized blogs </strong>for reviews. Usually these guys are eager to see new apps, and because they aren’t that big, you won’t become yesterday’s news too fast. That will mean more traffic.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Once you get a decent-sized publication to write about you, contact every other smaller blog, referring to the first article on the medium-sized blog. They’ll be more than happy to write about you. <strong>Give a personal, unique story to each</strong>. Don’t just repeat your press release. Nobody likes double content, and I presume Google doesn’t as well.</div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
6. Keep Your Eyes On The User</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Having analytics is a must. You’ll want to keep your active device numbers as high as possible. That’s the key to continuous downloads. A good app analytics should offer multi-app options, give you the ability to compare between them, let you see the user’s behaviors, from download until app deletion. You’ll also want to set up key trigger points inside the app in order to run A/B testing.</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Here are some tools to choose from:</div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<a href="http://www.flurry.com/flurry-analytics.html" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><strong>Flurry Analytics.</strong></a> Flurry boasts some big clients, from EA to Yahoo! to Groupon. Flurry recently celebrated 5 years of their Analytics service.</div>
<div class="s450-550" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/flurry-app-analytics.jpg" height="411" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<a href="http://www.hongkiat.com/blog/google-universal-analytics/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><strong>Google’s Universal Analytics</strong></a>. The most used analytics on the planet, <a href="http://www.hongkiat.com/blog/google-universal-analytics/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">Google’s Analytics</a> just received a major update, and now offers mobile support.</div>
<div class="s450-550" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/Google-Analytics-Universal-Analytics.jpg" height="228" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="400" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<a href="http://count.ly/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><strong>Countly</strong></a><strong>. </strong>Countly offers real-time analytics for your app. They offer great support, and even run an old-fashioned IRC channel: #countly on irc.freenode.net.</div>
<div class="s450-550" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/countly-app-analytics.jpg" height="385" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<a href="http://www.localytics.com/app-analytics/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank"><strong>Localytics</strong></a>. Localytics offers 3 pricing plans, one is free.</div>
<div class="s450-550" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/localytics.jpg" height="438" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /><strong> </strong></div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
7. Use A Cover Image For Google Play</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
So many Android developers forget to do the simplest things, such as creating a cover image for their app. Don’t make the same mistake. A cover image can really boost user downloads.<strong> Make it unique, and don’t use the same picture from the screenshot</strong>. If you do use the same picture, at least take the time to resize it so it won’t look weird. You want users to trust you, before they will be willing to download your app.</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/google-play-cover-image-.jpg" height="199" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Example of a cover image for a Christmas App</div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
8. Professional Real-Life Screenshots</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
Your app’s screenshots should be as <strong>crisp, clean and professional</strong> as (humanly) possible. If you can, take some high-res pictures of a real person using your app on their phone/tablet. Show a child in your shot using the app if your app is for young kids. Replace it with a business owner, if it is a business app. <strong>Make sure the app can be clearly seen.</strong></div>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
The point of the screenshot is for the user to see the app in action. Have at least 3 screenshots, preferably 6. Each screenshot should contain a different instance of the app.</div>
<div class="sw" style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
<img border="0" src="http://media02.hongkiat.com/tips-to-increase-app-downloads/kid-playing-on-a-tablet.jpg" height="334" style="border: 0px; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="500" /></div>
<h3 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: inherit; font-weight: normal; line-height: 1.25em; margin: 35px 0px 10px; padding: 0px; text-transform: capitalize; vertical-align: baseline;">
Conclusion</h3>
<div style="border: 0px; font-family: inherit; font-size: 1.15em; font-style: inherit; font-weight: inherit; line-height: 1.65em; margin-bottom: 1.8em; margin-top: 0.55em; padding: 0px; vertical-align: baseline;">
So there you have it. These 8 points helped me grow my app business to more than 7 million downloads on our entire portfolio in under a year. Lastly, I couldn’t have done it without my associates, so one last thing – make sure you have <strong>a great team</strong> working with you. Some of the tips above are pretty hard to implement, so you need to have talented, dedicated people around you.</div>
</div>
<br /></div>
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5200260903974154949.post-12515751211585485292014-05-03T17:05:00.001+02:002014-05-03T17:05:06.696+02:00Difference Between 2G, 3G and 4G<div dir="ltr" style="text-align: left;" trbidi="on">
People who want to know the difference between 2G , 3G and 4G see the following image:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5RmBStQduh3dawucDMx-UKXo7eZqWA72bem8_MgMovfAMORcPVC6UNMOlKsw0NMRyObQrkSDG0Jsa7CQM5WySdjw2zibxet8LCHBXqPYQzp-VTpoydCXEmn-CkrjXvMZHLVwUd-5aD8I/s1600/10157296_10202176324871742_8507179820804638137_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5RmBStQduh3dawucDMx-UKXo7eZqWA72bem8_MgMovfAMORcPVC6UNMOlKsw0NMRyObQrkSDG0Jsa7CQM5WySdjw2zibxet8LCHBXqPYQzp-VTpoydCXEmn-CkrjXvMZHLVwUd-5aD8I/s1600/10157296_10202176324871742_8507179820804638137_n.jpg" height="480" width="640" /></a></div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-74023821782794068022014-05-03T16:21:00.000+02:002014-05-03T16:21:00.566+02:00Why do you need to set environment variable - JAVA?<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #777777; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 25.600000381469727px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
JAVA_HOME is defined as the environment variable explicitly by the systems engineers majorly for the below reasons. Note that java.home is always there inside JVM, whereas JAVA_HOME exists mainly in your shell environment and you may pass it to JVM as a system property.</div>
<ol style="background-color: white; border: 0px; box-sizing: border-box; color: #777777; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 25.600000381469727px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.5em 3em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 16px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">First and foremost reason is to ensure that your Java programs pick the right Java.exe.</strong> On Systems (Windows/Linux/Solaris), java.exe is duplicated in several places, for instance %JAVA_HOME%binjava.exe, $JAVA_HOMEjrebinjava.exe, and %SystemRoot%system32java.exe. Without having $JAVA_HOME/bin at the beginning of the PATH, a java command will always resolve to %SystemRoot%system32java.exe, which may not be what you want.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 16px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">When you have multiple versions of Java installed and want to specify one them as default</strong>. On systems where you have both complete JDK as well as JRE installed, using JAVA_HOME you can specify where the JDK/JRE is installed.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 16px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 16px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Where built-in system property java.home is not sufficient</strong> in cases like some Java application runtime needs to use tools/libraries only available in JDK. For example, web containers need tools.jar in JDK to compile JSP pages, and ejb containers also need to invoke javac/rmic tools in JDK.</li>
</ol>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-53884942918410229212014-05-03T16:19:00.002+02:002014-05-03T16:21:31.104+02:00Top Mistake JAVA Developers do<div dir="ltr" style="text-align: left;" trbidi="on">
In my last tutorial for Java someone pointed out the mistake so I decided to come up with this post so we all can avoid common mistakes we do while developing java project.<br />
<div>
<br /></div>
<div>
<h2 style="text-align: left;">
<b>1) Project Name and Class Name are not same:</b></h2>
Many programmers including me when I was writing my first project I did this mistake. I made a project with totally different name and made a class name with totally different name as I was using notepad instead of using any IDE for developing my project which would take care of this silly mistake.</div>
<div>
Rest of the error I just find out on google i am pasting them here so you can also avoid them .</div>
<div>
<h2 style="text-align: left;">
2. Null pointers!</h2>
Null pointers are one of the most common errors that Java programmers make. Compilers can't check this one for you - it will only surface at runtime, and if you don't discover it, your users certainly will.<br />
When an attempt to access an object is made, and the reference to that object is null, a NullPointerException will be thrown. The cause of null pointers can be varied, but generally it means that either you haven't initialized an object, or you haven't checked the return value of a function.<br />
Many functions return null to indicate an error condition - but unless you check your return values, you'll never know what's happening. Since the cause is an error condition, normal testing may not pick it up - which means that your users will end up discovering the problem for you. If the API function indicates that null may be returned, be sure to check this before using the object reference!<br />
Another cause is where your initialization has been sloppy, or where it is conditional. For example, examine the following code, and see if you can spot the problem.<br />
<pre>public static void main(String args[])
{
// Accept up to 3 parameters
String[] list = new String[3];
int index = 0;
while ( (index < args.length) && ( index < 3 ) )
{
list[index++] = args[index];
}
// Check all the parameters
for (int i = 0; i < list.length; i++)
{
if (list[i].equals "-help")
{
// .........
}
else
if (list[i].equals "-cp")
{
// .........
}
// else .....
}
}</pre>
This code (while a contrived example), shows a common mistake. Under some circumstances, where the user enters three or more parameters, the code will run fine. If no parameters are entered, you'll get a NullPointerException at runtime. Sometimes your variables (the array of strings) will be initialized, and other times they won't. One easy solution is to check BEFORE you attempt to access a variable in an array that it is not equal to null.<br />
<br />
<h3>
3. Capitalization errors</h3>
This is one of the most frequent errors that we all make. It's so simple to do, and sometimes one can look at an uncapitalized variable or method and still not spot the problem. I myself have often been puzzled by these errors, because I recognize that the method or variable does exist, but don't spot the lack of capitalization.<br />
While there's no silver bullet for detecting this error, you can easily train yourself to make less of them. There's a very simple trick you can learn :-<br />
<ul>
<li>all methods and member variables in the Java API begin with lowercase letters</li>
<li>all methods and member variables use capitalization where a new word begins e.g - getDoubleValue()</li>
</ul>
If you use this pattern for all of your member variables and classes, and then make a conscious effort to get it right, you can gradually reduce the number of mistakes you'll make. It may take a while, but it can save some serious head scratching in the future.<br />
<br />
<h3>
4. Preventing concurrent access to shared variables by threads</h3>
When writing multi-threaded applications, many programmers (myself included) often cut corners, and leave their applications and applets vulnerable to thread conflicts. When two or more threads access the same data concurrently, there exists the possibility (and Murphy's law holding, the probability) that two threads will access or modify the same data at the same time. Don't be fooled into thinking that such problems won't occur on single-threaded processors. While accessing some data (performing a read), your thread may be suspended, and another thread scheduled. It writes its data, which is then overwritten when the first thread makes its changes.<br />
Such problems are not just limited to multi-threaded applications or applets. If you write Java APIs, or JavaBeans, then your code may not be thread-safe. Even if you never write a single application that uses threads, people that use your code WILL. For the sanity of others, if not yourself, you should always take precautions to prevent concurrent access to shared data.<br />
How can this problem be solved? The simplest method is to make your variables private (but you do that already, right?) and to use synchronized accessor methods. Accessor methods allow access to private member variables, but in a controlled manner. Take the following accessor methods, which provide a safe way to change the value of a counter.<br />
<pre>public class MyCounter
{
private int count = 0; // count starts at zero
public synchronized void setCount(int amount)
{
count = amount;
}
public synchronized int getCount()
{
return count;
}
}</pre>
<pre></pre>
<pre></pre>
<pre><h3 style="font-family: 'Times New Roman'; white-space: normal;">
5. Forgetting that Java is zero-indexed</h3>
<div style="font-family: 'Times New Roman'; white-space: normal;">
If you've come from a C/C++ background, you may not find this quite as much a problem as those who have used other languages. In Java, arrays are zero-indexed, meaning that the first element's index is actually 0. Confused? Let's look at a quick example.</div>
<pre>// Create an array of three strings
String[] strArray = new String[3];
// First element's index is actually 0
strArray[0] = "First string";
// Second element's index is actually 1
strArray[1] = "Second string";
// Final element's index is actually 2
strArray[2] = "Third and final string";</pre>
<div style="font-family: 'Times New Roman'; white-space: normal;">
In this example, we have an array of three strings, but to access elements of the array we actually subtract one. Now, if we were to try and access strArray[3], we'd be accessing the fourth element. This will case an ArrayOutOfBoundsException to be thrown - the most obvious sign of forgetting the zero-indexing rule.</div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
Other areas where zero-indexing can get you into trouble is with strings. Suppose you wanted to get a character at a particular offset within a string. Using the String.charAt(int) function you can look this information up - but under Java, the String class is also zero-indexed. That means than the first character is at offset 0, and second at offset 1. You can run into some very frustrating problems unless you are aware of this - particularly if you write applications with heavy string processing. You can be working on the wrong character, and also throw exceptions at run-time. Just like the ArrayOutOfBoundsException, there is a string equivalent. Accessing beyond the bounds of a String will cause a StringIndexOutOfBoundsException to be thrown, as demonstrated by this example.</div>
<pre>public class StrDemo
{
public static void main (String args[])
{
String abc = "abc";
System.out.println ("Char at offset 0 : " + abc.charAt(0) );
System.out.println ("Char at offset 1 : " + abc.charAt(1) );
System.out.println ("Char at offset 2 : " + abc.charAt(2) );
// This line should throw a StringIndexOutOfBoundsException
System.out.println ("Char at offset 3 : " + abc.charAt(3) );
}
}</pre>
<div style="font-family: 'Times New Roman'; white-space: normal;">
Note too, that zero-indexing doesn't just apply to arrays, or to Strings. Other parts of Java are also indexed, but not always consistently. The java.util.Date, and java.util.Calendar classes start their months with 0, but days start normally with 1. This problem is demonstrated by the following application.</div>
<pre>import java.util.Date;
import java.util.Calendar;
public class ZeroIndexedDate
{
public static void main (String args[])
{
// Get today's date
Date today = new Date();
// Print return value of getMonth
System.out.println ("Date.getMonth() returns : " +
today.getMonth());
// Get today's date using a Calendar
Calendar rightNow = Calendar.getInstance();
// Print return value of get ( Calendar.MONTH )
System.out.println ("Calendar.get (month) returns : " +
rightNow.get ( Calendar.MONTH ));</pre>
<pre> }
}</pre>
<div style="font-family: 'Times New Roman'; white-space: normal;">
Zero-indexing is only a problem if you don't realize that its occurring. If you think you're running into a problem, always consult your API documentation.</div>
</pre>
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-39002610375468349062014-05-02T17:11:00.001+02:002014-05-02T17:11:26.411+02:00Tutorial #1: Using HTML5 to develop FLAPPY BIRD (PHASER)<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<section class="post-content" style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px;"><div style="margin-bottom: 1.6em; margin-top: 1.6em;">
I found this article on another blog and I found it very interesting as I implemented the code step by step. So now I want to share my experience with you. Since I started a lot of people have asked me to write about how to make games. In this post we will see how to make a Flappy Bird in HTML5.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
<img alt="" src="http://blog.lessmilk.com/content/images/2014/Feb/FB-1.png" style="border: 0px; display: block; height: auto; margin: 0px auto; max-width: 100%;" /></div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Flappy Bird is a nice little game with easy to understand mechanics, and I thought it would be a perfect fit for an HTML5 game tutorial. So in this tutorial we are going to make a simplified version of Flappy Bird, in only few lines of Javascript with the Phaser framework.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
<a href="http://lessmilk.com/flappy_bird/01/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">Click here</a> to test the game we are going to build.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Note 1: you need to know some Javascript in order to understand this tutorial.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Note 2: If you want to learn more about the Phaser framework and how to set up your environment, you should read my short <a href="http://blog.lessmilk.com/make-html5-games-with-phaser-1/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">getting started tutorial</a> first.</div>
<h3 id="setup" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Setting Up</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
You should download <a href="https://github.com/lessmilk/phaser-tutorials/blob/master/2-flappy_bird/basic_template.zip?raw=true" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">this basic template</a> that I made for this tutorial. In it you will find:</div>
<ul style="margin: 1.6em 0px;">
<li>phaser.min.js, the minified Phaser framework v1.1.5.</li>
<li>index.html, where the game will be displayed.</li>
<li>main.js, a file where we will write all the code.</li>
<li>assets/, a directory with 2 images (bird.png and pipe.png).</li>
</ul>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Put all of these files on your webserver. Open the index.html file in your browser, and open the main.js file in your text editor.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
In the main.js file you should see the basic structure of a Phaser project that we discussed in the previous tutorial.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="com" style="color: skyblue;">// Initialize Phaser, and creates a 400x490px game</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> game </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">new</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="typ" style="color: palegreen;">Game</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">400</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">490</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">AUTO</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'game_div'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Creates a new 'main' state that will contain the game</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> main_state </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
preload</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Function called first to load all the assets</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
create</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Fuction called after 'preload' to setup the game </span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
update</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Function called 60 times per second</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">};</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Add and start the 'main' state to start the game</span><span class="pln" style="color: white;">
game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'main'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> main_state</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'main'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
We are going to fill in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">preload()</code>, <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> and <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">update()</code> functions, and add some new functions to make the game work.</div>
<h3 id="thebird" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
The bird</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Okay, so now you are ready to code! Let's first focus on adding a bird to the game that can be controlled with the spacebar key.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Everything is quite simple and well commented, so you should be able to understand easily the code below. For better readability, I removed the Phaser initialization and states management code that you can see above.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
First we update the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">preload()</code>, <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> and <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">update()</code> functions.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="pln" style="color: white;">preload</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Change the background color of the game</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">stage</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">backgroundColor </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'#71c5cf'</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Load the bird sprite</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">load</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">image</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'bird'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'assets/bird.png'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
create</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Display the bird on the screen</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">sprite</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">245</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'bird'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Add gravity to the bird to make it fall</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">gravity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">y </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1000</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Call the 'jump' function when the spacekey is hit</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> space_key </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">input</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">keyboard</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">addKey</span><span class="pun" style="color: white;">(</span><span class="typ" style="color: palegreen;">Phaser</span><span class="pun" style="color: white;">.</span><span class="typ" style="color: palegreen;">Keyboard</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">SPACEBAR</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
space_key</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">onDown</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">jump</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
update</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// If the bird is out of the world (too high or too low), call the 'restart_game' function</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">inWorld </span><span class="pun" style="color: white;">==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">restart_game</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
And just below this, add these two new functions.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="com" style="color: skyblue;">// Make the bird jump </span><span class="pln" style="color: white;">
jump</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Add a vertical velocity to the bird</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">velocity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">y </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">350</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Restart the game</span><span class="pln" style="color: white;">
restart_game</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Start the 'main' state, which restarts the game</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">state</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'main'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Save the main.js file with the new code, and reload the index.html file. You should have a bird jumping when you press the spacebar key.</div>
<h3 id="thepipes" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
The pipes</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
A Flappy Bird game without pipes is not really interesting, so let's change that.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
First, load the pipe sprite in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">preload()</code> function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">load</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">image</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'pipe'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'assets/pipe.png'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Then, create a group of pipes in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> function. Since we are going to handle a lot of pipes in the game, it's easier to use a group of sprites. The group will contain 20 sprites that we will be able to use as we want.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">group</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">createMultiple</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'pipe'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Now we need a new function to add a pipe in the game. By default, all the pipes contained in the group are dead and not displayed. So we pick a dead pipe, display it, and make sure to automatically kill it when it's no longer visible. This way we never run out of pipes.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="pln" style="color: white;">add_one_pipe</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">x</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Get the first dead pipe of our group</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> pipe </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">getFirstDead</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Set the new position of the pipe</span><span class="pln" style="color: white;">
pipe</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">reset</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">x</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> y</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Add velocity to the pipe to make it move left</span><span class="pln" style="color: white;">
pipe</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">velocity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">x </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">200</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Kill the pipe when it's no longer visible </span><span class="pln" style="color: white;">
pipe</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">outOfBoundsKill </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">true</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
The previous function displays one pipe, but we need to display 6 pipes in a row with a hole somewhere in the middle. So let's create a new function that does just that.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="pln" style="color: white;">add_row_of_pipes</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> hole </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Math</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">floor</span><span class="pun" style="color: white;">(</span><span class="typ" style="color: palegreen;">Math</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">random</span><span class="pun" style="color: white;">()*</span><span class="lit" style="color: indianred;">5</span><span class="pun" style="color: white;">)+</span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">for</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> i </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;"> i </span><span class="pun" style="color: white;"><</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">8</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;"> i</span><span class="pun" style="color: white;">++)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">i </span><span class="pun" style="color: white;">!=</span><span class="pln" style="color: white;"> hole </span><span class="pun" style="color: white;">&&</span><span class="pln" style="color: white;"> i </span><span class="pun" style="color: white;">!=</span><span class="pln" style="color: white;"> hole </span><span class="pun" style="color: white;">+</span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add_one_pipe</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">400</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> i</span><span class="pun" style="color: white;">*</span><span class="lit" style="color: indianred;">60</span><span class="pun" style="color: white;">+</span><span class="lit" style="color: indianred;">10</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
To actually add pipes in the game, we need to call the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">add_row_of_pipes()</code>function every 1.5 seconds. We can do this by adding a timer in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">timer </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">time</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">events</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">loop</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">1500</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add_row_of_pipes</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
And finally add this line of code a the beginning of the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">restart_game()</code>function to stop the timer when we restart the game.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">time</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">events</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">remove</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">timer</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Now you can save your file and test the code. This is slowly starting to look like a real game.</div>
<h3 id="scoringandcollisions" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Scoring and collisions</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
The last thing we need to finish the game is adding a score and handling collisions. And this is quite easy to do.</div>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Add this in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> function to display a score label in the top left.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">score </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> style </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;"> font</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"30px Arial"</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> fill</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"#ffffff"</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">};</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">label_score </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">text</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">"0"</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> style</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
Put this in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">add_row_of_pipes()</code>, to increase the score by 1 each time new pipes are created.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">score </span><span class="pun" style="color: white;">+=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">label_score</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">content </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">score</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
And add this in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">update()</code> function to call <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">restart_game()</code> each time the bird collides with a pipe.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">physics</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">overlap</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">restart_game</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">null</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
And we are done! Congratulation, you now have an HTML5 Flappy Bird clone. You can download the full source code <a href="https://github.com/lessmilk/phaser-tutorials/blob/master/2-flappy_bird/flappy_bird.zip?raw=true" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">here</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbKM0CeWZeReicFnz2wWkjVPj1mjwPkNM3WTFiFCVr66pilVrBsJJsB3Wgr1b6Mjye7FZGWtgsMuJdPpib4vJ8HEjoBMxLKEz9ifadDT3sFrapCLjoLLYawvG2sDnPNIw1eZywNtpB8I/s1600/5-2-2014+8-08-33+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVbKM0CeWZeReicFnz2wWkjVPj1mjwPkNM3WTFiFCVr66pilVrBsJJsB3Wgr1b6Mjye7FZGWtgsMuJdPpib4vJ8HEjoBMxLKEz9ifadDT3sFrapCLjoLLYawvG2sDnPNIw1eZywNtpB8I/s1600/5-2-2014+8-08-33+PM.png" height="320" width="253" /></a></div>
<br /></div>
<h3 id="whatsnext" style="font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Next Step:</h3>
<div style="margin-bottom: 1.6em; margin-top: 1.6em;">
The game is working, but it's a little bit boring. In the next tutorial we'll see how we can make it better by adding sounds, animations, menus, etc. Sounds interesting to you? So read how to make a Flappy Bird in HTML5 - Part 2.</div>
</section></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-36266409674069999332014-05-02T16:03:00.001+02:002014-05-02T16:03:25.455+02:00Learning Corona SDK Tutorial # 2: Creating Basic Geometric Shapes<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
In this tutorial we will see how to
draw some basic geometry shapes in CORONA SDK. It is pretty simple in CORONA to
draw any type of geometric shape. Following is code to draw line<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<o:p> </o:p>local newLine = display.newLine(0,0,100,100);</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
newLine:setColor(255,255,0);<o:p></o:p></div>
<div class="MsoNormal">
newLine.width = 4;<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;"><o:p> </o:p>local newLine = display.newLine(0,0,100,100);</span></div>
<div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;"><o:p></o:p></span></div>
<div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;">newLine:setColor(255,255,0);<o:p></o:p></span></div>
<div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;">newLine.width = 4;</span></div>
</pre>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Above, newLine(StartX,StartY,EndX,EndY) take
four arguments first two arguments define the starting point of the Line and
last two arguments represents the ending point of a line. You can further more
set color of the Line and the width of the Line. Moreover, you can append the
line by the following append(NewX,NewY) method as illustrated below:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; font-family: Inconsolata, monospace, sans-serif; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;"><o:p> </o:p>newLine:append(200,100);</span></div>
<div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;"><o:p></o:p></span></div>
<div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;">local background = display.newRect(0,0,32,48);<o:p></o:p></span></div>
<div class="MsoNormal" style="font-family: 'Times New Roman'; line-height: normal; white-space: normal;">
<span style="color: white; font-size: large;">background:setFillColor(255,255,255);</span></div>
</pre>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Similarly, you can also draw a Rectangle or Square by
newRect() method which also take 4 arguments.<o:p></o:p></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY21-ZdwchNcWtNhww4btZzl-FPuHR5-kYkniJ-bNnMIwCKDQ-wW5UJOzpjM1ElPOeJTPsjXfjwTI3vlRoYbaego-p6wBdXMO65N3BhoJCq_qUUJyAWxD5d9Ht6fnZph3BLZ0rkktyvUg/s1600/z.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY21-ZdwchNcWtNhww4btZzl-FPuHR5-kYkniJ-bNnMIwCKDQ-wW5UJOzpjM1ElPOeJTPsjXfjwTI3vlRoYbaego-p6wBdXMO65N3BhoJCq_qUUJyAWxD5d9Ht6fnZph3BLZ0rkktyvUg/s1600/z.png" height="320" width="165" /></a></div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-3434140268441148792014-05-01T22:54:00.001+02:002014-05-04T08:38:05.242+02:00Tutorial #2: Using HTML5 to develop FLAPPY BIRD (PHASER)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
In the <a href="http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">last HTML5 tutorial</a> we did a simple Flappy Bird clone. It was nice, but quite boring to play. We will see in this post how to add animations and sounds to our Flappy Bird clone. These won't change the game's mechanics, but the game will feel a lot more interesting. You can actually play the new version that we are going to make by <a href="http://lessmilk.com/flappy_bird/02/" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">clicking here</a>.</div>
<h3 id="setup" style="color: #3a4145; font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Set up</h3>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Start by downloading my <a href="https://github.com/lessmilk/phaser-tutorials/raw/master/3-flappy_bird/flappy_bird_basic.zip" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">new template</a> for this tutorial. It contains what we did in the last tutorial, plus 1 new sound file. So this should be familiar to you.</div>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Open the main.js file, and let's start coding :-)</div>
<h3 id="addflyanimation" style="color: #3a4145; font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Add fly animation</h3>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
The bird is moving up and down in a quite boring way. Let's improve this by adding some animations, and make it move like in the original game:</div>
<ol style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin: 1.6em 0px;">
<li>Always slowly rotate the bird downward, up to a certain point.</li>
<li>When the bird jumps, rotate it upward.</li>
</ol>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
The first one is easy. We just need to add this in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">update()</code> function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">angle </span><span class="pun" style="color: white;"><</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">angle </span><span class="pun" style="color: white;">+=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1</span><span class="pun" style="color: white;">;</span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
For the second one, we could simply add <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">this.bird.angle = -20;</code> in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">jump()</code> function. However, changing instantly the angle will look weird. Instead, we are going to make the bird change it's angle over a short period of time. We can do so by creating an animation in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">jump()</code>function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="com" style="color: skyblue;">// create an animation on the bird</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> animation </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">tween</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Set the animation to change the angle of the sprite to -20° in 100 milliseconds</span><span class="pln" style="color: white;">
animation</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">to</span><span class="pun" style="color: white;">({</span><span class="pln" style="color: white;">angle</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// And start the animation</span><span class="pln" style="color: white;">
animation</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
For your information, the preceding code could have been written in a single line of code like this.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">tween</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">to</span><span class="pun" style="color: white;">({</span><span class="pln" style="color: white;">angle</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">20</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">start</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
We are almost done. If you test the game right now, you will notice that the bird is not rotating like the original Flappy Bird. It's rotating like the drawing on the left, and we want it to look like the one on the right.</div>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
<img alt="" src="http://blog.lessmilk.com/content/images/2014/Feb/anchor.png" style="border: 0px; display: block; height: auto; margin: 0px auto; max-width: 100%;" /></div>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
What we need to do is change the center of rotation of the bird, called "anchor". Add this line of code in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> function to move the anchor point.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">anchor</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">setTo</span><span class="pun" style="color: white;">(-</span><span class="lit" style="color: indianred;">0.2</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0.5</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
If you test the game now, the animation should look a lot better.</div>
<h3 id="adddeadanimation" style="color: #3a4145; font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Add dead animation</h3>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
When the bird dies, we restart the game right away. Instead, we are going to make the bird fall off the screen as a dead animation.</div>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
First, update this line of code in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">update()</code> function to call <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">hit_pipe()</code>instead of <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">restart_game()</code> when the bird hit a pipe.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">physics</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">overlap</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">hit_pipe</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">null</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Now we create the new <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">hit_pipe()</code> function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="pln" style="color: white;">hit_pipe</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// If the bird has already hit a pipe, we have nothing to do</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">alive </span><span class="pun" style="color: white;">==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">return</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Set the alive property of the bird to false</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">alive </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Prevent new pipes from appearing</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">time</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">events</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">remove</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">timer</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">// Go through all the pipes, and stop their movement</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">pipes</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">forEachAlive</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">p</span><span class="pun" style="color: white;">){</span><span class="pln" style="color: white;">
p</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">body</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">velocity</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">x </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Last thing, we don't want to be able to make the bird jump when it's dead. So change the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">jump()</code> function by adding this two lines at the beginning.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">bird</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">alive </span><span class="pun" style="color: white;">==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">false</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">return</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
And we are done adding animations.</div>
<h3 id="addsound" style="color: #3a4145; font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
Add sound</h3>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Adding sounds is super easy with Phaser.</div>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Start by loading the jump sound in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">preload()</code> function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">load</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">audio</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'jump'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'assets/jump.wav'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Now add the sound in the game by adding this in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">create()</code> function.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">jump_sound </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">game</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">add</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">audio</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'jump'</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
Last thing, put this line in the <code style="background-color: #f7fafb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(227, 237, 243); font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; padding: 1px 3px; white-space: pre-wrap;">jump()</code> function to actually play the jump sound.</div>
<pre style="background-color: #333333; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(227, 237, 243); box-sizing: border-box; color: #3a4145; font-family: Inconsolata, monospace, sans-serif; font-size: 0.9em; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em; overflow: auto; padding: 10px; width: 700px;"><code class="prettyprint lang-js prettyprinted" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: none; font-family: Inconsolata, monospace, sans-serif; font-size: inherit; padding: 0px; white-space: pre-wrap;"><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">jump_sound</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">play</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;"> </span></code></pre>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
And that's it, you now have animations and sounds in the game! You can download the finished source code <a href="https://github.com/lessmilk/phaser-tutorials/raw/master/3-flappy_bird/flappy_bird_final.zip" style="-webkit-transition: color 0.3s ease; color: #4a4a4a; transition: color 0.3s ease;">here</a>.</div>
<h3 id="whatsnext" style="color: #3a4145; font-family: 'Open Sans', sans-serif; font-size: 3.5rem; line-height: 1; margin-top: 0px; text-rendering: optimizelegibility;">
What's next</h3>
<div style="color: #3a4145; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 32px; margin-bottom: 1.6em; margin-top: 1.6em;">
In only a few lines of code we managed to make the game nicer. But we can do better! In the next and last part, we will see how to create multiples state in the game, like a loading scene, a play scene, a menu, etc. To read the part 3 of this tutorial, click here.</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-32214234041044322132014-05-01T16:39:00.002+02:002014-05-02T16:08:23.727+02:00Learning Corona SDK Tutorial # 1: Setting up CORONA SDK and First Application (Hello World!)<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<b><u><span style="font-size: 14.0pt; line-height: 115%;">Introduction:<o:p></o:p></span></u></b></div>
<div class="MsoNormal">
Corona SDK or Corona use scripting language LUA to develop
android and iPhone application. LUA take care of all the low level code
providing flexibility to develop single application for both android and
iPhone. <o:p></o:p></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
LUA would be new programming language to you so I would be
providing QUICK START so you can grasp CORONA SDK and LUA easily.<o:p></o:p></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSms5FhNzzXkd4y25PY08G3KshuKfX1VNRP9Nq6kVx_MCX2yhLSNhW1EdcqwGZonvzfMWBW7h_DHa3q_KGo2Wd7tTFsIVN2_hzSbeftjPN6vnGsx2Qdtk1mD2WqAdkjj4k25nXUPirPA/s1600/CORONASDK.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSms5FhNzzXkd4y25PY08G3KshuKfX1VNRP9Nq6kVx_MCX2yhLSNhW1EdcqwGZonvzfMWBW7h_DHa3q_KGo2Wd7tTFsIVN2_hzSbeftjPN6vnGsx2Qdtk1mD2WqAdkjj4k25nXUPirPA/s1600/CORONASDK.png" height="255" width="400" /></a></div>
<br /></div>
<div class="MsoNormal">
<b><u><span style="font-size: 14.0pt; line-height: 115%;">Installation:<o:p></o:p></span></u></b></div>
<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
Firstly, download the CORONA SDK from the following location
<u><b><a href="http://coronalabs.com/products/corona-sdk/" rel="nofollow" target="_blank">download here</a></b></u>. After downloading the CORONA SDK run it<!--[if gte vml 1]><v:shapetype
id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:467.25pt;
height:305.25pt'>
<v:imagedata src="file:///C:\Users\AMANU_~1\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"
o:title="CORONASDK"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
<b><u><span style="font-size: 14.0pt; line-height: 115%;">First App:</span></u></b><br />
Create a new project and name it <b>HelloWorld</b>.</div>
<div class="MsoNormal">
<a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=5200260903974154949" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zCj0li5dZ-qx0fQO44xb3QOU0Bdf6Mry0IQvlG4yWBTv9QPUxPzNlmXN7hRFecbWEpMZxNTdwbcq5gQZgCQFXhVDLvr3sTj8k4J31mS1UTz-N3-X9238t_S-TLARWtdavJnZqlfjwqo/s1600/CreateNew.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zCj0li5dZ-qx0fQO44xb3QOU0Bdf6Mry0IQvlG4yWBTv9QPUxPzNlmXN7hRFecbWEpMZxNTdwbcq5gQZgCQFXhVDLvr3sTj8k4J31mS1UTz-N3-X9238t_S-TLARWtdavJnZqlfjwqo/s1600/CreateNew.png" height="243" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75"
style='width:467.25pt;height:4in'>
<v:imagedata src="file:///C:\Users\AMANU_~1\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png"
o:title="CreateNew"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]-->After that open <b>Main.LUA </b>file just created in the project and start coding. <b>Main.lua</b> is main file of the project
where you will start coding. Write following code in <b>Main.lua</b> file and save it:<o:p></o:p></div>
<div class="MsoNormal">
local myText = display.newText("Hello World",100,100,system.nativeFont,36);<o:p></o:p></div>
<div class="MsoNormal">
After that open corona simulator and press CMD + R (FOR MAC)
or CTRL + R (FOR WINDOWS) to run the code on the simulator<o:p></o:p><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fJYjg-ecmYuHpxDFS_BAc8JtKtYIqxGXdNbGmFIOdVMatbiIB99hevUeGCX51JRUVcUyXDDc1euCLCVCJ50Yo_XmCa0fFYFvxmU4bDGhng5UDm3BVL19LprCmSFhNxA52cH2EZOMQRU/s1600/Hello+World.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fJYjg-ecmYuHpxDFS_BAc8JtKtYIqxGXdNbGmFIOdVMatbiIB99hevUeGCX51JRUVcUyXDDc1euCLCVCJ50Yo_XmCa0fFYFvxmU4bDGhng5UDm3BVL19LprCmSFhNxA52cH2EZOMQRU/s1600/Hello+World.png" height="320" width="167" /></a></div>
<br /></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape id="_x0000_i1027" type="#_x0000_t75"
style='width:251.25pt;height:480pt'>
<v:imagedata src="file:///C:\Users\AMANU_~1\AppData\Local\Temp\msohtmlclip1\01\clip_image005.png"
o:title="Hello World"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In the above code, <b>display.newText(string
text, font fontname, positionX,positionY, fontsize)</b> take 5 arguments first
the <b>text</b> to display, second <b>font name</b>, third and fourth are the <b>position</b> of the text on the screen and
last is the <b>font size</b> .<br />
<br />
<b><u><span style="font-size: large;">SOURCE CODE</span></u></b><br />
<br />
We will look
this code and syntax in more detail in Learning Corona SDK Tutorial # 2.Feel free to contact me for queries and please share your
reviews. For more tutorials <a href="http://amanullahtariq.blogspot.com/2014/05/learning-corona-sdk-tutorial-2-creating.html" target="_blank">click here</a></div>
<div class="MsoNormal">
<o:p></o:p></div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5200260903974154949.post-85558643716439231032014-04-29T13:33:00.002+02:002014-05-04T08:35:20.090+02:00Beginner Java Tutorial #1 : Hello World!<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Times, Times New Roman, serif; font-size: large;"><b><u>Introduction:</u></b></span><br />
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white; text-align: justify;">Java is a high-level programming language developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java..</span> The key that allows Java to solve both the security and the portability problems just described is that the output of a Java compiler is not executable code.</span><br />
<span style="font-family: Times, Times New Roman, serif;"><br /></span>
<span style="font-family: Times, Times New Roman, serif;">In this tutorial we would be basically be focusing on code not History of the Java.</span><span style="font-family: Times, 'Times New Roman', serif;"> </span><span style="background-color: white; font-family: Times, 'Times New Roman', serif; line-height: 20px;">Java is an object oriented language (OOP). Objects in Java are called "classes". </span><span style="font-family: Times, Times New Roman, serif;"> </span><span style="font-family: Times, 'Times New Roman', serif;">Today we will make our first program on JAVA.</span><br />
<span style="font-family: Times, 'Times New Roman', serif;"><br /></span>
<span style="font-family: Times, 'Times New Roman', serif;">This tutorial is for beginner who want to learn core java development.</span><br />
<br />
<b><u><span style="font-size: large;">Installation:</span></u></b><br />
First we would download the JRE (Java Runtime Environment) and JDK ( Java Development KIT) <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html?ssSourceSiteId=otnjp" target="_blank"><span style="font-size: x-small;">download here</span></a>.<br />
<span style="font-family: Times, Times New Roman, serif; font-size: large;"><b><u><br /></u></b></span>
<span style="font-family: Times, Times New Roman, serif; font-size: large;"><b><u>SETTING UP:</u></b></span><br />
<span style="font-family: Times, Times New Roman, serif;">Setup all the environment variables for java. To see why its important to set environment variables for java and how to set them<a href="http://amanullahtariq.blogspot.com/2014/05/why-do-you-need-to-set-environment.html" target="_blank"> click here</a> .</span><br />
<span style="font-family: Times, Times New Roman, serif;"><br /></span>
<span style="font-family: Times, Times New Roman, serif;"><b><u>Finally Code:</u></b></span><br />
<span style="font-family: Times, Times New Roman, serif;"><b><u><br /></u></b></span>
<span style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;">Now let's create our first Hello world program, which simply prints "Hello World!" to the screen.</span><br />
<span style="color: #333333; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 14px; line-height: 20px;"><br /></span></span>
<br />
<pre style="background-color: whitesmoke; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); color: #333333; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 10px; padding: 9.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;">public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</code></pre>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px;">
<br /></div>
<span style="font-family: Times, Times New Roman, serif;">Moreover, Save file in BIN of JDK. The path which you provided to <b>CLASS PATH</b> variable.Now open Command Prompt and write following commands to execute your program.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrmLlPLMCGrSkEthyphenhyphenAEVjVlq3e1tt71wuFiI1rOBse6no0dVxxqasNo2DF1awD2cxSvgq7lpOmoX139VGg44Gfi-a-LiYWvhuuvxLIq3wGsGK6SWkK9F1jfbFc__XF6faJT92BGVJgxc/s1600/Java.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrmLlPLMCGrSkEthyphenhyphenAEVjVlq3e1tt71wuFiI1rOBse6no0dVxxqasNo2DF1awD2cxSvgq7lpOmoX139VGg44Gfi-a-LiYWvhuuvxLIq3wGsGK6SWkK9F1jfbFc__XF6faJT92BGVJgxc/s1600/Java.PNG" height="179" width="320" /></a></div>
<br />
1)javac HelloWorld.java<br />
2) java HelloWorld.class<br />
<br />
Refer our next tutorial to learn more about Java Beginner Java Tutorial #2 .</div>
Unknownnoreply@blogger.com0