tomo.mobi

Representation design of material


html5 canvasサンプル作成ひと区切り

最適化とまでは言わないけれども、jsの圧縮やpngの圧縮をしました。
容量を減らす事が出来たのでContent Downloadの時間は圧縮されました。

また、データの圧縮の他に処理の見直しを行ないました。
ifをswitchに変えたりvalueの変更を一カ所で行なったり。
また、スコアのずれが分かりにくいようにスコア表示を何回勝ったかの表示に変えましたwww
リザルトへ遷移する為には10回以上勝たないと遷移できないようにしました。

いろいろ変えてみたけれども、今回作ったサンプルは特別重たいコンテンツではないからか変化は実感できないけど・・・。
http://www.tomo.mobi/test/canvas/jyankenSample.html

ここから、更に作り込みも出来るのですが今はまだ勉強中で作った物もサンプルなのでまた別途コンセプト等をキチンと考えたりして作ってみたいと思います。

Published by tomoka , on 11月 21st, 2015 at 11:18 pm. Filled under: 未分類No Comments
この記事を読む

フィードバックに関して思った事メモ

処理を順序よく進めたい為に、アニメーションの終わりを確認してからの次のアクションを進めると考えてボタンにflagを付けたりして、eventする時としない時を制御することを考えてみたけれども、実際組み込んでみると、「なんで押したのにFBが無いんだろう?」「event進んでいるのかな?」等々、???が増えました(個人的感想)。

押せないflagが立っている時は押してもイベントが進まない事が伝わる、比較的簡単な見せ方またはオーバーなリアクション等で変える事を考えたのですが、今一度、考え直し・・・。今までキューが溜まると進めていたアニメーションをstop();させて、次のアニメーションを動かすように書いていたので、同じように進めているアニメーションをカットしてしまえば??と・・・。

ただ、今回の該当する問題アニメーションはMCの中で終わらさせていたので、stop().MC_anime01.play();なんて書く訳にもいかないので、MCフレーム内のアニメーションが途中でも、後で動いたイベントの為に前に動いていたアニメーションのフレームをもどしてしまうのが良いとおもいました。(現在.animate()しているのを.stop()するのと同じような事 ※jQuery)

実際にやってみて、ボタンを押すと反応がすぐに返ってくるので、もやもやした気持ちも薄くなり、???が減りました。
見た目にも次のアニメーションを発火させた事を閲覧者は認識しているので、前のアニメーションが終わっていないとは思われにくからでは?と思いました。

アニメーション途中でもフィードバックのほうが大事。最上位。
違和感無く触らせる事がとても重要な事を再認識しました。

なお、現時点でPCでは点数加算の遅延はほぼ見られないけれども、スマホで見ると時々スコアの追加とアニメーション周りでずれが起こっているみたい。そもそも、処理を見直す必要があるのと、jsやpng等を圧縮して最適化してみるのとかとか。すぐではないけれども、もう少ししたらやってみる。

Published by tomoka , on 11月 18th, 2015 at 11:19 pm. Filled under: 未分類No Comments
この記事を読む

addEventListener()は必ずremoveしなくてはならない

addEventListener()ではまったのでメモ。

今作っている「じゃんけんゲーム」のボタンインスタンスに付与するイベントリスナー。
フレームを使い回して、シーンを回すことってあるとおもうのですが、フレームにボタンを配置して配置したボタンにイベントリスナーを付与すると通過するたびにイベントリスナーが増えてゆく・・・・。1回目通過は1つだけだけど、2回目通過は2つになって2回実行される・・・orz

これが原因でスコア表示がおかしくなっていました。
そこで、必ずイベントリスナーを削除する修正追加しました。
少しはまともに動くようになったかな。
画面の完成度はまだまだです。でも、一応動くようになりました。
なお、負け=-1点 勝ち=+2点 あいこ=+1点 でスコアが10点よりも多くなったらリザルトへ遷移する仕様です。よって、スコアが10点になっても、10点を超えないとリザルトへはとばないです。

