ゲレゲレです！

違いますって！全然飽きたとかじゃないですって！

ただちょっと本業の方が忙しくなってしまったのでちょっとお休みしていただけですってば！

…いやーホントに忙しかった。

堕天使エルギオスを倒して世界を救ったり、秘宝を78個集めて世界を救ったりね！

まったく。オレがいないと世界はすぐピンチに陥るからさぁ。

さて、では行きますか。

吉里吉里でオンライン対戦マリオブラザーズを作ろう！

第９回です！

つーことで今回はコリジョン判定です。

コリジョン判定ってのはオブジェクト同士が接触したかどうかをチェックするってことです。

マリオが敵と接触すると一機死ぬ、とか

マリオがジャンプしてブロックを叩く、とか

叩かれたブロックの上にいた敵はひっくり返る、とか。

そもそもマリオが地面に立ってる、なんてのにも使います。

今までは毎フレームupdate関数が呼ばれ、その中でキー入力などに応じてキャラクター（と他のオブジェクト）の

位置、状態の更新をしていました。

今度はそこにオブジェクトと衝突（コリジョン）しているかチェックを行い、衝突していたら位置の修正、状態の変化

などを追加します。

大体こんな感じです。

方向キーが入力された

→キャラクター位置の更新

　→移動先の位置で他のオブジェクトと衝突しているか？

　　→していたら衝突していない位置に戻す

　　→していなければそこに移動

あるいは、

方向キーが入力された

→キャラクター位置の更新

　→移動先の位置で敵キャラと衝突しているか？

　　→していたら死にモーション再生

　　→していなければそこに移動

で、当たってるかどうかの判定は

いろいろあるんですが、とりあえず四角形同士が重なってるかの判定でいいでしょう。

右上から当たってるか、左上から当たってるか、右下からあたってるか、左下から当たってるか、

自分より相手が大きい場合、自分がすっぽり相手に囲まれてしまっているか、

逆に自分より相手が小さい場合、相手が自分の中にすっぽり入ってしまっているか、

といったあたりをチェックすればOKです。

が、これを全オブジェクト同士で総当たりチェックするととんでもない回数の計算を

一フレーム内で行わなければならなくなります。

上のチェックだと一対一のオブジェクトで6パターンのチェックを行うわけですが、

対象オブジェクトが自機、敵１０体、弾２０個、障害物２０個なんてものを表示していたとすると

総当たりでは５１の階乗(約１．５５×１０^６６)回のチェックを行う必要が出てきます。

１０の６６乗って日本語でなんて言うのか知りませんが、ともかくあり得ないくらいデカい数字ってことです。

それに加えて同じフレーム内で画像の再表示やら、音の制御やら通信制御なんかもしなければならないわけで。

ともかく無駄な処理はできるだけ省きたいわけです。

ということで工夫が必要なんですが、要するに不要な判定はやりたくないということです。

で、どうするかというと。

まずは判定の必要なものをグループ分けする、とかですかね。

今は全オブジェクトを配列に突っ込んでおいて、ループでupdateをかけてるわけですが、

これをたとえば、プレイヤー配列、敵オブジェクト＆弾配列、障害物配列、自弾配列とかに分類しておくわけです。

とすれば、プレイヤーと自弾はあたりをチェックする必要はないですし、敵同士、味方同士なんて

無駄なチェックする必要はなくなりますよね？

もちろん仕様次第では必要になる時もありますが、その場合はグループ分けを考え直しましょう。

さてさて、これで万事OK！とおもいきや。これでもまだ無駄が多いわけです。

たとえば自機が画面左上にいたとき、画面右側にある敵やら障害物なんてのはチェックするまでもないですよね？

なので、画面を分割して、各オブジェクトがどこのエリアにいるかを逐次登録して、各エリアごとにそのエリア内にいる者同士でのみ判定を行うとよりいい感じになるわけです。

詳しくは４分木空間分割（３Dは８分木）でググってくだせい。

ただ、これはこれでやりゃあいいってもんでもないわけで。

あんまり細かく分割してもかえって登録の手間が無駄になってしまうし、大きく分割しすぎてもあまり効果がないし。

ってなわけで実際は扱うオブジェクトの数だとか、大きさ、空間の広さによってどの程度に分割するのが

最適かという調整が必要になってくるわけですね。

で、ウチの場合なんですけど。

実はここまで言っといてなんですが、４分木は使ってません。

なぜかというと、オレが作りたいのは初代マリオブラザーズ。

２人対戦だし。敵は一度に２，３匹でいいし。障害物だってせいぜい２０個くらい？

弾幕シューティングとかじゃないのでそんなにオブジェクト数がないので効果が薄い、

というか毎フレームごとに移動に伴うセルへの登録、削除のオーバヘッドの方が大きいから。

ま、２０人対戦とかにする時には考え直す必要があるかもですが。

つーことで、今回はグルーピングだけにしておきましたよと。

ではでは、次回、第１０回　敵キャラ（NPC）配置してみる！にてー。

ちょっといろいろバタバタありまして更新が滞ってしまっておりました。

