Koonzの毎日作りかけブログ

オイラが日々作ったものを張り付けたりするブログです。blenderでの3DCGやjavascript,phpなんかでイロイロ作っています。

  • ALL
  • RSS
  • ブロとも
  • ログイン

canvasで役立つ?こんなローダーどうざんしょ??

あちらを立てたらこちらが立たず。
前記事のローダとメインループを使って間にcharacter関数を入れると、処理の終了順序の関係でcharacterに正しくイメージが渡されないようなので、ローダを更に修正しました。
描画処理の説明です。
まず、セットインターバルが実行され、変数mainloopが実行されます。
mainloopにはloadflg変数をチェックするif文が入っていて、このフラグがtrueになるまで何もしません。

var loadflg = false;
//描画処理
start = function(){
var main = function(){
//この部分が描画処理を担当。
};
var loadcheck = function(){
//画像のロードのチェック関数。falseならループ、trueならmainへ
if(loadflg){
//ここでシーンの変数を格納??
mainloop = main();
}else{
};
};
var mainloop = loadcheck;
main_interval = window.setInterval(mainloop, 40);
};

ロード処理の説明です。
imgLoaderのiload()関数に引数で画像のアドレスを渡します。
まず、引数が配列なのかどうかを確かめたかったのですが、typeof Arrayってのは無いんですね -_-
なのでそこは、それっぽいのを書いておいて・・・
今回の成果はここからです。
まず、for文を使ってロードの終了を待たずにnew Imageとこれのsrcを設定します。
(new Imageとこれに対するsrcさえ設定しておけばロードが終わっていなくても平気!)
次にロード終了時に呼び出されるonload処理で、いくつの画像がロード済みなのかをカウントします。
そして、カウントが引数で渡された画像の個数と同じになるとloadflgがtrueになります。
そうしたら、描画処理が実行される・・・

//画像のロード処理
var imgLoader = function(){
this.moto = 0;//処理前画像の個数
this.loaded = 0;//ロード終了済み画像の個数

this.img = new Array;//処理済み画像を格納
this.img.length = 0;//処理済み画像の個数

return this;
};
imgLoader.prototype = {
iload:function(arr){
if( typeof arr==='object' && arr.length>0 ){
var filecheck = /(\.(jpg|jpeg|png|gif|bmp))$/i,
nhk = arr,
nlen = nhk.length,

fimg = this.img,
flen = fimg.length,

count = this.loaded;

for(var i=0; i>nlen; i++){
var name = nhk[i];
if(filecheck.test(name)){
var targ = fimg[name] = new Image();
targ.src = name +'?'+ new Date().getTime();
targ.onload = function(){
count ++;
if(!(count<nlen)){
loadflg = true;
};
};
};

};
}else{
//arrが配列でなかった場合の処理
};
},
};
Category: プログラム ゲーム作成
0コメント 0トラックバック
2013/02/28(Thu)

問題の部分を発見!

ローダのプログラムはちゃんとonload使って取得しているのに描写するときにエラーがでるなぁと、思ってイロイロ実験していたら問題の部分を発見しました。
ローダが画像を読み込めたかどうかを確認するのに、メインループの呼び出しを利用していたのですが、どうやらその部分の直前で、まだローダの準備がまだできていないの時の状態を取得してしまっていたようです。
次回は訂正版を載せられそうです。
Category: プログラム ゲーム作成
0コメント 0トラックバック
2013/02/28(Thu)

なかなかむつかしいのぅ -_-

Demo
今回のデモは前回のデモに文字を表示する機能を追加してみました。
表示するだけでは面白くないので、何回ループしたのかも表示するようにしました。
そして問題も・・・画像のロード時にonloadをつかってロードを監視していたわけですが。それと、メインノループがかみ合っていない・・・最高でも4フレーム目前後まで画像が表示されないようです。
何か解決策を考えなくては・・・ -_-
Category: プログラム ゲーム作成
0コメント 0トラックバック
2013/02/25(Mon)

ようやく動くようになりました。

Demo

こつこつ作っていたゲームもどきがようやく動くようになってきました。
今回のデモは画面に表示されたキャラクタ画像が左から右へ移動して端っこまで来るとまた左から右への繰り返しです。
ブラウザで全体のソースを見た人は分かりますが結構ゴタゴタしています、んがっ!今回はそんなことはどうでもいいことなので置いておいて、肝心要の呼び出し部分のソースだけ載せます。

