Profile

Cover photo
30 followers|7,035 views
AboutPostsPhotosVideos

Stream

HTML Games

Shared publicly  - 
 
New Tutorial - Creating your first APK using the Chrome Webview

Part 3 - Creating a fully fledged Android App

You will be using ChromiA (Chromeview in Android)

From Wikipedia - http://en.wikipedia.org/wiki/Chromia

In Greek mythology, Chromia is the daughter of Itonus, son of Amphictyon, himself son of Deucalion.
She was also, in some traditions, the mother of Aetolus, Paeon, Epeius and Eurycyda by Endymion.

So, what is it in relation to Android?

ChromiA is an open source framework developed by Differences API (a.k.a HTML Games), that allows you to create Android (Lollipop+) apps more easily. Everything can be developed locally and doesn't need any paid accounts or Facebook log in.

It is based on the html2apk java project from the previous tutorial (which is basically a wrapper for the new Chrome Web View), with the addition of now being able to save app (or game) state on a users device when they exit and restart later.

This tutorial will show you how to create a full game called W.T.S (short for Where's The Square)

The graphics have been made by Lucas Finnerty, with the coding and sound effects by Paul Finnerty.

(Feel free to contact me or leave any comments below relating to this game)

First, if you're a little impatient - here's what we will be making:

http://homepage.ntlworld.com/infinnerty/differences/$/wts.apk

and all the source code:

http://homepage.ntlworld.com/infinnerty/differences/$/wts.zip

You will need to change your security settings to be able to install the APK - note this app requires no permissions whatsoever.

Once you have installed, make sure you set your security settings back to disallow installing of none Play store apps.

Have a play around with the game and see how when you score and quit the game (using the back button), then restart the game, the score is remembered.

This is achieved by passing data stored on the URL search string back to the java code and saving internally in the W.T.S app folder.

Storing data in this folder is standard and requires no permissions. You can clear the data stored for this app by navigating to the app settings, choosing the W.T.S and 'Clear Data', which wipes the stored data for our game.

The great thing about creating a ChromiA app is that we can develop within the Chrome Browser (using any text editor) and see the results quickly.

To start, download the source code zip file and extract under your Android Studio Apps project folder.
Navigate to the assets folder > www and the index.html file can be run directly in Chrome.  Running this way you will be able to see all the data being passed around via the url search parameter, which makes it easy to change values to!

The main purpose of this game app is to demonstrate the state changes when used with ChromiA, so I haven't made full mobile
optimization within the html code (this is left for the reader to do). Note also that the web code within the www folder is all you have to change, followed by a project build (APK). 

What could be simpler?

Get ChromiA (zip format) template here:

http://homepage.ntlworld.com/infinnerty/differences/$/ChromiA.zip
1
Add a comment...

HTML Games

Shared publicly  - 
 
New Tutorial - Creating your first APK using the Chrome Webview

Part 2 - Importing and Compiling:

 This second part will show you how to import the java project
and compile into an install-able APK for any android device running the new Chrome Webview on Android Lollipop. We will be using Android Studio for this.

Note: The new Chrome Webview became available in Android KitKat v4.4.4 (API v19)

However as I have stated in another post, using sound files from a local file system is buggy and doesn't work. This was fixed in lollipop v5.0.0 (API v21) and tested on my Nexus 7

Android studio defaults to using API v21, so if your running lollipop (or have an emulator) then you're good to go, with no additional downloads required.

Note: [app_name] is to be replaced with whatever you have called your app. Keep the name consistent throughout these following steps! ... Also for this first project, keep the app_name simple and don't use any spaces. Note that the square brackets [ ] are not to be entered, just used here as a place holder for this tutorial.

10) You will need the java project code which can be found here:

http://homepage.ntlworld.com/infinnerty/differences/$/$html2apk_template.zip

Download this and unzip to your android studio project folder:

c:\Users\[your user id]\AndroidstudioProjects

or search for the AndroidstudioProjects folder manually if you didn't use the default install location.

Now make a copy of this folder and rename to [app_name]

11) Next we need to edit some files and rename a directory. This is so that when you come to install multiple html2apk apps
they don't update each other. Normally this could be done using Android Studio 'Refactor' option, however we will do it manually:

From the [app_name] project folder path you created in step 10: /app/src/main