このブログを楽しみにしてくださったいる方、いたらほんと申し訳ないです。

ちょいちょい不定期になるかもしれませんが、何とか完成まで続けたいと思っておりますです。

ではでは、

吉里吉里でオンライン対戦マリオブラザーズを作ろう！

第８回です！

さて、今回は予告通りオブジェクトを増やしてみましょう！

とりあえずマリオっぽい感じに土管とかブロックとか背景とか描いて、

オブジェクトとして配置してみました。

ということで以下ソース。

**********************************************************************

//オブジェクト管理クラス

class ObjectManager
{
var objects = new Array();
var win = null;
var par = null;
function ObjectManager(window, parent)
{
//ここで最初に必要なものを設定＆登録
//背景
add(new staticObject(window,parent,"bg.jpg",0,0,800,600,0,0,800,600,0));

//点数とか

//プレイヤーキャラクタ
add(new player(window,parent,"test2.png",100,540,50,30,0,0,50,30,100,0,0,1));

//敵キャラ

//地面
add(new block(window,parent,0,570,10));
add(new block(window,parent,30,570,10));
add(new block(window,parent,60,570,10));
add(new block(window,parent,90,570,10));
add(new block(window,parent,120,570,10));
add(new block(window,parent,150,570,10));
add(new block(window,parent,180,570,10));
add(new block(window,parent,210,570,10));
add(new block(window,parent,240,570,10));
add(new block(window,parent,270,570,10));
add(new block(window,parent,300,570,10));
add(new block(window,parent,330,570,10));
add(new block(window,parent,360,570,10));
add(new block(window,parent,390,570,10));
add(new block(window,parent,420,570,10));
add(new block(window,parent,450,570,10));
add(new block(window,parent,480,570,10));

add(new block(window,parent,600,570,10));
add(new block(window,parent,630,570,10));
add(new block(window,parent,660,570,10));
add(new block(window,parent,690,570,10));
add(new block(window,parent,720,570,10));
add(new block(window,parent,750,570,10));
add(new block(window,parent,780,570,10));

//障害物
add(new block(window,parent,100,100,10));
add(new block(window,parent,130,100,10));
add(new block(window,parent,160,100,10));
add(new block(window,parent,190,100,10));
add(new block(window,parent,220,100,10));
add(new block(window,parent,200,200,10));
add(new block(window,parent,230,200,10));
add(new block(window,parent,260,200,10));
add(new block(window,parent,290,200,10));
add(new block(window,parent,320,200,10));
add(new block(window,parent,300,300,10));
add(new block(window,parent,330,300,10));
add(new block(window,parent,360,300,10));
add(new block(window,parent,390,300,10));
add(new block(window,parent,420,300,10));
}

function add(obj)
{
//オブジェクトの登録
objects.add(obj);
}

function update()
{
for(var i=0; i< objects.count; i++){
objects[i].update();
}
}
}

//固定オブジェクトクラス

class staticObject extends Object
{
var hitAreaType;
var hitAreaLeft;
var hitAreaTop;
var hitAreaHeight;
var hitAreaWidth;
var animateType;
var animateFrameNum;
var animateTime;

function staticObject(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs)
{
super.Object(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs);
show();
}

}

//ブロック

class block extends staticObject
{
function block(window, parent, _x, _y, _abs)
{
var imgfile = "block.jpg";
var _w=30;
var _h=30;
var _uvx=0;
var _uvy=0;
var _uvw=30;
var _uvh=30;

super.staticObject(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs);
}

function update(){
if(!imageLayer.visible){
show();
}
}
}

**********************************************************************

前回からの変更点は大体こんな感じかな。多分。

で、こんな感じのものになりました。

うーん…できたexeをここに添付できないのかなぁ。

そろそろソース全部貼るのは大変になってきたし…

でも開発中をSyntheにUPするのもなぁ…

それはさておき、次はどうしようか。

まぁ、敵かコリジョン判定あたりかな？

そういえば当初目的としておりましたSyntheゲームコンテストですが、いよいよ締め切りが近付いてきましたね。

マズイ、ひっじょーーにマズイです！

全然間に合いそうにありません！

とりあえず適当にまとめてエントリーだけしておくか？

後で完成したらコンテストに関係なく一応UPしなおすとして。

せめて参加賞くらいはくれるかもしれんし…

うむ！この土日の進捗にかけるしかない！

ではまた！

すんません！金曜から諸事情により更新できませんでしたー！

今日からまたがんばる！

さて、それでは行ってみましょう！

吉里吉里でオンライン対戦マリオブラザーズを作ろう！

第７回です！

ということで、前回に引き続きクラス設計なんですが。

とりあえず前回の図に従って今までのコードをクラス化してみましょう。

基本的には、

・機能単位でまとめてクラスにする

・似た機能は共通機能を基本クラスにして、拡張版は継承を使う

・大きく分けるとオブジェクトとオブジェクト管理クラス、ウィンドウクラス

で、大体こんな感じになりますかねー。

**********************************************************************

