cocos2d-xのwebviewクラスを使う #iOS

cocos2d-xでwebviewを使う

cocos2d-x v3.x系はwebviewを簡単に組み込める。ios・android気にせず使えるのは非常に便利。
ローカルファイルも簡単に読み込めるのでオンライン・オフラインどちらも対応できる。

ubuntu14.04
android 4.4
cocos2d-x v3.4 (手元にあったのが古くて申し訳ない)

cocos2d-xはすでに導入済みとする

プロジェクトを作る

cocos new webview -p com.caad1229.webview -l cpp

とりあえずWebViewを出してみる

WebViewオブジェクトを生成。HelloWorldScene.cppのinit()に追加。

#include "ui/CocosGUI.h"

bool HelloWorld::init()
{
    //
    // 省略
    //

    {
        auto webView = cocos2d::experimental::ui::WebView::create();
        webView->loadURL("http://yahoo.co.jp");

        // ポジションとサイズを調整
        Size screen = Director::getInstance()->getOpenGLView()->getDesignResolutionSize();
        webView->setAnchorPoint(Vec2::ANCHOR_MIDDLE_RIGHT);
        webView->setContentSize(Size(screen.width/2, screen.height));
        webView->setPosition(Vec2(screen.width, screen.height/2));

        this->addChild(webView);
    }
}

エミュレータもしくは実機を接続した状態でビルド&実行

cocos run -p android

以下のようになるはず。

ローカルファイルを出してみる

アプリ内部に保持しているファイルを読み込むこともできる。これにより、例えばオフラインでも指定したhtmlを読み込ませることができる。

ローカルファイルの追加

画像などいれるResoucesフォルダにファイルをいれる。今回はhelp.html

$ vim ./Resouces/help.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>help</title>
    </head>
    <body>
        <h1>
            WebView Help Test Page
        </h1>
        <p>test test test</p>
    </body>
    </html>

HelloWorldScene.cppのinit()に追加。ほとんど同じで、loadURLがloadFileになるだけ。

    {
        auto webView = cocos2d::experimental::ui::WebView::create();
        webView->loadFile("help.html");

        // ポジションとサイズを調整
        Size screen = Director::getInstance()->getOpenGLView()->getDesignResolutionSize();
        webView->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
        webView->setContentSize(Size(screen.width/2, screen.height));
        webView->setPosition(Vec2(0, screen.height/2));

        this->addChild(webView);
    }

確認してみると、以下のようになる。

まとめ

最新のv3.6でもexperimentalとなっており実験段階の模様。ただ、複雑に使わない限り十分かと思う。リファレンスには様々なコールバック関数や、webviewを制御するAPIが用意されている。

cocos2d-xなので、使うのはゲームのヘルプとかになりそうだけれども、htmlだと手軽に色々な使い方もできそうですね。ちなみに当然だけれどもLinuxはないです。

プロジェクトgithub(容量削減のためcocos2d-xライブラリは抜いてあります)。