<<はじめに>> 授業の中で調べたこと、役に立ったことをまとめておこうと思います。 一応でコードを書いていく中で自分で調べたのですが、間違っていたらすみません。 <<目次>> ((outline)) !!thisのスコープ thisは便利なのですが、((br)) addEventListener("--", function(){ … ((br)) の…の中でthisを使うとうまく動作してくれないことがあります。 そんなときはaddEventListenerよりも前にvar that = this;と宣言しておいて、addEventListenerの中のfunctionの中ではthisの代わりにthatを使うとうまく動いてくれると思います。一例としてソースコードを下においておきます。 *https://gitlab.cis.iwate-u.ac.jp/2018_g01/WAIPANIC/blob/master/work/riddle_event/old_files/new_riddle_event.js{ソースコード}(64 〜 67行目あたり) !!rotateの回転の軸 rotateは画像を回転させてくれる非常に便利なメソッドなのですが、画像の左上を軸に回転してしまいます。それが便利なときもあるのですが、自分がコードを書いているときは非常に不便でした。rotateの回転の基準点はspriteのoriginX, originYという値をいじってあげると回転の軸を変えることができます。ただし、拡大・縮小の基準点もこれによって変わってしまうようです。 *https://gitlab.cis.iwate-u.ac.jp/2018_g01/WAIPANIC/blob/master/work/riddle_event/old_files/new_riddle_event.js{ソースコード}(1045, 1046行目あたり) !!自分のノートパソコン(Windows)でGitを使うには 自分のノートパソコンでGitを使うにはGit for Windowsが必要です。また、atomを自分のノートパソコンにインストールしているのであれば、拡張パッケージであるplatformio-ide-terminalをインストールすることをおすすめします。(インストールしなくてもwindowsであれば、windows power shellからgitコマンドを使うことができます) *https://qiita.com/toshi-click/items/dcf3dd48fdc74c91b409{自分用Git For Windowsのインストール手順}(外部サイトに飛びます)((br)) *http://wiki.cis.iwate-u.ac.jp/~kimura/csd/2018/material/atom/{atomとplatformio-ide-terminal} !!統合で苦労した話 自分の班は統合にとても苦労しました。統合の際に、最初に班員で決めておいたほうが良かったなぁ…と思ったことをいくつか書いておこうと思います。参考になれば幸いです。 *fpsの値 **自分たちはfpsの値を最初に決め忘れてしまったので、各モジュール担当者ごとにfpsの値が異なり、最後の統合の際に意図しない挙動を起こしたモジュールが多数ありました… *モジュールとテスト用mainファイルの分割 **モジュールの内容のみ記述したファイルとテスト用のmainファイルは別々にしたほうが良いと思いました。モジュール単体のみのファイルを用意しておくと、最後の統合の際にhtmlファイルに必要なファイル名を記述するだけで済みます。自分たちの班は最初これをやらなかったために、中間発表の時はひたすら各人のファイルをコピーしてはエラーが出ての繰り返しでした。(最終発表までにはなんとか分割しました…) ***https://gitlab.cis.iwate-u.ac.jp/2018_g01/WAIPANIC/tree/master/work/flag/old_files{ソースコード置き場}(flag.jsがモジュール単体のファイル、flag_test.jsがテスト用のmainファイル、flag_index.htmlがhtmlファイルです。) *使用するキーとそのkeybind **使用するキーとそのkeybindに関しては最初に統一しておいたほうが良いと思いました。自分たちの班はcore.keybind(37, "left")と書く人もいれば、core.keybind(37, "Left")などと書く人もいて、最後の統合の際にキーが急に入力を受け付けなくなったりして、混乱しました…core.keybindの" "の中身の書き方は最初に統一しておいたほうが良い気がします… *画像ファイルや音声ファイルのパスの指定 **preloadする際には十分に気をつけましょう。これが原因で何度も画像がでない、音声が出ない事態に陥りました。 !!個人的に参考にさせていただいたサイト様(リンクは外部サイトに飛びます) *enchant.js関連 **http://wise9.github.io/enchant.js/doc/core/ja/symbols/_global_.html{JsDoc Reference} ***enchant.jsのメソッドやプロパティの詳しい説明が書いています。 **http://enchantjs.com/ja/resource-ja/plugins/{Plugins} ***enchant.jsのプラグインについて書かれています。便利なものがたくさんあるので見てみると良いかもしれません。 **http://www.trident-game.com/blog/2014/04/25/enchant-js%E3%81%A7%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E4%BD%9C%E3%82%8B%E3%80%80%E7%AC%AC%E4%BA%8C%E5%9B%9E/{enchant.jsでゲームを作る} ***ソースコードとともに説明が詳しく載っているので最初の頃によくお世話になりました。 **http://enchantjs.com/ja/tutorial/lets-start-enchant-js/{Let's start enchant.js} ***enchant.jsの公式サイトにある、使い方の説明です。衝突判定についてなど書かれているので最初に見てみると良いと思います。 **http://kurochan-note.hatenablog.jp/entry/2013/01/28/000734{くろの雑記帳} ***地味に思っていた、Label();の中央揃えに関して書いています。どうやら他にも方法があるみたいです。 **http://d.hatena.ne.jp/toburau/20120628/1340908548{ゲームが作れるようになるまでがんばる日記} ***moveTo()とmoveBy()について書かれています。強制イベントなどでアニメーション制作したい方にとっては重要かなと思います。 **https://qiita.com/matsui-a/items/31881c41356da7c427f9{enchant.jsでのイベントの追加・削除について} ***enchant.jsにはaddEventListenerだけでなく、イベントを消去するためのremoveEventListenerも存在します。その使い方についてソースコードとともに詳しく書かれています。 **http://enchantjs.com/ja/2012/12/tips-%E3%81%8F%E3%82%89%E3%81%99%E3%82%92/{Tips:クラスを継承する} ***enchant.jsの公式サイトです。クラスの作り方、継承の仕方が書いてあります。 *JavaScript関連 **https://qiita.com/mrpero/items/156968e3512d42fffc5e{addEventListener type一覧と各ブラウザ対応} ***addEventListenerのtypeについて書かれています。 **https://www.ajaxtower.jp/js/object/index4.html{フロントエンドBlog} ***C言語にはない、連想配列について詳しく書かれています。自分も今回コードを書いていく中で度々連想配列にはお世話になりました。 **http://enlosph.hatenablog.com/entry/2017/01/20/222605{豆になるJS} ***多分今回の授業の中で外部サイトの中では１番見た回数が多いと思います。前の方にも書きましたがこのサイトにはaddEventListenerとthisと引数の関係について書かれています。thisに関して非常に参考になったのでおすすめです。 *Git関連 **https://backlog.com/ja/git-tutorial/{サルでもわかるGit入門} ***Git関連は講義のサイトの他にここで勉強しました。ここもわかりやすく書いてあると思うのでおすすめです。