手持ちのiPhone6で見てみたけど、スマホでも動く。うんうん。
でも・・・加点の点数表示アニメーションに遅延が発生している気配。

Published by tomoka , on 11月 10th, 2015 at 11:24 pm. Filled under: 未分類No Comments
この記事を読む

HTML5 canvasのスコープに関して注意

flashでHTML5 canvasからつくるjavascriptはフレーム毎function関数の中に格納されるので、フレームで指定した関数はローカルになるようです。グローバルにしたい場合はjavascriptなのでそのまま定義します。

Lite1.1を思い出す。
HTML5 canvasだとswfのようにある程度制限された領域での問題ではなくなり、jsで動く解析ツールとか一緒に入れちゃったら、ひっちゃかめっちゃかになりそうなので、関数表なる記述を1フレーム目や一番上のレイヤーに記述しておいて、しっかり管理する必要があるとおもった。数が多くなりそうだったら、いままでとおりinitフレーム等にグローバル関数は記述するのがよさそう。(名称の重複が怖いので、フレーム名とローカル関数もある程度書くようにしたほうがいいかも。)

ここは、HTML5 canvas独自のflashみたいにparentとかrootとかあると良いんだけど。
ちなみに、フレームのjsは以下のような感じで吐き出される。

function frame01(){ //フレーム毎できあがる。
var kansu01;
}

function frame02(){ //フレーム毎できあがる。
var kansu02;
}

Published by tomoka , on 11月 10th, 2015 at 12:09 am. Filled under: 未分類No Comments
この記事を読む

SVGのエラーメモ

メモを残しておこうと思っていた。
思い出したのでメモブログの本領発揮。

エラーが出ない

無い要素の定義
var obj1 = document.getElementById(“container”);
※xml上になくてもエラーが出ない。
勘違い系
var svg1 = document.getElementById(“svg”);
※xml上にid=”svg”なくても勝手に<svg/>とか、<g/>に指定したid=”svg1″とかとか・・・等が定義されてエラーが出ない。これによって、矩形を描画する場所の表示に不具合が出る。

エラーが出る

無い要素への設定
obj1.attr().animate();
※指定したobjが無いとエラー。これは、当たり前かも・・・。

Published by tomoka , on 11月 8th, 2015 at 11:36 pm. Filled under: 未分類No Comments
この記事を読む

functionのなかからthisのvalue.textを更新する

flash canvasめも.

もう1つはまった。functionの中から、たとえば、this.textScore.textの中身を更新しようとして、this.textScore.text=”何かしらの値”としても、Uncaught TypeError: Cannot set property ‘text’ of undefinedとされ、更新されないです。

なので、おまじない?なのか、var that = this;として、記述し直します。
that.textScore.text=”何かしらの値”
あと、自分でjsを追加する時は定義(var)を忘れずに。

以下、サンプル。

var count_score = 0;
var that = this;

function jankenEvent() {
	kekka = Math.floor(Math.random() * 3);
	switch (kekka) {
		case 0:
			kekka_text = "ぐー";
			count_score = count_score + 2;
			that.text_score.text = count_score;
			break;
		case 1:
			kekka_text = "ちょき";
			count_score = count_score + 1;
			that.text_score.text = count_score;
			break;
		case 2:
			kekka_text = "ぱー";
			count_score = count_score + 3;
			that.text_score.text = count_score;
			break;
		default:
			break;

	}

	console.log(kekka);
	console.log(kekka_text);
	console.log(count_score);

}
Published by tomoka , on 11月 8th, 2015 at 11:25 pm. Filled under: 未分類No Comments
この記事を読む

flashの「HTML5 Canvas」で未定義のプロパティーエラー

flashつかってさくさく快適canvas♪
と思っていたら、ボタンのイベントリスナーの付与の部分ですこしはまったのでメモ。

1フレームでスタートボタン
2フレームでメインループに入り3種類のボタンを配置したら、3っつめのボタンで必ず以下のエラーが。
Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined
しかも、この3っつめのボタンのエラーの為、1フレーム目のスタートボタンすら反応しない・・・orz