//メインウィンドウクラス
class MainWindow extends Window
{
var primlayer;
var timer;
var objectManager;

function MainWindow()
{
super.Window();

// 下敷き(プライマリレイヤ)
add(primlayer = new Layer(this, null));
primlayer.left = primlayer.top = 0;
//ウィンドウのサイズを設定(800x600pix)
primlayer.imageWidth = 800;
primlayer.imageHeight = 600;
primlayer.setSizeToImageSize();
setInnerSize(primlayer.width, primlayer.height);
Plugins.link("wuvorbis.dll");//ogg再生用プラグイン読み込み→吉里吉里では必要、syntheでは不要

//オブジェクトマネージャーをインスタンス化
objectManager = new ObjectManager(this, primlayer);

//60FPS相当のスパンで登録されているオブジェクトの状態更新処理を行う
timer = new Timer(objectManager, "update");
timer.interval = 16;//約60fps
timer.enabled = true;

//ウィンドウ表示
visible = true;
}
}

class ObjectManager
{
var objects = new Array();
var win = null;
var par = null;
function ObjectManager(window, parent)
{
//ここで最初に必要なものを設定＆登録
//背景

//点数とか

//プレイヤーキャラクタ
add(new player(window,parent,"test2.png",100,570,50,30,0,0,50,30,100,0,0,1));

//敵キャラ

//地面

//障害物

}

function add(obj)
{
//オブジェクトの登録
objects.add(obj);
}

function update()
{
for(var i=0; i< objects.count; i++){
objects[i].update();
}
}
}

class Object
{
var imageLayer;
var win;
var par;
var x;
var y;
var w;
var h;
var uvx;
var uvy;
var uvw;
var uvh;
var abs;

function Object(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs)
{
win = window;
par = parent;
x = _x;
y = _y;
w = _w;
h = _h;
uvx = _uvx;
uvy = _uvy;
uvw = _uvw;
uvh = _uvh;
abs = _abs;
imageLayer = new Layer(win, par);
imageLayer.loadImages(imgfile);
imageLayer.setPos(x, y);
imageLayer.setSize(w, h);
imageLayer.imageLeft = uvx;
imageLayer.imageTop = uvy;
imageLayer.visible = false;
imageLayer.absolute = abs;
}

function show(){
imageLayer.visible = true;
}

function hide(){
imageLayer.visible = false;
}

function update()
{
}

}

class character extends Object
{
var dir;
var status;
var life;
var imageCounter;
var speed;
var ay;

function character(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs, _dir, _status, _life, _imageCounter)
{
dir = _dir; //キャラクターの向き　0:→　1:←
status = _status; //キャラクター状態　　0:通常
life = _life; //キャラクター生命値
speed = 4; //キャラクターの横方向への移動速度
ay = 0; //キャラクターの縦方向への移動速度
imageCounter = _imageCounter; //アニメーションのコマ数
super.Object(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs);
}
}

class player extends character
{
var jump;

function player(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs, _dir, _status, _life)
{
jump = 0;
super.character(window, parent, imgfile, _x, _y, _w, _h, _uvx, _uvy, _uvw, _uvh, _abs, _dir, _status, _life);
show();
}

function update()
{
//キーボードで入力されたキーを取得して画像の位置を移動
//←キーが押されてたら
if(System.getKeyState(VK_LEFT)){
//キャラがウィンドウの左端を超えてなければ右に移動
if(x > 0){
x -= speed;
}
//超えてたらそのまま
else{
x = 0;
}
}
//→キーが押されてたら
else if(System.getKeyState(VK_RIGHT)){
//キャラがウィンドウの右端を超えてなければ左に移動
if(x < (win.primlayer.imageWidth - imageLayer.width)){
x += speed;
}
//超えてたらそのまま
else{
x = win.primlayer.imageWidth - imageLayer.width;
}
}

//spaceキーが押されたら
if(System.getKeyState(VK_SPACE)){
//ジャンプ中でなければ
if(jump!=1){
jump = 1;
ay += 30;
}
}
//ジャンプ中
if(jump == 1){
//上昇中
if(ay > 0){
y = y - ay;
ay -= 2;
}
//下降中
else{
//着地前
if(y < 570){
y = y - ay;
ay -= 2;
}
//着地
else{
ay = 0;
y = 570;
jump=0;
}
}
}
//位置更新
imageLayer.setPos(x, y);

//画像のアニメーション
//uvをずらしてパラパラマンガ
//アニメーション(3コマ)は16fpsだと速すぎる
//20分の1くらいがいい感じ？
if(jump == 0){//ジャンプ中は止める
imageCounter++;
if(imageCounter > 20){
if(imageLayer.imageTop>-60){
imageLayer.imageTop -= 30;
}else{
imageLayer.imageTop = 0;
}
imageCounter = 0;
}
}

}
}

**********************************************************************

はい、そんなわけで、いつも通りこのコードもそのまま使えるですよ。

というわけで、動かしてみた人はわかると思いますが、できたものは第5回と同じものになります。

クラスという単位でバラバラにされてますが、コード自体は第5回の物とほとんど同じですよね。

ちょっと違うのは、ObjectManagerの存在でしょうか。

