Skip to content

72時間で私は本当にゲームプログラマになれるのだろうか:体験ルポ

さてさて、alan先生の連載からいつの間にやら環太平洋ミニゲーム開発オリンピック第2戦に参戦することが決定していた湯島系OL、Hidemyです。と言っても私、ガチ文系で数学とか全くできないんですけど、なんで神は私にこんな試練を与えたもうたのでしょうか。

噂では、今週金曜日に開催されるという噂の本戦には、凄腕のプログラマーが外部から参戦するそうですし、ますますガクブルなんですけど。

だいたい、つい1週間前までは、

「あー、JSですか。へーJSねー。やっぱりJSだよね。うんうん。ちなみにそれって、なんのゲームですか?」

という湯島OL・IT派とは思えない発言もするアナログ電子(帯電体質)でしたが、
急遽決まったオリンピック出場の為、単にエースピッチャーの双子の弟というだけでいきなり甲子園を目指すハメになる、たっちゃん以上な代打ぶりにもめげず、持ち前の気合いと根性でJavaScriptを勉強中でございます。


alan先生とshi3zコーチの連載を参考に、この数日間どんなふうに勉強していたのか、
ちょっとその一部をお伝えいたしましょう。

以下、リンク先に続く

■亀の子グラフィックとたわむれる

alan先生の連載、斜め読みしてたけど、まさか本当にやるハメになるとは思わなくて第1回から総復習。

どんどん読み進め、四角も順調に描けた

ま、このくらい、ワタシでもできますわな。

と調子にのった感じで早速第2回の記事へ。

■カンスウにカンドウ

続く第二回の記事。ん?なんだこりゃ。

“プログラムで繰り返しをしたいとき、一番簡単なのは、forという命令文を使うことです。
では、正方形を描くプログラムをfor文で書き直してみましょう”


function onLoad() {
    logo.init();
    penDown();
    for(i=0;i<4;i++){
        move(100);
        turn(90);
    }
    penUp();
}

え?forでループ?何言っちゃってんの?
forって、〜のために、とかでしょ?誰かの為にプログラムを実行したいときに使うんでしょ?”by the people, for the
people”っていうじゃない?

と、初めの行以外はあとで付け足し的に考えたことだが、ここで若干の拒絶反応がおこったのは事実。
だいたいわたし英文学専攻だしさー。

しかしそこはぐっとがまん、とりあえず書いてみる。

そしたら、お、四角書けてる書けてる。と、ちょっと感動。
関数を使いこなす女・Hidemyの誕生である。

4だった部分を360に、moveとturnをそれぞれ1ドット、1度ずつにしてみました。

ほほう、これはきっと…。と若干の予測も可能に。

つうかalan先生、伏線がバレバレ。まあわざとかもしれないけど
うんうん、円が出来てる出来てる。
その後も噂の七角形に

ぎゃ、コレFUSHIGIネ!

と心の中で謎の金髪外人になりきったつもりでつぶやき、感動を覚える。

七角形というものが存在するということをそもそも想像したこともありませんでした。
alan、やるな。

うずまきループもできたところで、
第3回へ。

■例文をなぞっていた昨日の私にセイグッバイ

なんか北海道とかの話になってるし、どうなってんだ、と思ったら関数(函数)のちょっといい話からスタート。

あのね、いくら文系でも関数くらい知ってるっての!

とツッコミにいれつつ、あれ?そういえば関数ってfunctionなのね、と英文科的な思考に切り替える。
というか、関数とfunctionが一緒だという意識が今まで無かった。専門用語のおそろしさよ。例えば英語で「この機械壊れてるよ」ってのは「malfunction」って言ったりするのよね

で、読んで納得。

なるほど、テレビで大槻教授がよくやっているように、箱の側面をたたいて煙が出る感じに関数を出せばいいのね!なんだ、関数ってプラズマか!簡単じゃん

と、あっているのか若干疑問視される解釈をしながら、学習をすすめる。
shi3zさんが作ったwise9インタプリタ環境が意外と便利

そして適当な数字が適当に返ってくるという、驚異のランダム関数に軽く感動。

プププ、気持ちわる!

と油断していたところに、

1. moveにも乱数を渡してみよう

と、alan先生から練習問題。

乱数をわたす?え?ええ?渡すって誰に?

と急に不安を覚える。


function uzumaki(){
    for(i=0;i<360;i++){
        move(random(i));
        turn(i);
    }
}

i<360ってなんだっけ…?
moveのとなりの括弧は、ええと、360を4で割ると四角形ができるから…。
と、前の2つの記事を読み返しながらおさらい。

っていうか文章が短すぎるせいか、全然解らないよalan先生!

絶望感を感じつつ、とりあえず最初から読みなおす。復讐・・・もとい復習って大事だなー。

■なんとかできたおはなとボール、そしてツタ

第4回連載で、if文というのが出て来た。まあこれはforに比べれば英文に近いからそれほどビックリするものではない・・・でもその矢先、

