前回は、Pepperでデータベースを利用するアプリケーションを作成しました。
今回は、久しぶりにcocos2d-htmlについての内容となります。
アプリを作成していると、SNSのアイコンやウェブサービスのバナー等、外部から取得した画像を使用してSpriteを生成する必要があるケースも出てくると思います。
cocos2d-htmlでは、XMLHttpRequestというJavaScript標準のAPIで外部画像のバイナリデータを取得し、取得したバイナリデータを使用することで、外部画像のSprite化が実現できます。
まずは、http通信処理です。
XMLHttpRequestインスタンスを生成し、取得要求を行います。
//XMLHttpRequestインスタンス生成
var xhr = new XMLHttpRequest();
xhr.open('GET', "取得する画像のURL", true);
//タイプを arraybufferに設定
xhr.responseType = "arraybuffer";
xhr.onload = function( event )
{
//読み込み完了時の処理
};
xhr.send();
通信後、取得したデータをバイナリデータに変換します。
//通信結果データ取得
var data = new Uint8Array( event.target.response );
var binaryData = "";
for (var i = 0, len = data.byteLength; i < len; i++)
{
//バイナリデータへ変換
binaryData += String.fromCharCode(data[i]);
}
[/javascript]
<div>
<br>
</div>
取得したバイナリデータを使用してImageオブジェクトを生成します。
[javascript]
//Imageオブジェクト生成
var image = new Image();
image.src = "data:image/png;base64," + window.btoa(binaryData);
Imageオブジェクト生成後、画像を読み込みSpriteを生成します。
ここで読み込んだ画像がTextureとして設定されることになります。
//画像読み込み
image.onload = function()
{
//読み込んだ画像からSpriteを生成
var sprite = cc.Sprite.create( image );
this.addChild( sprite );
};
以上で、外部画像のSprite化は終了となります。
一般的にcocos2d-htmlアプリは、サーバー上に配置して動作させるため実用頻度は多くありませんが
端末に内包して使用するような場合でも、頻繁に更新がかかる画像のみ外部から取得することが可能なため、アプリ作成時の自由度が増します。
簡単に実装することが出来るため、是非皆さんも試してみてください。
以下は、画像取得部を関数化した簡単なサンプルソースです。
function loadImage(imgUrl, cb)
{
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, imgUrl, true);
xhr.responseType = “arraybuffer”;
xhr.onload = function( event )
{
//通信結果データ取得
var data = new Uint8Array( event.target.response);
var binaryData = “”;
for (var i = 0, len = data.byteLength; i < len; i++)
{
//バイナリデータへ変換
binaryData += String.fromCharCode(data[i]);
}
//Imageオブジェクト生成
var image = new Image();
image.src = "data:image/png;base64," + window.btoa(binaryData);
//画像読み込み
image.onload = function()
{
//取得要求時に受け取ったコールバック関数でImageを返却
cb( image );
};
};
xhr.send();
}
var MyLayer = cc.Layer.extend(
{
init:function ()
{
this._super();
var size = cc.director.getWinSize();
var self = this;
loadImage("取得する画像URL",
function( img )
{
//Sprite生成
var sprite = cc.Sprite.create( img );
sprite.setPosition( size.width / 2, size.height / 2 );
self.addChild( sprite );
});
}
});
var MyScene = cc.Scene.extend(
{
onEnter:function ()
{
this._super();
var layer = new MyLayer();
this.addChild(layer);
layer.init();
}
});
[/javascript]
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。