今まではMainWindowに直接持たせていた画像（キャラクタ）と、その動きに関する処理などを

objectクラスとしてまとめたので、それを操作するクラスですね。

部品とその使い手の関係になります。

できたもの自体は変わらないのですが、この構造にすることであとあと拡張がしやすくなってくるわけです。

というわけで、次回はオブジェクトを増やしてみる！にします！

ではでは本日はこれにて。

吉里吉里でオンライン対戦マリオブラザーズを作ろう！

第6回です！

ずっと一個の関数に処理を追加していたのでそろそろソースが見づらくなってきたと思います。

え。初めからソースが汚い？うるさいうるさいうるさい！このバカ犬ぅぅぅぅ！

と、いうわけで。

今日はクラス設計をちょいと考えたいと思います。

まず、ここで最終的に作ろうと思っているのは上のタイトルにもあるとおり、マリオですよね。

ということで、マリオを作るのに必要な要素を考えます。

まず、ウィンドウがいりますよね。で、その上に背景を表示して、点数とか文字とか残機が出て、マリオがいます。

あと、敵も出てきますね。それとブロック(床)とか水道管とか地面かな。あ、あとPOWブロックか。

だいたい、こんなもんでしょう。

で、これらを全部部品として考えて、似てるものは似てる部分をまとめます。

すると大体こんな感じになりました。

はい。わかります？これがクラス図ってやつです。

だいぶ簡略化してますが、大体こんなもんです。

で、これがプログラムの大体の設計図になるわけですわ。

もちろんこれが唯一の正解ってわけじゃないですが、こんなもんでいいのではないかと。

一応説明しますと、

まず、図中のオレンジの四角がクラスを表しています。

これがプログラムの部品です。

でもって、その上に重なって書いてある文字がクラスの名前です。

とりあえず適当に決めました。

で、それぞれの間にある矢印がお互いの関係を表しています。

よく見ると2種類ありますよね？

先が◆になってるやつと普通の→。

もちろんちゃんと意味がありまして。

まず、先が◆になってるやつ。

こいつはコンポジションっていうんですが、簡単に言うと

「矢印の元にあるものは矢印の先にあるものの部品です。」

という意味です。

次に普通の→。

これが継承ってヤツです。

これは、「矢印のもとにあるものは矢印の先にあるものの拡張版です。」

という意味です。

つまり、同じものを指してるやつらは同じ機能、特徴を持っているよ。ということです。

似てるけどちょっと違うものについて、わざわざ同じような処理をいちいち書くのは効率が悪いですよね？

なので、共通部分はまとめてしまっているわけです。

今回まとめたのは主に表示するモノのです。

つまり、マリオとか敵とかブロックとかですね。

これらはみんなウィンドウ上に絵を表示しますよね。

なので、これらの共通点として絵を表示する、という機能を持ったクラスをobjectクラスとして定義しました。

で、これを継承するのですが、マリオや敵は動きますが、水道管や地面、ブロックは動きませんよね？

なので、前者の機能をcharacterクラス、後者の機能をstaticObjectクラスとしてまとめます。

さらに、マリオはボタン入力で動かせますが敵は好きには動かせません。

なので、この違いをplayerクラス、enemyクラスとして分けました。

staticObjectの方も同様に、

ブロックは下からたたかれると変形して上にいる敵をひっくり返せますが、地面は変形しません。

なので、blockクラスとgroundクラスとして分けました。

POWブロックはblockクラスの継承にするか、内部で別処理にするかって感じですかね。

で、それらのオブジェクトを部品として持ち管理するのがobjectmanagerクラス、

さらにそれを持っているのがMainWindowクラスでその親クラスはTJS2標準のWindowクラス

というつもりで設計しました。

って実はこの辺はSyntheのサンプルをみて真似ただけなんですけど。

大体そんな感じですかね。

まだ背景とか点数とか漏れてるものがいくつかありますが、このあたりは適当に。

ではでは次回はこんな感じの設計を踏まえて、今までのソースを組み直してみましょう。

ということで、今日はここまで！

次回、クラス設計を考える！part2　でお会いしましょう！

吉里吉里でオンライン対戦マリオブラザーズを作ろう！

第5回です！

今回はそれをちょっと応用してキャラクターをジャンプさせてみます。

ということで、サンプルソース。

**********************************************************************