open AndroidManifest.xml

for the 2 instances of html2apk (in the manifest and activity nodes), change to [app_name]

rename the html2apk dir (under the app/src/main/java/com directory tree) to [app_name]

open Main.java

search and replace the 2 instances of html2apk to [app_name]

open MyWebViewClient.java

search and replace the 1 instance of html2apk to [app_name]

save all your changes.

12) Start Android Studio and choose from the quick start menu,

 Import Non-Android Studio project

 (this is because our html2apk template was from eclipse), and select the project folder that you copied (and renamed in step 10), then click Ok. Using all the defaults, click Next (6 times), then click finish.

The project will be imported and checked for errors as the build takes place in the background.

Note: Android Studio will suggest to update project to use the Gradle format. For the moment ignore this message,
as we can cover that in a later tutorial.

12) Now comes the step of naming your app name. We did this in step 11, but now is a good time to check.

From the file explorer window, open on app > src > main, then on manifests. Open AndroidManifest.xml by double clicking on it, and in both the <application> and <activity> tags, check the attribute

 android:label="@string/app_name"

This is a reference to strings.xml where the [app_name] with spaces can be stored. You can edit strings.xml from the path app/src/main/res/values from the file explorer and update the app_name text there.

next, also within the <activity> tag we have the attribute 
 
 android:screenOrientation="landscape"

change this if your app should work in portrait to

 android:screenOrientation="portrait"

or remove the attribute all together if you don't care which orientation your app is in.
However if possible I suggest choosing an orientation for a game type app.

Note: Changing orientation whist using a webview app, can cause the app to reload!

13) Every app has its own icon, with the template supplied defaulting to a red square.
 
If you want to create your own app icon, then the icon is stored under the res > drawable > ic_launcher folder in png format (you can edit this format in paint). Make sure that any changes to the icon are copied into ALL the  folders starting with drawable under the app > src > main > res folder within the new project folder you created in step 10.

14) Now's the time to add a little message for use to see when the apk has been installed and opened on our device.

It would be at this point you would add all your HTML folder assets to the project folder under app > src > main > assets > www
 if you wanted to add a working game.

For starters, we will add some text. Open the www folder in the file explorer window and edit the index.html file.
Within the body tag type a message and save (Ctrl+s)

15) If there are no errors (there shouldn't be) then we can go straight to compling the APK. We will need a keystore.jks file for this part.
Normally, if you had a Google play developer account you would have this file, however for testing you can load a dummy one from here:

http://homepage.ntlworld.com/infinnerty/differences/$/$keystore.zip

unzip this into a folder somewhere and open the keystore.txt file - this is the password, alias and password again required for the dialog for the step below.

From the build menu, select Generate Signed APK and a dialog will appear asking for the path to the .jks file (that you just saved) and the security credentials.

Fill in the information and click Next, then click Finish. When the compiler has finished an alert will popup.

16) Click on the Show in Explorer, and in the opened file window find the file main.apk and rename to your app name.

Congratulations! you've just built your apk.

Copy your apk to the dowloads folder onto your device using the usb cable.

Note: Android Studio will have also now added the R class dependency to your project folder. R is the resource data.

17) With the APK now built, we can install to our device. To do this we need to allow a security option within Android itself

On your Android device goto settings > security and tick the Unknown sources. An alert will warn you about doing this - however this is JUST for installing OUR apk.

Once this has been set, using your favorite file explorer or the built in downloads folder viewer, find your apk and click on it to install.

You can now open the app as you would like any other (including making a home screen shortcut). It will show up in the running apps carousel too!

Important Note: Once you have installed your apk, it is a good idea to switch the install from unknown sources back off again! 

Have Fun!
1
HTML Games's profile photo
 
Just a quick note about app_name. You can have spaces in the app name defined in strings.xml file. This is the one that you will see when the app is installed (and running).
Add a comment...

HTML Games

Shared publicly  - 
 
Woohoo 100K clicks on HTML Games! (the 100,000 click was from someone in America!)

Thanks all for visiting. I've ran out of web space now for this site, so will leave as is (a museum for ie6 games anyone?) 
1
Add a comment...

HTML Games

Shared publicly  - 
 
Coming Soon...

