2018 ソフトウェア設計及び演習用の班Wiki - 18::gr01::須藤広平::覚え書き

18::gr01::須藤広平::覚え書き

archive mode

<<はじめに>>
授業の中で調べたこと、役に立ったことをまとめておこうと思います。
一応コードを書いていく中で自分で調べたのですが、間違っていたらすみません。

<<目次>>
((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関連は講義のサイトの他にここで勉強しました。ここもわかりやすく書いてあると思うのでおすすめです。

*素材関連
**https://maoudamashii.jokersounds.com/{魔王魂}
***SEやBGMでお世話になりました。
**https://soundeffect-lab.info/{効果音ラボ}
***主にSEでお世話になりました。
**https://pocket-se.info/{ポケットサウンド}
***主にSEでお世話になりました。
**https://dova-s.jp/{DOVA-SYNDROME}
***主にBGMでお世話になりました。非常に沢山の種類があります。trueエンドのエンディングテーマはこちらのサイト様からお借りしました。
**http://hi79.web.fc2.com/{白螺子屋}
***キャラクター画像などでお世話になりました。
**もうひとつキャラクター画像などでお世話になったサイト様がありますが、リンク不可だったので控えておきます…ゲームのエンディングには記載してあるので気になる方はtrueエンドでクレジットを参照してください…

!!memory.enchant.jsについて
最後にmemory.enchant.jsについて書こうと思います。memory.enchant.jsはセーブ機能を提供してくれる非常に嬉しいプラグインです。実際に自分たちの班もゲームに実装しました。セーブ機能を実装してみたい方はぜひ使ってみることをおすすめします。以下に参考にさせていただいたサイト様や難点とその解決法を書いておきます。
*http://wise9.jp/archives/2822{wise9}
**memory.enchant.jsは自分でも使い方を調べたのですが、なかなか見つかりませんでした。その中で唯一見つけたサイトです。memory.enchant.jsについてソースコードとともに詳しく説明も書かれていますので参考にしてみてください。
*https://gitlab.cis.iwate-u.ac.jp/2018_g01/WAIPANIC/blob/master/work/flag/old_files/flag.js{ソースコード}
**自分が書いたソースコードも一応載せておきます。参考になれば幸いです。
*https://github.com/wise9/enchant.js/blob/master/dev/plugins/memory.enchant.js{memory.enchant.js}
**memory.enchant.jsの本体です。ダウンロードするときは右上あたりにあるRawを押してから、右クリック→名前をつけてページを保存で出来たと思います。ちなみに使うためには他にも必要なプラグインがあります。それとセットで使わないと使えませんので気をつけてください。詳しくは下記のリンク先に書いてあります。
***http://wiki.cis.iwate-u.ac.jp/~kimura/csd/2018/material/js/app_enchant/{ソフトウェア設計及び演習}(2018年の講義のサイトです)
*memory.enchant.js(nineleap.enchant.js)を使用して、ゲームをスタートした時に画面に大きな"START"が映ることについて
**memory.enchant.jsはセーブ機能を提供してくれるため、非常に嬉しいのですが、nineleap.enchant.jsの仕様によって自動的にスタートシーンも生成されてしまいます。これを解決するにはnineleap.enchant.jsの中身をいじる必要があります。
***ゲームをスタートしたときに"START"が表示されないようにするには、nineleap.enchant.jsの75行目にあるthis.pushScene(this.startScene);というのをコメントアウトすることでゲームスタート時にスタートシーンを表示しないようにすることができます。((br))
https://gitlab.cis.iwate-u.ac.jp/2018_g01/WAIPANIC/blob/master/work/integration/proj/nineleap.enchant.js{ソースコード}
***他にもstart.pngを透明な画像にする、などと言った方法もあるようです。

Tag:

Attachment

New: append-tag

(download: 1486 bytes, at 2018/08/10 09:37:10 <frozen> )
(download: 7436 bytes, at 2018/08/10 12:16:44 <frozen> )
(download: 7674 bytes, at 2018/08/10 12:21:30 <frozen> )
(download: 8639 bytes, at 2018/08/10 12:40:36 <frozen> )
(download: 11364 bytes, at 2018/08/10 13:11:05 <frozen> )

Edit

18::gr01::須藤広平::覚え書き

Attachment

Syntax Help

URL Link

Page Link

Image or Attachment

Text Decoration

Special Letter

Headline

Itemize

Enumerate

Table

Description

Quotation

Preformatted text