//メインウィンドウクラス
class MainWindow extends Window
{
var primlayer;
var timer;
var objectManager;
var commondata;
var imageLayer;//画像レイヤー
var imageCounter;//画像のアニメーション時間調節用カウンター
var jump;
var ay;
var speed;
function MainWindow()
{
super.Window();

// 下敷き(プライマリレイヤ)
add(primlayer = new Layer(this, null));
primlayer.left = primlayer.top = 0;
//ウィンドウのサイズを設定(800x600pix)
primlayer.imageWidth = 800;
primlayer.imageHeight = 600;
primlayer.setSizeToImageSize();
setInnerSize(primlayer.width, primlayer.height);
Plugins.link("wuvorbis.dll");//ogg再生用プラグイン読み込み→吉里吉里では必要、syntheでは不要
//ウィンドウ表示
visible = true;

//画像を表示
imageLayer = new Layer(this, primlayer);
imageLayer.loadImages("test2.png");
//画像表示位置(左上がx=0,y=0)
var x=100;
var y=570;
imageLayer.setPos(x, y);
//画像表示エリアサイズ設定(w:幅、h:高さ)
var w=50;
var h=30;
imageLayer.setSize(w, h);
//画像ファイル内の使用領域(UV)設定(左上がx=0,y=0)
var uvx=0;
var uvy=0;
imageLayer.imageLeft = uvx;
imageLayer.imageTop = uvy;
//表示状態(true:表示、false:非表示)→このパラメータを書き換えることで表示／非表示の切り替えをする
imageLayer.visible = true;
//描画優先順(複数の画像を重ねて表示した場合、この値が大きい方が手前に表示される)
var abs=100;
imageLayer.absolute = abs;
//画像アニメーションタイミング調整用カウンターを初期化
imageCounter = 0;

//キャラクターのジャンプ状態初期化
jump=0;
//キャラクターの加速度初期化
ay=0;
//キャラクターの左右への移動速度
speed=4;

//windowのupdate関数を実行
timer = new Timer(this, "update");
timer.interval = 16;//約60fps
timer.enabled = true;

}

function update(){
//キーボードで入力されたキーを取得して画像の位置を移動
var x = imageLayer.left;
var y = imageLayer.top;

//←キーが押されてたら
if(System.getKeyState(VK_LEFT)){
//キャラがウィンドウの左端を超えてなければ右に移動
if(x > 0){
x -= speed;
}
//超えてたらそのまま
else{
x = 0;
}
}
//→キーが押されてたら
else if(System.getKeyState(VK_RIGHT)){
//キャラがウィンドウの右端を超えてなければ左に移動
if(x < (primlayer.imageWidth - imageLayer.width)){
x += speed;
}
//超えてたらそのまま
else{
x = primlayer.imageWidth - imageLayer.width;
}
}

//spaceキーが押されたら
if(System.getKeyState(VK_SPACE)){
//ジャンプ中でなければ
if(jump!=1){
jump = 1;
ay += 30;
}
}
//ジャンプ中
if(jump == 1){
//上昇中
if(ay > 0){
y = y - ay;
ay -= 2;
}
//下降中
else{
//着地前
if(y < 570){
y = y - ay;
ay -= 2;
}
//着地
else{
ay = 0;
y = 570;
jump=0;
}
}
}
//位置更新
imageLayer.setPos(x, y);

//画像のアニメーション
//uvをずらしてパラパラマンガ
//アニメーション(3コマ)は16fpsだと速すぎる
//20分の1くらいがいい感じ？
if(jump == 0){//ジャンプ中は止める
imageCounter++;
if(imageCounter > 20){
if(imageLayer.imageTop>-60){
imageLayer.imageTop -= 30;
}else{
imageLayer.imageTop = 0;
}
imageCounter = 0;
}
}
}

}

//ここからメイン処理
//まずwindowクラスをインスタンス化
var window = new MainWindow();

**********************************************************************

前回と同様、↑のコードをstartup.tjsって名前で保存して、50x90pixの3コマの画像

（ここではtest2.pngって名前にしてます）を用意すれば吉里吉里でもSyntheの

ゲームツールでも動作確認できますよ。

さて、それでは解説ー。

まず、ジャンプするってことは地面が必要ですね。そして重力があるということです。

なので、それらをコードで表現しなければなりません。

まず地面ですが、ここではウィンドウの下端を地面と見立てます。

なので、キャラクターの登場位置を地面の位置に設定します。（33，34行目）

で、前回書いたキー入力の処理ですが、重力がありますので、↑キーで浮くのはおかしいですよね？

なので上下キーの処理を削除してしまいました。

代わりに、95行目のspaceキーが押されたときの処理を追加します。

ここにジャンプの処理を書きます。

ここからは物理（の初歩）の話になるのでアレルギーがある人はちょっと我慢してくだせい。

横方向の移動は今まで通り等速直線運動でもまあ違和感ないのでいいとして、

（ってこれもホントは徐々に加速とかしたほうがそれっぽくなるんですが）

ジャンプについてはそうもいきません。

なんかふわーって浮いてるように見えてしまいますよね？

なので、ボタン押した瞬間に上向きの初速を設定して、時間がたつごとに

下向きの加速度（重力）によって減速させて行き、やがて速度がマイナスになると

下向きに移動しはじめ、地面に触れたら速度を0に戻す。

という処理にします。

実際に画面上の1pixを何mかに仮定して、重力加速度を9.8m/s^2とした場合に…

とかやると意外とうまくいかないものなので、この辺はいい感じに動くように

適当な値に調整します。

でもってジャンプ中状態フラグ(var jump)ってのをわざわざ持たせたのは、

空中でspaceキー入力を受け付けないようにするためです。

こうしないと押しっぱにしてたらやっぱりふわーって浮いてってしまうからね。

まあ説明としてはこんなもんなんですが、わかりにくかったかな？

数式とかださないで説明しようとがんばったつもりなんですが…