How to convert web based HTML Games to stand alone apps (apk's) using (to start with) KitKat's native Chrome Webview.

Using a basic Java template and free software, you will learn how to create an install-able apk (which Google Play Store uses!)

The app can then be side loaded (google "side loading apps") onto your android hardware (must be running KitKat) or if you have a developers account, sold on the Google Play Store!

I will be using a 2012 Nexus 7.
1
Add a comment...

HTML Games

Shared publicly  - 
 
Here's a puzzle made from the html games crossword creator (CW):

All the questions are related to One Across.
A message will appear when all answers (letters) are correct
Well known block game 2. Hiiiisssssss. Watch out! 3. Build circuits with this 4. Killer legs. 5. Default character 5. Three help make a bed. 6. Another name for 14 down 7. Make these to survive. 8. Ender _____ 10. Type of Biome. 9. Relatively new to 1 across 13. When H2O meets SiO2 ...
1
Add a comment...

HTML Games

Shared publicly  - 
 
With the new Chrome update for android, you can now add a web app to your home screen. I tested this out on the Galactians game.

The main change was to have an icon on the home screen for the game (rather than the default one). To do this I created a 196px by 196px png image and using the link meta tag (in the index.html), pointed it to the png which was in the same directory as the game index.html

e.g.
<link rel="icon" type="image/png" href="favicon.png" />


When using Chrome for android, load up the game as usual, then from Chrome menu select add to home screen. It will suggest a title and use the png image as the icon.

Clicking the png image on your home screen will start the game in full screen with no url bar (basically like a webview) giving it an app like appearance.

Cool eh?
1
Add a comment...

HTML Games

Shared publicly  - 
 
Hi,
 Been getting quite a few emails re: source code,
 - bottom line: help yourself to anything off the site,
    be it business / educational use or just for fun!

It's all open source stuff and just a playground for ideas.
1
Add a comment...

HTML Games

Shared publicly  - 
 
Stop Motion films using html and javascript with Lego has landed @ HTML games.

Using the Differences API you can easily control frame rate, add wav sounds and mix in with all the other features this API has to offer.
1
Add a comment...
Have them in circles
30 people
Sadhana Zalake's profile photo
Manish S.'s profile photo
Shiva Kumar's profile photo
web zangam's profile photo
Andrew Simon's profile photo
PSDtoHTMLCompanies's profile photo
Abu Raihan's profile photo
장봉섭's profile photo
SymbolHound's profile photo

HTML Games

Shared publicly  - 
 
New Tutorial - Creating your first APK using the Chrome Webview

Part 1 - Requirements:

 This tutorial will be for a Windows 7 PC (64bit) running the latest version of Android Studio (IDE) along with Oracles Java Delevopment Kit 8 (JDK). You will learn how to set up the work environment, ready for our HTML project code to be complied into an APK.

It is assumed that the reader has neither the IDE or JDK installed.

1) Download Android Studio from here:

http://developer.android.com/sdk/index.html

Make sure you click the download for the Windows install. You will need to agree to the Terms and Conditions first.

2) Download from Oracle the JDK 8 64bit version for Windows x64 from here:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

(If the link is broken, search for JDK8)

3) Once download is complete of the above, we will install the JDK8 by double clicking the exe file to start off the install process. You only need to install the JDK, however, other options of source code and examples will be present within the installer - I just installed the top option of the actual JDK and unticked the other two.

After the installation has finished we need to set two system level variables. These are the PATH and JAVA_HOME

4) Click Start and right click on Computer; Click on properties and then Advanced System Settings on the left. On the System Properties dialog, click on enviroment variables. This will open another dialog.

5) In the system variables section search for the variable named Path and click on edit. If you download v31 of the JDK and didn't change any default install paths, then you can just paste this line below onto the end of the text that is already there:

;C:\Program Files\Java\jdk1.8.0_31\bin

Click ok

If you have a different version then the jdk1.8.0_31 part needs to be updated to match that of the version installed. To do this open up file explorer and navigate to C:\Program Files\Java\ and the directory here will be the text that you need to replace the jdk1.8.0_31 part with.

Note: It is assumed the java install was to the default location. If this wasn't the case then you will need to also update the whole path part C:\Program Files\Java

6) If no JDK has ever been installed into your windows PC, then it is likely that the JAVA_HOME variable doesn't exist at all. To check if we need to create this variable, search within the System variables section of the System Properties dialog for JAVA_HOME.