3っつめのボタンのインスタンス名が読み込まれていない感・・・
で、ここはしょうがないので、パブリッシュで生成されたjsを見てみると。

なぜか、3っつめのボタンの定義が書いていない(T_T
しょうがないので、自分でボタンの定義を書く・・・

 this.btn_choki = new lib.btn1();
 this.btn_choki.setTransform(335.5,336.4,1,1,0,0,0,55,24);
 new cjs.ButtonHelper(this.btn_choki, 0, 1, 1);

すると、ちゃんと動きました。

でも、パブリッシュするたびにこのバグが出るのは辛い。
ボタンの設置の手順が悪かったのかな?
いままでflashでコンテンツ作る時のように煩雑に気軽に作ってしまっていたから?

まだまだ新しいメニューの「HTML5 Canvas」だし、
癖を知る為にもObjの設置の手順を見直してみようと思います。

後日談
ボタンインスタンスをボタン毎に作ったらキチンと登録されました。
使い回し厳禁なのかな??

Published by tomoka , on 11月 8th, 2015 at 10:07 pm. Filled under: 未分類No Comments
この記事を読む

canvasでじゃんけんゲーム

canvasでじゃんけんげーむをつくってみる。
まずは、ひな形。

 <html>
 <head>
 <meta charset="utf-8" />
 <title>CANVASサンプル「じゃんけん」</title>
 </head>
 <style>
 body{
 text-align: center;
 }
 </style>
 <body>

 <!-- ヘッダ -->
 <header>
 <h1>CANVASサンプル</h1>
 </header>

 <!-- メインコンテンツ -->
 <article>
 <hgroup>
 <h1>じゃんけん</h1>
 </hgroup>
 <aside>
 <p>ボタンを押すとじゃんけんできます</p>
 <canvas id="canvas" width="500" height="500" style="display:block; margin:10px auto;border:solid 1px #ccc"></canvas>
 </aside>
 </article>

 <!-- フッタ -->
 <footer>
 Copyright 2015
 </footer>
 <script>
 function loop() {
 /* Canvas要素の定義など */
 var cs = document.getElementById('canvas');
 var ctx = cs.getContext('2d');
 var w = cs.width;
 var h = cs.height;
 var ww = window.innerWidth;
 var x = 0;
 var mouseX;
 var mouseY;
 
 /* 舞台用意 */
 function render() {
 ctx.clearRect(0, 0, w, h); // Canvas全体をクリア。必ず必要ないと何度も書き直しー

 ctx.beginPath();

 //ぐー
 ctx.strokeRect(105, 65, 287, 287);
 //ちょき
 ctx.strokeRect(28, 400, 141, 63);
 //ぱー
 ctx.strokeRect(179, 400, 141, 63);
 //ランダム表示
 ctx.strokeRect(329, 400, 141, 63); 

 ctx.stroke(); //これをきじゅつしないと描画されない

 }
 render();
 document.addEventListener('mousedown', test);

 function test() {
 mouseX = event.pageX-((ww-450)/2);
 mouseY = event.pageY-200;
 render();

 //hitTest
 if(mouseX<169 && mouseX>28 && mouseY<463 && mouseY>400 ){
 console.log("ぐー");
 jankenEvent();
 }
 if(mouseX<320 && mouseX>179 && mouseY<463 && mouseY>400 ){
 console.log("ちょき");
 jankenEvent();
 }
 if(mouseX<470 && mouseX>329 && mouseY<463 && mouseY>400 ){
 console.log("ぱー");
 jankenEvent();
 }
 }
 function jankenEvent(){
 var kekka = Math.floor(Math.random()*3);
 var kekka_text;
 switch(kekka){
 case 0:
 kekka_text = "ぐー";
 break;
 case 1:
 kekka_text = "ちょき";
 break;
 case 2:
 kekka_text = "ぱー";
 break;
 default:
 break;
 }
 ctx.fillText(kekka_text, 225, 215);
 console.log(kekka);
 console.log(kekka_text);
 };
 }
 //ハンドラー
 loop();
 </script>
 </body>
</html>

とりあえず、PCで作ってみる

Published by tomoka , on 11月 6th, 2015 at 11:08 pm. Filled under: AndroidNo Comments
この記事を読む

canvas

canvasはじめました。
svgのアニメーションはCSSに頼る事が多い事もあったりなのでCSSに頼らなくても良いように。
canvasは毎回再描画するので、ビットマップとして扱うためCSSに頼らなくても良い。
それに、何と言ってもFlashで作れる♪↑↑↑

svgはデータと連動する拡大縮小するコンテンツとかが適しているのかもと思いました。
これは個人的な見解ですが、データの表現やmapの描画などに対して、拡大縮小をシームレスに行なえるので相性がよいのではないかと。(拡大可能なベクターグラフィック(Scalable Vector Graphics)ですから・・・)
もちろん、svgはhtmlにパスとして埋め込めるので、canvasよりもhtmlのDOMと親和性が高いと想定しています。

もう少し、見渡して特徴を理解する必要があるので、情報収集をしたいと思います。
ということで、基礎のメモ。
参考サイト:http://www.html5.jp/canvas/index.html

Canvas要素の定義
var cs = document.getElementById(‘c1’); ←<canvas id=”c1″ />を指定

/* getContext()メソッドで描画機能を有効にする。 */
var ctx = cs.getContext(‘2d’); ←ここの引数には’2d’しか渡せません。
var w = cs.width;
var h = cs.height;
var x = 0;

Canvas全体をクリア
ctx.clearRect(0, 0, w, h); ←これを忘れると描画が重なり大変な事に・・・

パスの登録:1つしかパスは保存できません
ctx.beginPath();
ctx.strokeRect(x, x, 10, 10); ←四角を書いてます。描画したい矩形によりメゾットが違います。

ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true); ←円弧のパスを保存
ctx.stroke(); ←円弧のパスを描画