もしかしてかえって伝わらなかったかも…

ともあれ今日はここまで！

なんかあったらコメントくださいませー

そろそろソースが長くなってきたので、ちゃんと処理を分けましょう！

というわけで予定通り次回はクラス設計をちょっと考える！にします。

ではまたー。

第4回です！ゲレゲレです！

さて今日は、キャラクターを動かす！です。

キーボードからの入力でキャラクターを操作できるようにしてみます。

今回は方向キーで上下左右に動くようにしてみます。

ではでは、サンプルソース。

**********************************************************************

//メインウィンドウクラス
class MainWindow extends Window
{
var primlayer;
var timer;
var objectManager;
var commondata;
var imageLayer;//画像レイヤー
var imageCounter;//画像のアニメーション時間調節用カウンター
function MainWindow()
{
super.Window();

// 下敷き(プライマリレイヤ)
add(primlayer = new Layer(this, null));
primlayer.left = primlayer.top = 0;
//ウィンドウのサイズを設定(800x600pix)
primlayer.imageWidth = 800;
primlayer.imageHeight = 600;
primlayer.setSizeToImageSize();
setInnerSize(primlayer.width, primlayer.height);
Plugins.link("wuvorbis.dll");//ogg再生用プラグイン読み込み→吉里吉里では必要、syntheでは不要
//ウィンドウ表示
visible = true;

//画像を表示
imageLayer = new Layer(this, primlayer);
imageLayer.loadImages("test2.png");
//画像表示位置(左上がx=0,y=0)
var x=100;
var y=200;
imageLayer.setPos(x, y);
//画像表示エリアサイズ設定(w:幅、h:高さ)
var w=50;
var h=30;
imageLayer.setSize(w, h);
//画像ファイル内の使用領域(UV)設定(左上がx=0,y=0)
var uvx=0;
var uvy=0;
imageLayer.imageLeft = uvx;
imageLayer.imageTop = uvy;
//表示状態(true:表示、false:非表示)→このパラメータを書き換えることで表示／非表示の切り替えをする
imageLayer.visible = true;
//描画優先順(複数の画像を重ねて表示した場合、この値が大きい方が手前に表示される)
var abs=100;
imageLayer.absolute = abs;
//画像アニメーションタイミング調整用カウンターを初期化
imageCounter = 0;

//windowのupdate関数を実行
timer = new Timer(this, "update");
timer.interval = 16;//約60fps
timer.enabled = true;

}

function update(){
//キーボードで入力されたキーを取得して画像の位置を移動
var x = imageLayer.left;
var y = imageLayer.top;

//↑キーが押されてたら
if(System.getKeyState(VK_UP)){
//キャラがウィンドウの上端を超えてなければ上に移動
if(y > 0){
y -= 1;
}
//超えてたらそのまま
else{
y = 0;
}
}
//↓キーが押されてたら
else if(System.getKeyState(VK_DOWN)){
//キャラがウィンドウの下端を超えてなければ下に移動
if(y < (primlayer.imageHeight - imageLayer.height)){
y += 1;
}
//超えてたらそのまま
else{
y = primlayer.imageHeight - imageLayer.height;
}
}
//←キーが押されてたら
else if(System.getKeyState(VK_LEFT)){
//キャラがウィンドウの左端を超えてなければ右に移動
if(x > 0){
x -= 1;
}
//超えてたらそのまま
else{
x = 0;
}
}
//→キーが押されてたら
else if(System.getKeyState(VK_RIGHT)){
//キャラがウィンドウの右端を超えてなければ左に移動
if(x < (primlayer.imageWidth - imageLayer.width)){
x += 1;
}
//超えてたらそのまま
else{
x = primlayer.imageWidth - imageLayer.width;
}
}
//位置更新
imageLayer.setPos(x, y);

//画像のアニメーション
//uvをずらしてパラパラマンガ
//アニメーション(3コマ)は16fpsだと速すぎる
//20分の1くらいがいい感じ？
imageCounter++;
if(imageCounter > 20){
if(imageLayer.imageTop>-60){
imageLayer.imageTop -= 30;
}else{
imageLayer.imageTop = 0;
}
imageCounter = 0;
}
}

}

//ここからメイン処理
//まずwindowクラスをインスタンス化
var window = new MainWindow();

**********************************************************************

前回と同様、↑のコードをstartup.tjsって名前で保存して、50x90pixの3コマの画像

（ここではtest2.pngって名前にしてます）を用意すればＯＫ！

試してみましたか？動いたでしょ？

では、解説行きまーす。

まず、今回追加した処理はupdate関数の中身です。

前回説明したとおり、timerがupdateって関数を定期的に実行するので、この関数の中で

「キーが押されてたら○○する」みたいな処理を書けばいいってわけ。

ということで、62行目以降が方向キーに対応した処理になってます。

第2回でも言ったかもですが、ウィンドウ内では上を原点としてるので

縦方向は下側に行くほど座標を＋方向にずらします。

で、→キー押されたらxに座標を＋ってだけやってると画面外に出てもそのまま進んでいってしまいます。

