Porting a HTML5 game to mobile platform

-
When I read the article from Michal Budzynski that teaches me the first lesson "How to make a HTML5 game", and I try to let it also can be played fun on mobile devices. Here is the link I put on my Github: https://github.com/DaoshengMu/Simple-game-with-HTML5-Canvas/tree/master/mobile

Link: https://dl.dropboxusercontent.com/u/75721204/Html5/mobile/index.html



  1. Different screen size
    You must define different item-size for supporting different screen size. Therefore, you need to write the CSS file, CSS provides px, %, em to adjust the item size. "px" is absolute pixel of the screen. "%" means percentage of the font size. For example, your browser default font size is 12 point, 80% means you use 9.6 point. "em" is the m letter size, it has the same meaning as "%", if your em is 0.5 that means your item is 6 point. Put the mobile.css in your index.html, and define the media(resolution) you want to support.
    media="screen and (max-device-width: 768px) and (orientation: portrait),
  screen and (max-device-width: 1024px) and (orientation: landscape)"/>
    Define the special size in mobile.css 
    #mario-proto {
    position : relative;
    width : 1.625em;
    height : 2.375em;    
}
.mario-size {
    font-size : 40px;
}

/* use a bigger base size for tablets, in mobile.css */
@media (min-device-width: 768px) {
    #game {
        font-size : 64px;
    }
    #game-screen .game-board {
        margin : 0.75em;
    }
    .mario-size {
        font-size : 80px;
    }
    
    .platform-size {
        font-size : 80px;
    }
}

  2. User input
    If we play the game on PC browser, we can use our mouse to be the controller, but on mobile device we need to adjust our method, accelerometer is the best choice.
    Mouse move event: 
     window.onmousemove = function(e) {
            mouseX = e.pageX;
            mouseY = e.pageY;
            if (player.X > mouseX) {
                player.moveLeft();
            } else if (player.X < mouseX) {
                player.moveRight();
            }
        };
    Accelerometer is not the official spec of W3C, so there is some complexity need to be solved: 
    if (window.DeviceOrientationEvent) {   // W3C spec
        window.addEventListener("deviceorientation", function () {
         //   tilt([event.beta, event.gamma]);
         player.moveAccMove(event.gamma*0.5);
        }, true);
    } else if (window.DeviceMotionEvent) { // Some devices support it
        window.addEventListener('devicemotion', function () {      
         player.moveAccMove(event.acceleration.x);
        }, true);
    } else {   // Mozilla spec
        window.addEventListener("MozOrientation", function () {      
            player.moveAccMove(orientation.x);
        }, true);
    }
  3. Cross-browsers
    I can sure every browsers could be supported totally, especially for accelerometer function. On iOS you can the install function to install on your desktop, and that will be an icon likes like an native app which download from app store. On Android, we can hide the address bar
     // hide the address bar on Android devices
        if (/Android/.test(navigator.userAgent)) {
            $("html")[0].style.height = "200%";
            setTimeout(function() {
                window.scrollTo(0, 1);
            }, 0);
        }
  4. WebStorage
    If you want to save some game data on your browser, you can choose WebStorage or cache, cache just can save 4KB per domain, WebStorage can support 2MB. Therefore, we prefer WebStorage to be our first technology-choice. In WebStorage, we use key/value approach to store our data. 
     var db = window.localStorage; // WebStorage 
 db.setItem(key, value); // store data to WebStorage
  5. Debugging on mobile
    https://developers.google.com/chrome-developer-tools/docs/remote-debugging
    It is very easy to debug on mobile. First, you need to download Android SDK to your PC, and then enable USB debugging on your Android device. Second, open your Chrome browser on mobile, go to the setting and enable USB web debugging. Next, open the folder where you downloaded Android SDK, go to android-sdk\platform-tools, use command-line tool enter adb devices to confirm your driver has been installed successfully. Then, enter adb forward tcp:9222 localabstract:chrome_devtools_remote , open your PC Chrome and go to the address localhost:9222,you will see the pages are the same to your mobile device Chrome. Select which page you want to debug. Now, you can debug!!!
     

Comments

Post a Comment

Popular posts from this blog

Drawing textured cube with Vulkan on Android

-
Image
Vulkan is a modern hardware-accelerated Graphics API. Its goal is providing an high efficient way in low-level graphics and compute on modern GPUs for PC, mobile, and embedded devices. I am personally working a self training project, vulkan-android , to teach myself how to use this new APIs. The difference between OpenGL and Vulkan OpenGL: Higher level API in comparison with Vulkan, and the next generation of OpenGL 4 will be Vulkan.   Cross-platform and Cross-language (mostly still based on C/C++, but people implemented diverse versions and expose similar API binding based on OpenGL C++, WebGL is a good example).  Mainly used in 3D graphics and 2D image processing to interact with GPU in order to achieve hardware acceleration. Don't have a command buffer can be manipulated at the application side. That means we will be easily see draw calls being the performance bottleneck in a big and complex 3D scene. Vulkan: Cross-platform and low-overhead. Erase the boundary bet...
Read more

glTF loader for Android Vulkan

-
Image
This post is going to introduce how we integrate with an existing glTF loader library to make it be able to show glTF models in our Vulkan rendering framework,  vulkan-android . tinygltf In the beginning, we don't want to make our new own wheel, so choosing  tinygltf as our glTF loader. tinygltf is a C++11 based library that would help us support all possible cross-platform project easily. tinygltf setup in Android Studio In  vulkan-android  project, we put third party libraries into third_party folder. Therefore, we need to include tinygltf from third_party folder in app/CMakeLists.txt as below. set(THIRD_PARTY_DIR ../../third_party) include_directories(${THIRD_PARTY_DIR}/tinygltf) Model loading from tinygltf We are going to load a gltf ASCII or binary format model from the storage. tinygltf provides two APIs , they are LoadBinaryFromFile() and LoadASCIIFromFile() respectively based on the extension name is *.glb or *.gltf. TinyGLTF loader will return a tiny...
Read more

C++ unit testing & CI integration in GitHub (I/2)

-
Image
I am working on a side project,  Vulkan-Android , that is based on Java, JNI, C++, and Vulkan for Android platform. It also uses my C++ math library. Therefore, the requirement of my build and unit tests are around C++. First of all, I would make sure the unit tests in local are run properly. C++ unit test on Mac OS On Mac OS, I think the most convenient way to do unit testing for C++ is writing XCT in Xcode. In the beginning, we need to create a test plan in Xcode. It will helps us create a schema, then, in the test navigator, create a new Unit Test Target. Due to XCT was originally designed for Objective-C or Swift, if we wanna test our C++ code, we need a workaround by making the file extension name to be *.mm . And then, write down the unit tests as below: #import <XCTest/XCTest.h> #include "Vector3d.h" using namespace gfx_math; @interface testVector3D : XCTestCase @end @implementation testVector3D - (void)setUp { // Put setup code here. This method is cal...
Read more