If this variable already exists then we can edit it to have the value of the java directory - i.e. for a default install above it would have the variable value C:\Program Files\Java\jdk1.8.0_31

however you most likely need to create it, so click on New and in the variable name input box type JAVA_HOME and in the variable value type C:\Program Files\Java\jdk1.8.0_31

You will need to amend this value if the install path of the JDK is not the default or is a different version (like we did in step 5). Note however we do not need the \bin at the end.

7) At this point it is a good place to restart your computer. This is so that these variables are updated to what Windows 7 currently has them set to.

8) After the reboot you can check the java variables are working by opening up a command prompt and typing path. This will return a string of text with your updated change at the end.

Next type echo%JAVA_HOME% and this will return a directory path.

NOTE: If you do not get these then carefully check step 5, 6 and 7 again.

type exit to close the command window

9) Now we need to install Android Studio. Find the exe that you downloaded earlier and double click on it. After a few minutes the Android Studio IDE will have installed. Make sure the shortcut points to the 64bit version like so (for a default install) by right clicking on the icon and selecting properties:

"C:\Program Files\Android\Android Studio\bin\studio64.exe"

If you installed to a different directory then the above text would be different.

Now click on the icon and Android Studio will start with no errors and present you with a project options screen.

Congratulations! you have finished part 1 of this tutorial
  Download Before installing Android Studio or the standalone SDK tools, you must agree to the following terms and conditions. Terms and Conditions This is the Android Software Development Kit License Agreement 1. Introduction 1.1 The Android Software Development Kit (referred to in this License Agreement as the "SDK" and specifically including the Android system files, packaged APIs, and Google APIs add-ons) is licensed to you subject to the te...
1
HTML Games's profile photo
 
The second part will show you how to import the java project and compile into an installable APK for any android device running the new Chrome Webview.

Note: The new Chrome Webview became available in Android KitKat v4.4.4 (API v19)
However as I have stated in another post, using sound files from a local filesystem is buggy and doesn't work. This was fixed in lollipop v5.0.0 (API v21) and tested on my Nexus 7

Android studio defaults to using API v21, so if your running lollipop (or have an emulator) then you're good to go, with no additional downloads required.
Add a comment...

HTML Games

Shared publicly  - 
 
Just Finished reading a new HTML5 game development book. You can take a look here (sample):

 http://goo.gl/ESKxqT

It's for coders who already understand javascript and has some gems on box2dweb.js; sound.js and development tips for mobile.

The book's layout is easy to follow with coding tips along the way. As it's quite a recent book it also has most of the latest HTML5 CSS3 specification covered.

However I must stress that you should know some javascript, and the DOM (document object model) first before reading. All coding examples are downloadable for you to play with and the games are mostly complete with extra functions / ideas for the reader to complete.

For those starting out in HMTL5 I can recommend this free online course:

https://www.udacity.com/course/viewer#!/c-cs255/l-52473341/e-66657632/m-67610030

Which, when completed will help with these types of books.

Also, with Android L coming in the very near future, along with the updated Chrome WebView, you will be able to create installable apps which run on HTML5.

Thanks for reading folks!
1
priyanka basu's profile photo
 
Thank you Paul for your honest opinion. Hope you enjoyed reviewing the book!
Add a comment...

HTML Games

Shared publicly  - 
 
Hehe.... A little Easter egg has appeared on the HTML Games site...
can you find it before it goes?

Clue: Flap Flap Tweet....
1
Paul Finnerty's profile photo
 
For those that missed it, please see this post:

https://plus.google.com/100567403011559671124/posts/M1LGuTMu75c
Add a comment...
People
Have them in circles
30 people
Sadhana Zalake's profile photo
Manish S.'s profile photo
Shiva Kumar's profile photo
web zangam's profile photo
Andrew Simon's profile photo
PSDtoHTMLCompanies's profile photo
Abu Raihan's profile photo
장봉섭's profile photo
SymbolHound's profile photo
Contact Information
Contact info
Email
Story
Tagline
Fun games for all ages
Introduction
HTML Games (Differences API) Started off being a site to test ideas within different html browsers. 

With the ever changing progression of browser technology, this website hosts games that work with touch, as well as desktop devices - along with the hope that these are also an interest for others to learn from...

Paul.


Links