2020 ソフトウェア設計及び演習用の班Wiki

内容を話し合った。

モノと操作を洗い出した。 enchant.jsについて勉強した。

作るゲームの内容を考えなおした。 RPGツクールのように脱出ゲームを作れるゲームにするという方向性になった。

画像をアップロードする場面を担当することになった。

htmlのcanvas機能を使って作ることになる。 canvasの使い方を調べながら作っている途中。

htmlのcanvasを使うのをやめ（座標が一致しない）,enchant.jsを使って作ることにした。画像をや文字を配置するといった、簡単なところはできるようになってきた。次回からは画像をアップロードする部分をやる。

ファイルのアップロードを実現するために、FileAPIを導入しようとしたがうまくできなかった。FileAPIのみを実行することはできたがそれをenchant.js内に埋め込むことができなかった。次回はその部分を改善する必要がある。

中間発表 アップロード画面をenchant.js内でやるのは難しいとなり違うhtmlファイルで画像をFileAPIを使ってアップロードすることにして、そのページにジャンプしてから画像をアップロードすることになった。そのhtmlファイルで画像をアップロードして、画像を見れるようにはなった。しかし、そこからローカルファイルに直接保存することができなかった。次回はそこをできるようにする。

fileAPIでは、htmlのページ上に一時的に保存しておくだけで、ローカルファイルに保存するという操作は難しいとなった。そこで違う方法ができるか調べたが、javascriptでローカルのファイルを操作することは難しいとなり、アップロードする方法を変えるか、アップロードのシステムを変える必要があるとなった。そこで、直接ローカルファイルを操作してもらって、使いたい画像を用意してもらうか、サーバを導入するかのどちらかになった。

直接ローカルファイルを操作してもらう方法か、サーバーを用意してアップロードする方法にするかを検討し、先生にも聞いてみた。その結果、画像アップロードを直接ローカルファイルを開いて、使いたい画像に置き換えることになった。その画面については半分ぐらい出来上がった。

変更後の画像をアップロードする画面を仮の状態で完成させた。その画面とテストプレイ画面の統合を一応出来た。背景の画像をアップロードするのみ完成させたのに加え、アイテム画像のアップロードの画面を作るところに入った。

アイテムをアップロードするシーンを作ってpushsceneで遷移できるようにできた。一方で更新ボタンは、今までブラウザのリロードか、javascript自体のリロードで対応しようとしていた。しかし、そうするとテストプレイの方で問題が発生するため使えなくなった。scene自体のリロードで解決しようとした。しかし、そうしても、画像をすでにプリロードしているためsceneのアップロードでは解決できないとわかった。そこで、画像を変更したあとにgame.onloadのなかで変更した画像をもう一度読み込み、すでに配置してある画像を取り除いて、もう一度配置し直すことにした。しかし、ここで気づいたが、自分の担当した画面で再読み込みして画像を表示できるようにしたとしても、自分の担当のシーンのみ変更が適応されて、他のsceneには適応されない。この問題に気づいてしまったため、自分の範囲外のところまで手を加える必要があることに気づいた。そこで、今の段階では、まず自分の担当の部分を完成させたあと。この部分を解決することになった。完成版では、ひとつのjsファイルにするため、それぞれの担当のプログラムにこれを解決するように書き加えるという方向性になった。

　画像を変更した後に、その変更を反映させるリロードを実現するところにとりかかっている。load関数を使えば、ゲームの無限ループ内でもう一度ロードできると思い、そのようにプログラムを変更した。そうしたらば、新しい画像が読み込まれると思ったらば、新しい画像に変更されていなかった。そこで、先生に聞いてみて、画像を置き換えるのではなく、違う名前で新しくゲームの無限ループ内で新しくloadするようにしたらば、"Error: Assigned value on Sprite.image is undefined. Please double-check image path, and check if the image you want to use is preload before use."とエラーが出た。それでも無視してもう一度更新ボタンを押したらば一応画像を表示させることができた。しかし、画像の名前を新しくして追加すると、他の担当のところと整合性が取れなくなる。そのため、この方法では解決できなかった。 　プログラム全体で、同じ操作を何回も繰り返していたため、何回も出てくる操作を関数にして、その関数を使うことにした。(画像を画面に表示させる一連の操作と、説明する文を表示する一連の操作)その結果、プログラム全体をすっきりさせることができた。

前回からの続きで、自分のシーンのみでリロードをできるようにするため、load関数とpreload関数を使わずにできるか1時間ほど調べた。enchant.jsのリファレンスや、ソースコードを見てみたが、それでも解決策を見つけられなかった。そこで、仕方がないのでブラウザのリロードを使うことにして、画像を変えるたびにブラウザのリロードをすることになった。こうなったため、自分の部分は今の時点では終了となり、統合をした。実際に統合をするときに、他人が書いたコードを読むのはとても読みにくく理解しにくかった。だから、これからは自分がコードを書くときには必ずコメントアウトを入れようと思った。