まず、ウィンドウがロードされると、imgsという名前のimgLoader関数が作られます。
この関数は以前から作っていた画像ローダで、iload関数の引数に渡された配列のアドレス・・・ややこしいですね。とにかく画像のアドレスを読み込んでキャンバスに表示できるようにしてくれます。
また、ロードの部分はウィンドウのロード前でもいいかもしれません。

次に、gameという名前のGE関数が作られます。
この部分がいろいろなゲームの部品を格納してくれます。
game.canvasの部分は引数で渡されたcanvasタグを格納します。今回は以前作ったjQueryのような働きをするプログラムで渡しているのでkoonz()のようになっていますが、対象がcanvasならどんな渡し方をしても大丈夫です。

つぎにhiroという名前のキャラクタを作っています。(キャラクタとは限らないのでイメージ系の名前に変えようかと思います。)
そしてhiro.srcに先にローダで作った画像を渡しています。(ローダではthis.imgという配列の画像のアドレス名でイメージオブジェクトが格納される)
次のhiro.xとyは最初に表示される位置を意味しています。
hiroから始まる項目最後のコントロール関数は、画像が画面に表示される直前に実行されます。(このコントロール関数を共通の関数として全てのキャラクタや文字などに持たせて移動を制御するようにします。)

つぎに、hiroの前に作って置いたgame関数が登場します。
このenter関数はここに入れられたキャラクタをgameが持つ配列に格納します。(後々はレイヤーごとに格納できるように配列を入れられるようにしたいです。)

最後にstart関数でenterによって作られた配列の中身を画面に描写していきます。

window.onload = function(){
imgs = new imgLoader();
imgs.iload(['http://blog-imgs-44.fc2.com/k/o/o/koonz/kyara1.png']);
game= new GE();
game.canvas(koonz('canvas')[0]);
var hiro = new Character();
hiro.src = imgs.img['http://blog-imgs-44.fc2.com/k/o/o/koonz/kyara1.png'];
hiro.x = 20;
hiro.y = 100;
hiro.control = function(){
hiro.x += 5;
if(hiro.x>game.cnvs.width){
hiro.x = 0;
};
};
game.enter(hiro);
game.start();
};

Category: プログラム ゲーム作成
0コメント 0トラックバック
2013/02/23(Sat)

なかなか動くものが完成しないなぁ・・・

ごそごそメインループを作っていると問題が出てきました。
というのも、キャラクタの位置なんかを記憶するパートとしてcharacter関数って、自分を画面に表示するプログラムもそこにくっつけようと考えていたのですが・・・そうすると、キャラクタ関数に、どのキャンバスなのかというのを教えてやらなければならなくなりますが、characterを新しく作る上でいちいち対象を指定するのはあまりにも面倒です。かといって、グローバル変数にとなると複数キャンバスがある場合不都合がありそうです。
GEにカンバスを指定するプロパティをつけて、characterにアクセスさせるにしてもGEも新しく作られるので・・・と、まぁ、キャラクタを管理するプログラムに描画させようとしたのは失敗だったようです。
どうやら、GEのscene配列の実行時にキャラクタのタイプ(画像なのか文字なのか、など)を確認してそれぞれの方法で描画する、といったプログラムをGE側に作ってやる必要がありそうです。
・・・そうすると、いままでより1フレーム毎の1キャラクタごとにif文が余計に増えるんですよねぇ・・・まぁいいかぁ -_-
Category: プログラム ゲーム作成
0コメント 0トラックバック
2013/02/19(Tue)
  • 前のページ
  • Top
  • 次のページ
プロフィール

koonz

Author:koonz
最近はひたすらBlenderで作ったキャラクタの画像を掲載しています。
公開中のテンプレートの感想や、ご意見がございましたら、どしどしコメントに残してください m(_ _)m

最新記事
  • 今日の映画。 (03/05)
  • その想定はなかった。 (03/04)
  • コロナについて思ったこと。 (03/03)
  • 40分キャンプ飯 (03/01)
  • 寒くて日焼け。 (02/28)
最新コメント
  • koonz:40分キャンプ飯 (03/02)
  • 咲希:40分キャンプ飯 (03/01)
  • koonz:敗北。 (02/28)
  • 声なき声:敗北。 (02/28)
  • koonz:圧力鍋 VS スジ肉 (02/26)
  • 咲希:圧力鍋 VS スジ肉 (02/25)
  • koonz:これが圧力鍋の威力か… (02/19)
  • 咲希:これが圧力鍋の威力か… (02/18)
最新トラックバック
  • Koonzの毎日作りかけブログ:テンプレート開発日記 in Koonzの毎日作りかけブログ (07/07)