パスの追加
パスを新たに作るときは、beginPath()メゾットをふたたび呼びます。
/* パスを初期化 */
ctx.beginPath();
/* 一つめのサブパス */
ctx.moveTo(30, 10);
ctx.lineTo(45, 50);
ctx.lineTo( 5, 50);
ctx.closePath(); ←svgのzとおなじ

描画のハンドラー
setInterval(render, 100);
※setTimeout()、requestAnimationFrame()もいいよ。

画像の読み込み
画像のロードに失敗すると描画出来ない(あたりまえ)なので、データをロードしたかどうかのチェックを入れると良いそうです。http://www.html5.jp/canvas/how6.html
でも、入れるタイミングを間違えると画像がちらつくので、組み込み方法に関しては実際コンテンツを作る時に対応を考えるのが良さそうです。

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  /* Imageオブジェクトを生成 */
  var img = new Image();
  img.src = "image2.gif?" + new Date().getTime();
  /* 画像が読み込まれるのを待ってから処理を続行 */
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  }
}

というわけで描画も確認したいので、とりあえずいろいろと落書きしてみました。
http://www.tomo.mobi/test/canvas/rakugaki.html

Published by tomoka , on 11月 5th, 2015 at 11:11 pm. Filled under: 未分類No Comments
この記事を読む

loading test

http://www.tomo.mobi/test/snap/roundLoder_snap.html

装飾も作り込みも無い感じだけれども。
かくかくかく・・・・。

背景やいろいろ付け加えてみた。
http://www.tomo.mobi/test/snap/roundLoderSample_snap.html

このおおきさだったらcanvasの方が軽いのかな?
それとも、DOM操作のCSS+jsアニメーションの方が実用的なのかどうか。
もう少し使い続けたり、情報集めないと。

Published by tomoka , on 11月 2nd, 2015 at 11:31 pm. Filled under: 未分類No Comments
この記事を読む