なので、とりあえずウィンドウの端にぶつかったら止まるような処理を入れておきました。

こんな感じでいいですかね？

ここがわかんない！とかこうした方がいいよ！とかあればコメントしてくれるとうれしいです！

ではでは、今日はこの辺で。

次回は今回のをちょっと応用して、キャラをジャンプさせてみる！にしますー。

何作るか決めました！

オンライン対戦で、それなりに簡単に作れそうで、モチベーションが持続しそうなネタ…

ってことでマリオブラザーズ（ファミコン）

これをネット対戦できるようにしたいと思います。

ああ、もちろん素材とかパクんないっすよ。

いただくのはゲームデザインのみ！

というわけで、今回から

吉里吉里でオンラインゲームを作ろう！（仮）

改め

吉里吉里でオンライン対戦マリオブラザーズを作ろう！

にします！！

つーことでね、今後は以下の感じで進めていこうかと。

・キー入力で動かす

・ジャンプとかさせてみる

・クラス設計を見直す

・コリジョン判定

・UIとか諸々

・オンライン機能

…なんですか？「クラス設計は初めにするもの」ですって？

それは正しい！だがしかし、いきなりそんなのつまらないでしょ？

とりあえずなんとなく形にしてみてモチベーション上げる！

これけっこー大事なことですよ！

というわけで、とりあえずなんかキーボードのキー押したらキャラクターらしきものが

画面を動き回るまではこのまま行きます。

そんなわけで今回はアニメーション。

例によってサンプルソースがこれ。

***********************************************************************

//メインウィンドウクラス
class MainWindow extends Window
{
var primlayer;
var timer;
var imageLayer;//画像レイヤー
function MainWindow()
{
super.Window();

// 下敷き(プライマリレイヤ)
add(primlayer = new Layer(this, null));
primlayer.left = primlayer.top = 0;
//ウィンドウのサイズを設定(800x600pix)
primlayer.imageWidth = 800;
primlayer.imageHeight = 600;
primlayer.setSizeToImageSize();
setInnerSize(primlayer.width, primlayer.height);
Plugins.link("wuvorbis.dll");//ogg再生用プラグイン読み込み→吉里吉里では必要、syntheでは不要
//ウィンドウ表示
visible = true;

//画像を表示
imageLayer = new Layer(this, primlayer);
imageLayer.loadImages("test2.png");
//画像表示位置(左上がx=0,y=0)
var x=100;
var y=200;
imageLayer.setPos(x, y);
//画像表示エリアサイズ設定(w:幅、h:高さ)
var w=50;
var h=30;
imageLayer.setSize(w, h);
//画像ファイル内の使用領域(UV)設定(左上がx=0,y=0)
var uvx=0;
var uvy=0;
imageLayer.imageLeft = uvx;
imageLayer.imageTop = uvy;
//表示状態(true:表示、false:非表示)→このパラメータを書き換えることで表示／非表示の切り替えをする
imageLayer.visible = true;
//描画優先順(複数の画像を重ねて表示した場合、この値が大きい方が手前に表示される)
var abs=100;
imageLayer.absolute = abs;

//windowのupdate関数を実行
timer = new Timer(this, "update");
// timer.interval = 16;//約60fps
timer.interval = 160;//約6fps
timer.enabled = true;

}

function update(){
//とりあえず画像のアニメーション
//uvをずらしてパラパラマンガ
if(imageLayer.imageTop>-60){
imageLayer.imageTop -= 30;
}else{
imageLayer.imageTop = 0;
}
}

}

//ここからメイン処理
//まずwindowクラスをインスタンス化
var window = new MainWindow();

***********************************************************************

こいつをstartup.tjsって名前で保存して、それと同じディレクトリに