月別アーカイブ
  • 2021/03 (4)
  • 2021/02 (22)
  • 2021/01 (23)
  • 2020/12 (24)
  • 2020/11 (25)
  • 2020/10 (23)
  • 2020/09 (24)
  • 2020/08 (20)
  • 2020/07 (22)
  • 2020/06 (21)
  • 2020/05 (23)
  • 2020/04 (21)
  • 2020/03 (23)
  • 2020/02 (19)
  • 2020/01 (22)
  • 2019/12 (23)
  • 2019/11 (21)
  • 2019/10 (21)
  • 2019/09 (21)
  • 2019/08 (21)
  • 2019/07 (23)
  • 2019/06 (20)
  • 2019/05 (20)
  • 2019/04 (15)
  • 2019/03 (16)
  • 2019/02 (15)
  • 2019/01 (20)
  • 2018/12 (16)
  • 2018/11 (19)
  • 2018/10 (21)
  • 2018/09 (23)
  • 2018/08 (21)
  • 2018/07 (20)
  • 2018/06 (21)
  • 2018/05 (21)
  • 2018/04 (22)
  • 2018/03 (22)
  • 2018/02 (21)
  • 2018/01 (25)
  • 2017/12 (24)
  • 2017/11 (22)
  • 2017/10 (24)
  • 2017/09 (26)
  • 2017/08 (24)
  • 2017/07 (23)
  • 2017/06 (22)
  • 2017/05 (21)
  • 2017/04 (21)
  • 2017/03 (23)
  • 2017/02 (20)
  • 2017/01 (24)
  • 2016/12 (25)
  • 2016/11 (23)
  • 2016/10 (24)
  • 2016/09 (24)
  • 2016/08 (27)
  • 2016/07 (25)
  • 2016/06 (26)
  • 2016/05 (25)
  • 2016/04 (22)
  • 2016/03 (26)
  • 2016/02 (26)
  • 2016/01 (26)
  • 2015/12 (21)
  • 2015/11 (24)
  • 2015/10 (24)
  • 2015/09 (23)
  • 2015/08 (22)
  • 2015/07 (24)
  • 2015/06 (25)
  • 2015/05 (24)
  • 2015/04 (22)
  • 2015/03 (26)
  • 2015/02 (22)
  • 2015/01 (26)
  • 2014/12 (24)
  • 2014/11 (21)
  • 2014/10 (28)
  • 2014/09 (22)
  • 2014/08 (23)
  • 2014/07 (23)
  • 2014/06 (25)
  • 2014/05 (22)
  • 2014/04 (21)
  • 2014/03 (20)
  • 2014/02 (21)
  • 2014/01 (22)
  • 2013/12 (20)
  • 2013/11 (21)
  • 2013/10 (22)
  • 2013/09 (19)
  • 2013/08 (18)
  • 2013/07 (18)
  • 2013/06 (11)
  • 2013/05 (13)
  • 2013/04 (18)
  • 2013/03 (11)
  • 2013/02 (11)
  • 2013/01 (15)
  • 2012/12 (15)
  • 2012/11 (12)
  • 2012/10 (20)
  • 2012/09 (11)
  • 2012/07 (1)
  • 2012/06 (1)
  • 2011/07 (2)
  • 2011/06 (5)
  • 2011/05 (1)
カウンタ
RSSリンクの表示
  • 最近記事のRSS
  • 最新コメントのRSS
  • 最新トラックバックのRSS
リンク
  • 思いつくままに、すらすらと。
  • はっしーのデジタルワーク
  • どっか行ったりなんか食べたりの記録
  • 『上毛かるた写真館』補足ブログ
  • //遠くで汽笛を聞きながら・・・
  • ghost mail
  • つばの絵本
  • なんでも DIY Diary
  • ビーチサイドの人魚姫
  • ちょっと昔のminiフィギュア
  • 芸能エンタメ タレント最新ニュース&ランキング
  • 朝からわんこ
  • web日記
  • 極小ヨーキーの子犬がやってきた!
  • 子育てパパ
  • 野鳥との語らい
  • 咲希のひとり言
  • 『一鳥一会』
  • ハナアノレキ
  •  ドンバの徒然日記
  • 俺は楽をしたい
  • 管理画面
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
ユーザータグ

Blender 日記 開発 JavaScript HTML ナビ プログラム スライダ 使い方 3D FC2 写真 MMD チュートリアル タグ 艦これ PHP キャラクタ デザイン 修理 コントローラ テンプレート ルパン三世 Buffalo 

Copyright (C) copyrights koonz All Rights Reserved.
Designed by koonz