if( i == 180 ){

何コレ?

え?なにイコールイコールって?
イコールそれすなわち?え?
頭痛が痛いとかそういうこと?
と、0.2秒くらい考えたが、
とりあえず実行

そして、


function circle(){
    for(i=0;i<360;i++){

        if( i == 180 ){
            turn(90);
        }else{
            move(1);
            turn(1);
        }
    }
}

の例文を使いながら、
ランダム関数をいれたりして、
いろいろな形をつくってみる。

ドーナツっぽいものができたり、
Macが死にそうになるようなスクリプトを書いたり、

気がついたらサンフランシスコに美しい朝焼けが差し込んで来て頭が真っ白になっちまいつつも、
いろいろ試した末、ifやランダム関数を使いながら、
花っぽいもの、
ボールっぽいもの
つたっぽいもの
を書く事ができた。

これでどうだ。なーんだ。簡単じゃん。
と、終わってからならどうとでも言えることをひとり呟くのだった。

■3月2日、アラートがとまらない

alan先生の連載はペースもゆるく比較的解りやすかったが、進みの遅さに焦れたshi3zコーチが怒濤のスピー度で連載を開始。

というか、一日に二回更新される連載とか聞いたこと無い。殺す気だろうか。

 

最初のサンプルにあったバナナの画像を出そうとしたが、出ず。
いきなりここでPNGファイルがGIFと表される罠

罠というか、バグ。ミス。嘘。大袈裟。紛らわしい。いや、ひょっとすると嫌がらせ?
しかし昔のプログラミング雑誌や参考書は誤植が多かったと耳年増であったのが幸い、
冷静にダウンロードしたimgフォルダでファイル名を確認し、banana.pngと書き換えてバナナの画像を出す。

翌朝shi3zコーチに確認したら「そういう細かいバグを見つけ、自分で考えて修正することが訓練に繋がるのだ」ともっともらしいことを言っていたが、今見たらそのページの表記はこっそり直っていた。コーチすらあてにならない環境で全く油断できない。

とはいえ、

“this.x = this.x+1″

“this.x ← this.x+1″

と考えろというコーチの解説は、だいぶ腑に落ちる感じである。

そうそう、イコールとかさあ、つけるからわかんないんだよ。イコールとかにすっから。

と思いながら、何とか宇宙船をすいすいさせる事に成功。

 

GDCのカンファレンスの合間に、マウスとのx座標と y座標の差分を10で割った分移動するところのコツを教わったその日、

コーチの第2回目の連載をみながら、
いろいろifをつかったり、20で割ったりしてみたが、

 

あれ?なんか変わってなくない?ん?まだするする動いているぞ?
別にif使ってもそんなにかくかくしないのかなあ??

 

コーチとかアテになんないとこあるからなあ、と諦めかけたとき、

 

あ、ブラウザリロードしてない…。

 

昨日はwise9の実行環境でやっていたため、
根本的なところをすっかり忘れていたのであった。

そんなこんなで第3回の連載まで進める。

しかし、岩にぶつかったらアラートが出るって、どこのブラクラなの?

しかも、一回アラートでると、絶妙なパッド操作で岩を避けるように宇宙船を誘導しないとまたアラートが出てハマる。これ自体が相当なクソゲーなんじゃないの?と思ったり思わなかったりしながらようやく脱出。

幾度かアラート地獄に陥りながらも、課題まで進める。

 

1) バナナが宇宙船をゆっくり追いかけるようにしてみよう

 

うんうん。バナナにも tickのfunctionをつけたして、
1000で割ってみる・・・できるじゃん。ゆっくりになった。

 

2) バナナがたまにバナナではなくて岩になるように改造してみよう。

 

バナナのイメージを定義するところに、
なんとなーく、 ifでiが3以下の場合は岩の画像を表示しろと足してみる。
お、なったなった。
若干if の入れ場所に迷ったが、ここも何とか成功といえるだろう。

 

3) バナナが宇宙船から逃げるように改造してみよう。

 

this.xに足し込む式を+=から-=に変えてみる。

しかし、初期のカーソルがあると想定されたところからはどんどん逃げていくが、
カーソルを動かしても同じ方向に逃げていく。
これでいいのだろうか?腑に落ちない。

さらにまた何度もアラート地獄に陥りながらも、
アラートのスクリプトを抜く前にブラウザをリロードしてしまう残念な自分。
岩にぶつかったらアラートをだし、
バナナ画像ならスコアになるようにできないかとカタカタしてみるが、
そこで力つきてしまった。
今日はこんなところまでかな。

ということで、以下が48時間めまでの成果です。

 function onLoad() {
    scoreLabel = new Label("Score:0",10,10); // A Labelオブジェクトをつくる
    score=0; // B // 点数を入れるための変数scoreを作り、0に初期化;

    ship= new Image('img/starship.png');
    ship.tick = function(){ //宇宙船がマウスカーソルを追いかける
        this.x += (mouseX-this.x)/10;
        this.y += (mouseY-this.y)/10;
    };
    ship.onHit = function(){ //C 宇宙船に当たったときの処理
        score+=1;//D スコアを足す
        scoreLabel.setText("Score:"+score); //E スコアを表示する
    }

    for(i=0;i<20;i++){
        if( i<3 ){
            rock = new Image('img/rock.png');
        }else{
            rock = new Image('img/banana.png');
        }; //F バナナの絵に変えてみた
        rock.tick = function (){
            this.x += (mouseX-this.x)/1000;
            this.y += (mouseY-this.y)/1000;
        };
        rock.x = Math.random()*320;
        rock.y = Math.random()*480;
        rock.onHit=function(){ //G 当たった時の処理
            this.y=-1000; //H 画面外の座標を指定して見えなくしてしまう
        }
    }
    gameStart();
}

ゲームっぽくはなってきたが、
果たして大会参戦できるレベルになるのだろうか?

大会開始まであと24時間。

うーん。


文・Hidemy

 

このエントリーをはてなブックマークに追加
はてなブックマーク - 72時間で私は本当にゲームプログラマになれるのだろうか:体験ルポ
Post to Google Buzz
Share on GREE

Related posts:

  1. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する
  2. shi3z式ゲームプログラミング入門 #2 あと48時間でゲームプログラマになる方法
  3. shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法
  4. shi3z式ゲームプログラミング入門 #4 バナナと配列

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*