幅50pix、高さ90pix(高さ30pixの3コマ)の画像を用意し、吉里吉里かSynthe(http://www.synthe-web.jp/)の

ゲームツールで読み込むと動きます。

んでは解説。

そもそもアニメーションというのはですね、要はパラパラマンガなんです。

何コマ化の画像を用意して、一コマずつ順番に表示していくことで動いて見えるわけですね。

ということで、まず5行目！

var timer;

って変数がありますね？

これがタイマーです。

こいつを使って定期的に画面の再描画をさせます。

その際に、画像を差し替えればアニメーションが実現できるってわけです。

で、そのタイマーはどう使うかというと、45行目ですね。

//windowのupdate～

ってとこから下でタイマーの設定をしています。

Timerクラスの詳しい説明はTJS２のリファレンス(http://www.ultrasync.net/dee/kr2helps/tjs2doc/contents/)に

まかせますが、ここでは１６０msごとにupdateって関数を呼び出すように設定しています。

16msで約60fps、つまりテレビ放送と同じなんですが、これで3コマをアニメーションさせてみたら

速すぎたのでとりあえず1/10の6fpsにしときました。

ここの数値を変えてお好みの速さにするといいと思いますよ。

で、updateって関数。

前回のソースにはそんなものなかったですよね？

なので、作ります。

53行目の

function update(){

から61行目の

｝

までがupdateって関数です。

ここでやっているのがパラパラマンガのコマ送りの処理ですね。

呼び出されるたびに表示する画像を次のコマに差し替えています。

といったところで今日はここまで。

次回はキー入力でキャラクタを動かす！です。

ではまたー。

//画像を表示
imageLayer = new Layer(this, primlayer);
imageLayer.loadImages("test1.png");
//画像表示位置(ウィンドウの左上がx=0,y=0、右下がx=800,y=600)
var x=100;
var y=200;
imageLayer.setPos(x, y);
//画像表示エリアサイズ設定(w:幅、h:高さ)
var w=50;
var h=30;
imageLayer.setSize(w, h);
//画像ファイル内の使用領域(UV)設定(左上がx=0,y=0)
var uvx=0;
var uvy=0;
imageLayer.imageLeft = uvx;
imageLayer.imageTop = uvy;
//表示状態(true:表示、false:非表示)→このパラメータを書き換えることで表示／非表示の切り替えをする
imageLayer.visible = true;
//描画優先順(複数の画像を重ねて表示した場合、この値が大きい方が手前に表示される)
var abs=100;
imageLayer.absolute = abs;

}
}

//ここからメイン処理
//まずwindowクラスをインスタンス化
var window = new MainWindow();

******************************************************************************

これと、幅50pix高さ30pixの適当な画像ファイルを作ってtest.pngって名前で保存したものを
同じディレクトリにおいとけばおｋ。

さあ実行してみよう！
ね？表示されたでしょ？

つーわけで解説しちゃいます。

まず5行目

var imageLayer;//画像レイヤー

これをMainWindowクラスのメンバに追加しました。

あとでクラス設計をちゃんとしないとなーとか思いつつ、とりあえず今日のところは

とにかく画像が表示されるってことが目標なので直で追加しました。

うん、今度なおす！

で、この画像レイヤーに画像ファイルを読み込んで表示させる設定が22行目の

imageLayer = new Layer(this, primlayer);

から下です。

設定内容は…ま、ソース内のコメントに書いてあるので大体わかりますよね？

注意しなきゃいけないのは、

座標系が左上を原点(0,0)としてるので縦方向が画面下方向に行くほど＋ってことかな。

あとは、visible=true;とか？

これはJavaScriptを書いたことがある人ならわりとおなじみかなと思うんだけど。

要するに素の要素が見えるか見えないかっていう設定で、

初期設定ではこれがfalse(見えない)になってるのでtrue(見える)にしときます。

今日はだいたいこんなもんかなー。

ではではまた明日！

今回画像を表示したので、次回は「アニメーションさせる！」にしようかな！

function MainWindow()
{
super.Window();

// 下敷き(プライマリレイヤ)
add(primlayer = new Layer(this, null));
primlayer.left = primlayer.top = 0;
//ウィンドウのサイズを設定(800x600pix)
primlayer.imageWidth = 800;
primlayer.imageHeight = 600;
primlayer.setSizeToImageSize();
setInnerSize(primlayer.width, primlayer.height);
//ウィンドウ表示
visible = true;
}
}

//ここからメイン処理
//まずwindowクラスをインスタンス化
var window = new MainWindow();

*****************************************************************************

はい、こんな感じです。

これをstartup.tjsって名前で保存して吉里吉里なりSYNTHEのゲームツールなりで実行すると

幅800ピクセル高さ600ピクセルのウィンドウが表示されます。

これで終わるとさすがにひどいですかね？

まぁこの辺はおまじないでいいんじゃないかなーと思ったりもするんですが…

ではちょっとだけ解説。

まず最初のclass～ってとこ

ここの下の行の

｛

から、下から5行目の

｝

までがウィンドウクラスの定義です。

もともとTJS2に用意されているWindowクラスを継承してMainWindowクラスってのを定義してるわけ。

その下にあるvar～ってヤツが変数宣言。

メンバ変数ってやつだね。

とりあえず今は下地のレイヤーを持たせただけ。

んで、その下にあるfunction～ってとこからが関数。

これはクラス名と同じ名前（MainWindow）なのでコンストラクタってヤツです。

クラスが実体化される時に自動で一回だけ実行される関数、なのでここに初期化処理を書いとくわけ。

ここでは下地レイヤーのサイズを８００ｘ６００に指定しただけだけども。

で、最後のvar window=～ってやつがメイン処理。

メイン処理っつってもこのクラスを実体化するだけなのでこれ1行。

さっきも言ったけどここはおまじないみたいなもんだと思うので、もうコピペでいいですたぶん。

この辺詳しく説明するとJavaScriptの文法とかオブジェクト指向とは？とか解説しなきゃなんないけど

それ無理。ってことでご勘弁を。

もっと実際の動きにつながるような、いわゆるゲーム的な処理の部分になったら

もうちょっとまともな解説できんじゃないかなと思うのでいましばらくは辛抱してくだされ。

ということで今日はここまで！

次回は「画像を表示させる！」にしましょう！これも何作るにしても必要なので！

で、肝心のどんなゲーム作るのか？はそのうち決めます！

目標ないとモチベーション下がるので！！

ではまた！