投稿日：2013-08-25 Sun
仕事のメインは、PCより圧倒的にスマートフォンの方が多くなってきました。もちろんPCのFlashやAirアプリ制作も多いのですが、HTML5ゲーム依頼も日に日に多くなってきてる感じです。
クリエイトウェーブはプログラマー4人、デザイン2人のチームですがパンク気味・・・
これからの体制づくりも考えて、クリエイトウェーブではパートナーを募集します。
HTML5(CanvasやjavaScript）を駆使したゲーム制作やFlsahやAirアプリ（ActionScript3）を使ったゲーム制作に興味のある方、法人などございましたら
dev@createwave.jp
までご連絡くださればと思います。
HTML5ゲーム制作に慣れてなくても、これから覚えたい方などあったらご遠慮なく・・・
ある程度は、指導します・・・ 要はやる気です！
やる気のある方、法人などパートナーになってくれる方のご連絡をお待ちしております。
テーマ:JavaScript - ジャンル:コンピュータ
投稿日：2013-03-24 Sun
おつかれさまです。フッチーです。最近FlashCS6のHTML5書き出しオプション「Toolkit for CreateJS」の使い方がようやっと判ってきました。
http://www.adobe.com/jp/devnet/createjs/articles/getting-started.html
にも書いてありますが、CS6の「Toolkit for CreateJS」は、FlashをHTML5に変換するツールではありません。
Flashを使ってHTML5コンテンツ制作を開発・補助するものです。
慣れてくると、これが結構便利です。
jActionみたいに、複雑なゲームを作るのには向かないけど、アニメ制作とか、ちょっとした演出に使うのには最適です。
SNSゲームの、ちょっとした演出にも十分使えるのではないかと思っているところです。
さて、「Toolkit for CreateJS」を使って書き出したHTML5コンテンツは、スマートフォンの画面に最適化されません。スマフォコンテンツは大体画面いっぱいに広げる事が大きいのですが「Toolkit for CreateJS」で書き出したHTML5はサイズが固定されており、スマートフォンの画面に最適化されません。
しかし、スマートフォンの画面にフィットさせるのは意外に簡単です。
例えば、test.fla を作って「Toolkit for CreateJS」でHTML5を出力すると、「test.html」と「test.js」それに画像素材が使われる場合は「images」フォルダの中に画像が配置されます。
この「test.html」をのぞいてみると
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="test.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(10);
createjs.Ticker.addListener(stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
となっています。
このままだとFlashのステージサイズで設定したサイズで動HTML5になりスマートフォンの画面にフィットさせる事ができません。 この「test.fla」の場合、550×400で作成しておりHTML5のCanvasも550×400になっています。
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff">
部分で設定されてる訳です。 このままCanvasタグのサイズを変えても、スマートフォンの画面にはフィットしません。
これを以下のように書き換えるとスマートフォンの画面にフィットするようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="test.js"></script>
<script>
var canvas, stage, exportRoot;
var real_canvas, realContext;
function init() {
real_canvas = document.getElementById("real_canvas");
real_canvas.width = document.body.clientWidth;
real_canvas.height = 400 * (document.body.clientWidth / 550);
realContext = real_canvas.getContext("2d");
canvas = document.createElement("canvas");
canvas.setAttribute("id","canvas");
canvas.setAttribute("width","550");
canvas.setAttribute("height","400");
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(10);
//createjs.Ticker.addListener(stage);
createjs.Ticker.addListener(window);
}
function tick()
{
//createjsレンダー
stage.update();
//本番レンダー
realContext.clearRect( 0 , 0 , real_canvas.width , real_canvas.height);
realContext.drawImage(canvas, 0, 0, real_canvas.width , real_canvas.height);
};
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas-->
<canvas id="real_canvas" width="100" height="100" style="background-color:#ffffff"></canvas>
</body>
</html>
まず元々あったCanvasは
<!--canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas-->
のようにコメント化して無効化してしまいます。もちろん削除でも構いません。
<canvas id="real_canvas" width="100" height="100" style="background-color:#ffffff"></canvas>
のように新しいCanvasを作ってあげます。 後でスマートフォンにフィットさせるので画面サイズは適当に小さいものにしておきます。
bodyタグには
<body onload="init();" style="background-color:#D4D4D4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
として上下左右に余白が出ないようにしています。これは古い書き方で、いまはスタイルシートでやるようですがiPhone、アンドロイドともこれでも大丈夫なようです。
var real_canvas, realContext;
で宣言しておいて
real_canvas = document.getElementById("real_canvas");
real_canvas.width = document.body.clientWidth;
real_canvas.height = 400 * (document.body.clientWidth / 550);
realContext = real_canvas.getContext("2d");
でreal_canvasの方を、スマートフォンの画面にフィットさせます。
ここでは、横画面に合わせて縦も変えています。
createjsがレンダリングするcanvasをコメントアウトして無効化してしまったのでjavascriptで作ってあげます。
canvas = document.createElement("canvas");
canvas.setAttribute("id","canvas");
canvas.setAttribute("width","550");
canvas.setAttribute("height","400");
こうする事により、画面に表示されずメモリ内だけでレンダリングするようになります。
createjs.Ticker.addListener(stage);
を
createjs.Ticker.addListener(window);
へ変更。
こうする事により、自作のtickメソッドがFPS（フレームレート）単位で呼び出されるようになります。
後はtickメソッドの中で
function tick()
{
//createjsレンダー
stage.update();
//本番レンダー
realContext.clearRect( 0 , 0 , real_canvas.width , real_canvas.height);
realContext.drawImage(canvas, 0, 0, real_canvas.width , real_canvas.height);
};
と書けば終わりです。
createjs.Ticker.addListener(window);
にした場合、createjsのFPS単位でのレンダリングが自動で行われなくなるので
stage.update();
でcreatejsのレンダリング命令を呼びだします。 これでメモリ内のcanvasが通常に動くようになるので、実際画面に映っているreal_canvasに、メモリ内のcanvasをreal_canvasの大きさに合わせて複写するのです。
realContext.clearRect( 0 , 0 , real_canvas.width , real_canvas.height);
realContext.drawImage(canvas, 0, 0, real_canvas.width , real_canvas.height);
実質的に、画面に写っているCanvasに色々命令をかいて描画するより、一旦メモリ内で生成してから画面に映ってるCanvasに一回で複写したほうが、パフォーマンスも向上します。
テーマ:JavaScript - ジャンル:コンピュータ
投稿日：2013-03-20 Wed
フッチーです。つい先日、音読み込みのブログを書いたばかりですが、ここ数日Androidの音読み込みで悩んでました。
実験の簡単なプログラムは、うまくいくのに、テストゲームではうまくいかない・・・・何故だ。
そんなときピンときました。
iOSだと、ブラウザページをホームアプリのように登録できますが、設定するアイコンファイルがBasic認証かかってると読み込めなくてページのキャプチャー画面になってしまうのですが、まさか同じではないかと・・・
うまく言ってる実験プログラムを、Basic認証かかってるところにコピー・・・・実験開始。
やっぱりうまくいかない。 勘はあたっているようです。
テストゲームアプリが読み込む音ファイルをBasic認証がかかってる相対パスのファイルから。Basic認証のかかってないURLの音ファイルにパスを変えてみました
無事読み込み終了・・・・・疲れました。
ちなみにiOSは、Basic認証かかってても、ちゃんと読み込んでくれます。
テーマ:JavaScript - ジャンル:コンピュータ
投稿日：2013-03-16 Sat
フッチーです。クリエイトウェーブはスマートフォンのHTML5ゲーム案件の相談が多くなってきました。
もちろんActionScript3相談も未だ多いですが、unityとHTML5ゲームの方が比率が大きくなってきてるのは確か・・
さて、iOSのsafariで音声を再生する時に、タッチイベント時にしか再生出来ないという内容の情報を良く目にしますが、これは大きな間違いです。あまりにそういう情報が多いので自分もしばらく勘違いしてました。
音声再生にタッチイベントが必要なのではなくて、音声ファイルをロードするのにタッチイベントが必要なのです。
一度読み込まれた音声は破棄しない限り、何時でも好きなタイミングで再生する事が出来ます。
ゲームなどでは、音声が遅延するのは致命的なので、いわばプリロードさせる為にタッチイベントが必要という事になります。
例えば、タッチされた瞬間に
var audioObj = new Audio("音声ファイルのパス");
audioObj.addEventListener("canplay", function()
{
//ここが呼び出されるとロード完了
});
audioObj.load();
もっと良い書き方あるかもしれないけど、自分はこんな風にかいてます。
後はタッチイベント関係なしに好きなときに
audioObj].play();
とかしてやれば音声は再生されるようになります。
iOS5までは、1音のみしか再生されず同時再生は不可能でしたが、iOS6は出来るようです。 何音までOKなのか未だ把握していないです。
アンドロイドは、タッチイベント要るのか自分も未だ把握してないけれど同じ方法で、とりあえず手元にあるアンドロイド4と2.3の機種は同じ方法で再生されました。OGGは出来る機種と出来ない機種があったけど、Mp3とAACは実験した端末は全てうまくいった。
どこかのサイトでAACはアンドロイドはサポートしてないみないな情報をみたんですが違ったようです。
OS4はともかく、2.3は全機種音声再生されるのだろうか？ 2.2はブラウザに、そもそも音声コーデックが載ってないとかで再生不可能なのですが、2.3は機種によってはという内容の情報を見た気がする・・・
とても気になってます。
テーマ:JavaScript - ジャンル:コンピュータ
投稿日：2012-09-29 Sat
フッチーです。本日は、クリエイトウェーブ開発日記には珍しく過激な発言も・・・
モバイルアプリ開発者は、Facebook と HTML5 に失望
のニュース。
HTML5開発に不満の意見もかなり多数。
FacebookのMark ZuckerbergもFacebook の最大の過ちは、ネイティブアプリではなく HTML5 に賭けたことだった、と語っている。 だそうです。
HTML5は話題性だけは凄かったわけですが、段々とみんな真実が判ってくるんではないだろうか。
天下のMark Zuckerbergさんも、経営や営業の人で開発現場の事は判ってなかったって事なのでしょうか。
まさか、HTML5が、ここまでダメダメだなんて・・・想像してなかったとかｗ
"さよならFlash!"は本当か? HTML5トレンドに潜む5つの誤解
にもありますが、まだとてもFlash並とは言えない。
個人的にも、なにがいいのかさっぱりです。
クリエイトウェーブは、Flash（ActionScript3）も、HTML5（Canvas)もかなりやってて、実績も数多くあります。
両方ともプロフェッショナルです。
両方とも良く判るからこそ思う・・・Flashに戻るのが幸せなのではないかと。
HTML5は、かなり難しいので、いままでのWeb会社とか、Flashで食べてたクリエータさんには、かなり厳しいものがあります。
だからこそ、jActionを開発した訳ですが、jActionでもFlashCSを使わずにFlexSDKやFlashBuilderでActionScript3のみでFlashアプリを制作するぐらいのスキルレベルが必要なのです。
クリエイトウェーブは、FlashだろうがHTML5だろうが、柔軟に対応しちゃいますが、一般クリエータには、かなり厳しい気がして・・・クリエータ切りになっちゃいますよ。
クリエートウェーブみたいにプログラマー色が強くない所は、CSS3とかjQueryとかを使った演出とかのサイト制作とかに集中することになって、それで叩かれて単価もどんどん落ちてしまうのではないだろうか。
そんな懸念も思ったりしています。自分達はそういうサイト制作とかは、あまり縁がないので関係ないといえば関係ないですが、業界はある意味活性化して欲しいし。
HTML5は、開発コストがFlashより全然高いのに、パワーがFlashより全然ないという困った存在です。
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較
の内容は、両方ともよく作る身としては、ものすごく実感なのです。
とはいってもAppleさんが、iPhoneにFlashを受け入れてくれないと、どうにもならないんですけどね。
とりあえずは、HTML5でガンガン仕事していきます。
テーマ:JavaScript - ジャンル:コンピュータ
△ PAGE UP