Aokashi Room

なんでも書き続けるAokashiの部屋

WWA Message Loader を作ってました

WWAのマップデータから各パーツのメッセージを読むこむだけのWWA Loaderを作りました。

なんで作ったのか

このWWA MessageLoaderの開発がはじめったのは去年の10月中旬で、 WWA COLLECTION の配信に向けて不適切なメッセージが無いか確認する必要がありました。

WWAマップ作成ツールには、メッセージの検索機能を持っていません。

ですので、WWAマップデータのメッセージを出力されたプログラムが開発されたのです。

作り方

まず、WWAのマップデータはWWA Loaderが読み込むと、連想配列 WWAデータ が展開されます。その中の「message」のキーには、配列を持っているのです。

そのメッセージを取って出すだけです。👌

wwaData.wwaData['message'].forEach((text, number) => {
  if (text === '') {
    return;
  }
  // number で番号が表示されるはず。
  let textLines = text.split('\n');
  textLines.forEach((textLine) => {
    // textLine で各行出力されるはず。
  });
}

パーツ番号の表示

しかし、そのメッセージがどのパーツのメッセージなのか分かりません。

WWAデータには、先程説明した「message」以外にも、「objectAttribute」と「mapAttribute」をキーとした配列があるのです。前者は物体パーツの属性、後者は背景パーツの属性です。「属性」と書いてますが、 メッセージ以外すべての値が各パーツごとに格納されています

興味のある方は、下の記事を見ると分かると思います。

github.com

つまり、WWAデータは、メッセージとメッセージ以外でパーツのデータを分けているんですね。

メッセージ以外にあたるパーツの属性からメッセージへ辿るには、各パーツ属性にある数値から message 配列の中を探します。👉

f:id:aokashi:20190224182907p:plain

そのまま上図の通りなんですが、パーツ属性の各パーツの6番目、プログラム内だと0から始まるので5番目に message 配列内の場所が記載されています。上図だと「10」なので、 message 配列のインデックス10にパーツのメッセージが含まれているのです。

ちなみに、WWAマップ作成ツールの仕様上、 どのパーツにも参照されないメッセージ もありますのでご注意ください。パーツを削除したり、移動したりすると発生します。

Vue.js によるコンポーネント

機能は整ったこととして、メッセージ一覧を表示する方法なら、Vue.js とかのビューフレームワークで構築したら、いい感じ*1のプログラムになるんじゃないか?と思い、学習を兼ねて Vue.js のコンポーネント機能を利用して作り直してみました*2

のはずが、上手く進まず、去年10月の開発から今までこれが原因で放置していました。

(ここから先は、コンポーネントの仕組みを理解していることを前提に話します。)

コンポーネントの仕組みについて

f:id:aokashi:20190228232452p:plain

今回の WWA MessageLoader は上記のパーツ番号の表示でどう設計しようか長時間悩んでいました。

とりあえず、上図のように親コンポーネントWWAパーツ一覧、子コンポーネントWWAパーツとしましょうか。

当時の設計では、 WWAパーツ一覧はWWAのデータを渡すだけで、WWAパーツはパーツ情報の表示と必要に応じてデータの取得を行う と考えていました。WWAパーツでは「パーツ情報の表示」なので、下図のようにWWAパーツが親からパーツ番号やパーツ種類を参照できないか実装していましたが、全然上手く行かず・・・。😇

f:id:aokashi:20190224203804p:plain
当時考えていたコンポーネントのデータの渡し方。今これ書いてて恥ずかしいな。

後に、コンポーネントは親子関係を持つことが出来るけど、データは親コンポーネントから子コンポーネントに一方通行しか渡せない。逆方向の場合は、イベントを利用する必要がある。 ということが分かりました。イベントを利用してみるも、こちらも上手く渡せず・・・。🤔

設計がいけなかった

去年11月上旬で放置した後、今年2月に大学から Vue.js 入門を貸出して再び学習しました。📖

gihyo.jp

最近のWebアプリケーションは、サーバーはJSONとかで返すAPIスタイルで、表示をすべてクライアントサイドで済むのか、だったりと今の事情を理解しつつ、コンポーネント周りについて読みました。

「あ、そうだったんだ。子コンポーネントに渡した時点で親コンポーネントからデータは渡せないのか・・・」と。

と気付いたこともそうですが、何よりももう長時間放置していたので、当時の設計の考え方を忘れた🤷‍♂️ というのもあります。

とは言え、下図のように設計を改め、WWAパーツ一覧では各WWAパーツ毎に表示するべきデータを渡して、WWAパーツはそれを表示するだけに済ませる方法で実装できました。👏

f:id:aokashi:20190224203836p:plain

WWAパーツ一覧のソースコードでは、以下のメソッドで各WWAパーツにデータを渡します。

  computed: {
    partsObjects: function() {
      let result = {};
    
      for (let key in this.wwaData['message']) {
        if (this.wwaData['message'][key] === '') {
          continue;
        }

        // makePartsNumber はメッセージ番号を渡すとパーツ種類とパーツ番号を返してくれるメソッド。 methods の中に定義されている。
        let partsInfo = this.makePartsNumber(parseInt(key));
        // 検索条件に満たないパーツをここで continue で弾く

        // こんな感じでまるごとまとめてしまう
        result[key] = {
          number: key,
          message: partsMessage,
          partsType: partsInfo.partsType, // パーツ種類は partsType.js の中に定数定義が入っている。
          partsNumber: partsInfo.number
        };
      }
      return result;
    }
  },

一応教訓としては、 コンポーネント間で受け渡しを行う回数を少なくする ことが大事だと分かりました。

最近オブジェクト指向の扱い方について考え直しているところなんですが、疎結合に作ることがオブジェクト指向とそっくりなんですね―。

検索機能の実装

上記のことがやっと分かり、検索機能も実装しました。ここは イベントの呼び出し を利用して、子である検索ボックスコンポーネントから親であるWWAパーツ一覧コンポーネントへ渡す形としました。

この時点でもエラーは起きましたが、タイプミスだったり、カンマの付け忘れだったり、v-on ディレクティブに付ける要素を間違えたりしただけです。

f:id:aokashi:20190228233102p:plain

検索ボックスのソースコードでは、以下のメソッドでイベントが呼び出されます。

  methods: {
    searchEvent: function() {
      this.$emit('search', { // $emit でイベントを親コンポーネントに呼び出す。ここなら 'search' イベント。
        query: this.query,
        type: this.type,
        onlyPartsMessage: this.onlyPartsMessage
      });
    }
  }

検索ボックスコンポーネントの親にあたるWWAパーツコンポーネントには、 v-on ディレクティブでメソッドが呼び出せます。

  template: `
    <div class="parts-list">
      <search-box v-on:search="setSearch"></search-box>
      <!-- WWAパーツ一覧のコンポーネントの部分 (長いので書かない) -->
    </div>
  `

今の所、検索で渡すデータが「キーワード」「タイプ」「パーツから参照されてないメッセージを除く」の3つの値の配列を毎回キーを書きながら渡していて、冗長になっていますので、そこあたりをきれいにまとめたいなあ。

将来はどうしよう?

当サイトの素材一覧 を、Vue.js で作り直して、素材を探しやすくしたいなあと思います。

恐らく、素材一覧ページと素材情報ページが必要になるので、ルーター機能を学ばないとなあ。

リポジトリ

リポジトリは以下になります。あまり期待しないでください。

github.com

*1:語彙力不足です。すみません。

*2:既存の処理は持ってきているので、作り直しとは言い難いかも?

カエルの為に鐘は鳴る はWWAとそっくりなのか調べてみた

f:id:aokashi:20190201233818j:plain

WWA COLLECTION 配信開始以降、WWAについて説明する機会が何かと増えてきましたが、説明すると「カエルの為に鐘は鳴る と似ているね」と耳にすることがありました。

名前は聞いたけど、マイナーなゲーム?今遊べるの?と思っていましたが、調べると、Nintendo 3DSバーチャルコンソールで配信されている、任天堂ゲームボーイソフト ということが分かりました。

しかも、スマブラ(SPECIAL) ではこのゲームの主人公がアシストフィギュアとして乱闘に入ってくれるというのだ。

調査(?) のこともあってか、1月18日金曜日に購入。プレイしました。

軽い説明

カスタード王国の王子(リチャード王子)とサブレ王国の王子が(いい意味か分からないけど)争っている中、ミルフィーユ王国がやばいので突撃しにいくという、いつもよくありそうなパターンのRPGです。

フィールド内や街の中はいつものRPGのように、上下左右プレイヤーが動けます。

しかし、洞窟の中や城の中では、アクションゲームのように左右移動やジャンプができます。

そして、主人公がカエルやヘビに変身します。この変身できる主人公をどう扱うかが最大のポイントになるわけです。

敵との戦闘もあり、あれこれしながらティラミス王国を攻撃しに来る(?)ゲロニアン軍、そしてボスのデラーリンを倒すことになります。

プレイした際の印象

カエルの為に鐘は鳴る」と検索してたどり着いた方のために、プレイしてどんな感じだったか感想を書こう。

イベント

序盤から激しいイベントが多いかなと感じました。

一応伏せておくと、主人公の多くの○○を○に渡す、ゲロニアン兵を倒した後に○○が起きて隣の街が○○を受ける、○のスイッチを入れた後に○○○の住民から○○○○にされる・・・。

また、おばけの木のように少しトリッキー(?)な操作をしないとたどり着けない箇所があったかなと感じました。

同じ任天堂ゼルダの伝説 時のオカリナでも、最初のデグの樹の地下1階で蜘蛛の巣が開けられなくて詰まったことが多かったです。

そして、後半へ進んでいくと、ミスするとすぐに病院送りというシビアな箇所が多く存在します。

しかし、VCまるごとバックアップを利用すれば復帰が簡単なので是非利用しましょう。

3つの姿に変えられる

前述に書いたように、主人公がカエルになったりヘビになったりできます。

かといって、すぐに出来るわけではなく中盤になると変身できるという感じです。

力の強い人間、水中で泳げて高く飛べるカエル、狭い空間の中を移動できて弱い敵を固めてしまうヘビの3つを上手に利用しないと物語は進められません

人間からカエルになるには水に浸す必要があり、カエルへの変身場所は限定されます。

しかし、水辺があるということは「ここでカエルになりなさい」とアドバイスを示していることでもあるのです*1

パーティを組むことがある

複数人加えて行動したり、巨大動物を連れて行動したりすることがありますが、その光景は圧巻かもしれません。

この場合、敵を一撃で倒すことができます。

その他

このRPGは、主人公が喋ります

しかし、会話になると誰がしゃべっているのか分からないことが多かったです。

一応、人によって話す音を変えているのですが、最初は戸惑うかもしれません。

あと、フィールドの音楽がすごく好き。

WWAとの共通点

WWAとは、公式サイトの通りなんですが、ユーザーが自由にRPGが作成出来るシステムのことです。

ゲームのレイアウトや操作方法、敵の戦闘方法は(変なことをしない限りは)誰が作ってもほぼ同じになるため、ゲームエンジンと言うには自由度が低いかな、でも頑張ればRPG以外も作れるかな、という感じです。

ここで本題ですが、WWAと類似している箇所が多いのです。

もしかして、NAOさんそのゲームを参考してたのかな?と思ってしまうのですが・・・。

  • 画面は撮影です。光が不均等だったりして見辛いです。

マップ画面

f:id:aokashi:20190202021453j:plainf:id:aokashi:20190202021457j:plain
プレイヤーが中央にいないのは仕様です・・・!

画面毎にカメラが移動端に来ると隣の画面へスクロール

キャラクターに触れると話してくれるし、敵に触れると勝手に戦闘が始まる

Aボタンとかを押す必要はありません。

ダンジョンでも同様で、画面上端近くでジャンプしたら上の画面に移動します。

かえってやりづらいですが。

f:id:aokashi:20190202021516j:plain
街のアイテムショップ。リストと比べたら、アイコンが出ていて分かりやすい?

各街にはアイテムショップがありますが、画面のように販売アイテムがカウンターに置かれて、触れると「買いますか?」みたいなメッセージが表示されます

上記の仕様、この時点で分かる方もいますがすべてWWAとほぼ同じです*2

f:id:aokashi:20190202115118p:plain
例えばファンタジーアイランド。カウンターに商品が置かれています。

違いがあるとするなら、プレイヤーやキャラクターの移動単位が0.5マスであることと、画面の移動で弱い敵の配置がリセットされてしまうくらいでしょうか?*3

戦闘

f:id:aokashi:20190202021528j:plain
戦闘中のボコボコ演出。

敵と始まると、自動で開始どちらかの体力が無くなるので戦闘が続きます

そして、後述の先制を除き、何度戦っても同じダメージを受けます。なので戦闘にはランダム性はありません

この仕様もWWAでは同じです。ただし、Bボタンを押すと中断し、逃げる、もしくはアイテムの使用ができます

ダメージの計算式は不明です。素早さの概念が用意されていることもあって、ダメージの出し方はWWAと結構異なっていると思います。

また、先制攻撃が自分か相手かはあまりはっきりしていません。一撃で倒せても相手に先制攻撃されることはあります。

しかし、一撃で倒せる辺りから更に強化すると敵は弾かれます。画面のようなボコボコ演出が消えるので爽快かもしれないです。

メニュー(アイテムボックス)

f:id:aokashi:20190202021542j:plain
メニュー。バラバラに配置されていること、わかりますか?

STARTボタンを押すとメニューが開きますが、各アイテム決まった位置に置かれます

WWAはアイテムを持つと基本的に空いたところに適当に入れる仕様のため、違うんじゃないかと思いますが、作品によってはアイテムの位置を固定にする、つまり決まった位置に置くことが出来るのです。

また、メニューには「KEY」の欄がありますが、鍵を持つと鍵と対応する扉が開き放題。しかも、複数種類あります。ただ、鍵の出番は結構後になります・・・。

作品次第では

f:id:aokashi:20190202021608j:plain
WWAの脱出ゲームであったかもしれない?謎解き

ダンジョンに入ると、プレイヤーはアクションゲームのように横からの視点で動けます。

WWAでは非公式的な方法になりますが、下に進むジャンプゲートを敷き詰めるとそれっぽく扱うことができます。

また、WWAでは特に多い崩れる床もこのゲームにはありますが、WWA作品でよく見かける「連続で配置されていて、落ちるまでに走る」ものとは違います。

その他にも、上の画面のように、数字と記号が並んだ謎解き迷路もあります。WWAでも脱出ゲームではあったかもしれません。

まとめ

忙しい人向けに言うと共通点は以下の通り。

  • カメラの移動方法
  • カメラの移動アニメーション
  • キャラクターのメッセージの出し方
  • アイテムショップの販売方法
  • 戦闘の基本ルール (最初の攻撃が誰かはあまり分かってない)
  • 戦闘のランダム要素の有無 (どちらもランダム要素は無し)
  • アイテムの配置方法 (すべて位置は固定)
  • 鍵の概念 (ただし、アイテムとは別枠で配置される)

逆に、違う箇所は以下の通り。

  • キャラクターが移動する単位 (プレイヤーなら0.5マス、モンスターだと1ドット単位かな?)
  • メッセージの出し方 (このゲームではデカ文字が使われる事もあって迫力がある)
  • ステータス (このゲームには素早さの概念がある)
  • 戦闘途中の操作の可否 (Bボタンを押すと逃げるかアイテム使用が可能)
  • 戦闘1ターンで出すダメージの回数

RPGのアニメーション挙動や戦闘ルール、パーティ構成の仕組みなど、RPGで個性が出せる各項目や各ステータスをすべて調べたり出したりすることはできないため、何%そっくりか数値化することはできません。

ですが、上述の通り類似点はかなり多く、作り方次第では、WWAカエルの為に鐘は鳴るっぽく再現することが可能では無いでしょうか。

そうでなくても、WWAのゲームを遊んでいたり、作っていたりした人には「おっ?」と思う箇所があるかもしれません。

気になったなら、購入してみよう!価格は411円だ!

www.nintendo.co.jp

ちなみに、WWA COLLECTIONの収録作品には、この「カエルの為に鐘は鳴る」の仕様を持った作品が含まれています。収録作品一覧を見ると分かるかも?

  • Nintendo 3DS任天堂株式会社の商標です。不要じゃないかと思いますが、念の為。

*1:すべてがそうとは限りませんが・・・

*2:アイテムショップは作品によって違ってくるかな?

*3:つまり、弱い敵を倒しても別の画面に戻ってまた来れば復活するわけです。

年末、2018年。

f:id:aokashi:20181231171126j:plain

2018年が終わり、2019年に変わろうとしています。

毎年年末だったらこの年を振り返る形になるんですが、こんなの書いてもあまり見ないかなーと最近思っているので、今年は軽く伝えようかと思います。

  • ThinkPad Yoga 260 が何度も修理出しても治らない
  • インターンシップを始めた
  • 初めて北海道へ旅行に行った
  • WWA COLLECTION の開発に協力した

ThinkPad Yoga 260 が何度も修理出しても治らない

現在、メインで稼働しているデスクトップPC1台とノートPC2台を保有していますが、そのうち1台のThinkPad Yoga 260は度重なる原因不明の故障が相次いでいるため、今は使っていません。

aokashi.hatenablog.jp

aokashi.hatenablog.jp

aokashi.hatenablog.jp

この問題は購入した2016年の11月から起きていて、最初はSSDが認識しない(2101: Detection error on SSD(m.2)) 」とエラーが発生していて、OSが起動できませんでした。

2017年の7月に修理に出し初めて、治ったと思ったら1ヶ月後に故障。今度は自動修復が働いてしまい、Windowsが正常に起動できなくなりました。稼働できても、ブルースクリーンが多発していて、普段使いできる状態にならなくなりました。

f:id:aokashi:20180805011658j:plain

この後修理して、また1ヶ月後に故障して・・・の繰り返しで、6回修理に出しましたが、治る気配は無し。あの後1回Webで修理依頼を出しましたが、受信できませんとの返事が来てしまいました。

今は諦めて3年前に購入したMacBook Proに頼っています。しかし、家族共用のため、ストレージの4割が音楽制作に使われてしまい、仮想環境が作れず、Dockerでイメージが置きづらく、不便を強いられてます

本当に・・・どこが悪いのか特定してほしいです*1

ちなみに、あのPCを購入する前に ThinkPad Bluetooth トラックポイントキーボードを購入しましたが、これはインターン先で利用していますし、故障は今の所起きていません。

aokashi.hatenablog.jp

インターンシップを始めた

去年までスーパーで清掃のバイトをしていたのですが、エンジニアとしてアルバイトをしたほうが楽だと思い6月にはじめました。一応インターンシップという形態で働いています。

しかし、始めるまでが結構大変でした。就職活動をする必要がなかったので面接の練習や就職活動のマナー確認無しで選考に進んだところ、会社からの連絡が来なくなったり、不採用通知が来たりしてつらい思いをしました。

就職活動の練習ぐらいはしたほうが良いと思ったことと、当時の自分が何も方向性も知らずに行動していて後悔したなあと感じています。

それと、スマートフォンXperia Z2からXperia XZ2に機種変更しました。分割支払は携帯料金を親が支払っている都合上、認めてもらえず、一括は高すぎて貯めたお金も全部学費に消えるので4年間同じスマートフォンを使い続けました。ただ、この機種に変えた後にXperia XZ3が発表されましたが、有機EL 6インチディスプレイと大型化したことを見ると少し後悔してます。

初めて北海道へ旅行に行った

部活の都合もあって、初めて北海道に行きました。北海道までは東北本線津軽海峡フェリーで移動しました。

個人的には北海道よりも東北本線(+いわて銀河鉄道青い森鉄道)の移動が印象的で、都心から次第に離れていくと、あっ、車両が3ドアになったなあとか、車両の色が変わったなあとか移り変わりが楽しかったです。そして最終的に青森駅になるとこういう風景になるのか!となってわくわくしてました。

f:id:aokashi:20181231171710j:plainf:id:aokashi:20181231171719j:plain
仙台市地下鉄旭ヶ丘駅津軽海峡フェリー

北海道も見どころがあって

  • すごくうまかった函館ラッキーピエロ
  • 1日1本しか走らない新十津川駅
  • 意外と都会で整備されてた旭川駅
  • 建物の歴史そのものよりも移築して集めたことにパワーを感じた北海道開拓の村

とかもありました。ちなみに北海道の中で一番良かったと感じたのは函館でした。

f:id:aokashi:20181231171754j:plainf:id:aokashi:20181231171826j:plainf:id:aokashi:20181231172025j:plainf:id:aokashi:20181231172643j:plain
函館と南平岸新十津川駅までの移動で見つかった於札内駅小樽市総合博物館の謎のオブジェ・・・

次北海道に行くとしたら、帯広とか根室とかに行ってみたいですね。津軽海峡も次は新幹線で越えてみたいですね。それよりまずお金を集めるところからだが・・・。

WWA COLLECTION の開発に協力した

以下の記事を見てほしいです。WWA COLLECTION は様々な方が協力してできたゲームで、割とできるまで系の記事が分散してしまっているので、いい機会でまとめてみたいです。

aokashi.hatenablog.jp

これに合わせて、兄弟と協力してNintendo Switch買いました。スマブラSPポケモンLet's Go ピカチュウも買いました。楽しい。

最後に

2018年は、去年のトラブルがあって積極的に情報発信ができなかったせいでブログが寂れていたので来年は積極的に情報発信できるようにしたいと思います。あとは外部の情報を鵜呑みにし過ぎて自分にプレッシャーを掛けて失敗することが最近あるので、可能な限りマイペースで進めたいなと。

しかし、卒業研究の発表会が迫っているので、まずはそこを片付けます。

それと・・・インターンシップの件で察しが付いていると思いますが、来年4月からは大学院に進学する予定です。あと2年は続くんじゃ・・・。

それでは、関係者の皆さん(関係者でなくてもいいけど)、来年もお会いしましょうー

*1:ちなみに、最近外付けSSDから起動できないか確かめてたんですが、ダメでした

WWA COLLECTIONを作ったお話

WWA COLLECTIONが配信されました。🎉🎉🎉🎉🎉

WWAとは

ここでは説明しないので、WWA公式サイトのこれとか、自分のサークルにある解説記事とか見てください。

WWA COLLECTIONとは

WWA作品45作品を集めた、Nintendo Switchのゲームソフトです(以降、WWA COLLECTIONのことを今作といいます)。

簡単に言うと、ニンテンドークラシックミニやPlayStation Classicとかの旧作品の詰め合わせを、それっぽく行った感じです。

しかし、専用のハードウェアを用意するのではなく、あくまでゲームソフトという形態を取っています。また、旧作品の詰め合わせかというと、ちょっと誤りがあって、2008年〜2018年で作られた旧作のアレンジと、その作品向けに用意した新作を詰めた形になっています。名作倉庫で出ているWWA作品は入っていないです。ごめんなさい。

www.wwafansq.com

Nintendo Switchで遊べるので、テレビに繋げて大画面で楽しんだり、外出先で楽しんだりできます。

パスワードセーブには対応していない分、各作品のプレイ時間は1時間以内に収めています。Quick Save、Quick Loadにはちゃんと対応しています。

開発について

開発はPLiCyに任せているため、どんな内容なのかは自分もはっきり分かっていないです。

自分はどうしたかというと、以下のように収録作品の制作や今作の企画の協力を行いました。

  • 収録作品の1つ「食べ物を取り戻せ!!」の制作を担当しました。
  • 収録作品の制作メンバーに、今作の開発について説明の協力をしました。
  • 収録作品の制作において、デバッグやアドバイスをしたりしていました。
    • しかし、デバッグやアドバイスは制作メンバーが積極的に行ったため、自分はあくまで補助的な立場だったと思います。
  • 収録作品の1つ「Final Stock Game」(ヒラリラー氏作)の画像周りの修正を担当しました。
  • 公式ページ の制作を担当しました。

食べ物を取り戻せ!! について

f:id:aokashi:20181217144147g:plainf:id:aokashi:20181217145338p:plainf:id:aokashi:20181217145344p:plainf:id:aokashi:20181217145341p:plain
食べ物を取り戻せ!!のスクリーンショット

今作用のWWA作品です。悪い動物に食べ物を持っていかれた地域を救うために、旅行中の主人公が行動するゲームです。

WWAにちょっと慣れてきた」方をターゲットとしています。最初はうろつくモンスターの中を歩くけど、ゲームを進むとダンジョンを探索するという設定になります。ただ、今作を始めたときは開放されておらず、チュートリアルとかの低い難易度のWWA作品をクリアしておくことで開放されると思います。

現代を舞台にしたWWA作品で、なるべく古い時代のアイテムは排除しています。例えば、攻撃力や防御力を上げるものはりんごやぶどうにしたり、武器や防具の概念をなくしたりしています*1

グラフィックは一昨年や去年制作したWWA作品を利用していて、画像素材はすべて自分のもので調達しています。

制作にあたっては、変な行動をした際のメッセージ作成が楽しかった一方で、攻撃力と防御力のバランスや、メッセージ内容の矛盾の確認やその代替策で苦戦しました。

Aokashi Homeに公開する予定は今の所無いですが、それっぽいものを制作しようかなと思っています。

最後に

PLiCyスタッフや収録作品の制作を担当したメンバーの方々、ご協力いただきありがとうございました。🙇‍♂️🙇‍♂️🙇‍♂️

www.wwafansq.com

ということで、今日配信です。是非お買い求めください!

ec.nintendo.com

Nintendo SwitchWWA風のドット絵をおいて終わりにします! 任天堂の商品なので素材として使わず見るだけにしてください!

f:id:aokashi:20181219220556g:plain

*1:しかし、宝箱は宝箱のままです。ダンボールでも良かったのかな...

WWAのアレ

お久しぶりです。前の投稿から半年以上経っていましたが、この間に

  • エンジニアのバイトが見つからなくて絶望的になったり
  • PCが6回も修理に出してもすぐに壊れて、最終的に修理に出せず放置したり
  • そのせいで残りのPCが容量不足とかで不便を強いられたり
  • エンジニアのバイトが見つかって働き始めたり
  • ShufLarをプレイしてたり
  • スマートフォンを4年ぶりに買い替えたり
  • 北海道へ旅行に言ったり
  • 学費を支払うときに所持金の少なさに親に怒られたり
  • せっかく働いた金が全部学費に持っていかれてやる気を失ったり
  • MinecraftのSnapshotで新しい村の建物が凝ってて生成される建物を調査したり

・・・してましたが、これらの記事を書く時間が無く、書こうとしても多分反発受けるんじゃないかとか、他の人がそれっぽく書いてあるからもう良いやとか、そう思って投稿しないまま下書きで放置してました。

ですが、WWA作品を集めたゲームソフトがなんとNintendo Switchソフトとして販売*1することになりましたので、とりあえず報告だけ書こうかなと思ってこの投稿を書きました。

明日配信日です。明日どんな感じで企画してたか、作ってたか報告したいなあと思います。ちなみに、下のページは公式ページです。自分が作りました。💪💪💪

www.wwafansq.com

・・・

と、来月が卒業研究の発表で、9月や10月がサボっていたのが原因で今どうしようかと慌てています。単位落ちて卒業できなかった、という事態にならなければいいけど。

*1:ダウンロード販売のみなので、正確には配信ですが。

WWASAVE.js のdocker対応とフロントエンドの修正を担当しました

WWASAVE.js を docker に対応したり、フロントエンド部分を修正したりしました。

github.com

  • 現時点では develop ブランチにマージしてません。試してみたい方は fix-css ブランチからどうぞ。
  • ちなみに docker 対応とフロントエンド部分修正は1つのブランチでやっちゃいました。ごめんなさい。

WWASAVE.js とは

WWASAVE.js は、WWA Wingのセーブデータを即時に保存できるWebアプリで、hirarira が開発しました。WWAJavaアプレットだった時代に開発された WWASAVE CGIWWA Wing向けに移植したものです。

これまでWWA Wingのゲームを中断したい時はセーブデータを保存するためのパスワードを取得し、一旦テキストファイルに置く必要があります(下図参照)。再開したい時もテキストファイルを読み込む必要があります。

f:id:aokashi:20180419143621p:plain

WWASAVE.js はセーブデータの保存と読み込みを簡単にしてもらえます。中断したいときはゲーム画面にある「保存」ボタンを押すだけ。読み込みたいときは保存したデータをそのまま遊べばすぐに再開できます。

担当したところ

docker 対応

WWASAVE.js を docker-compose に対応しました。これまでWebアプリを動作するには

  1. 実行環境の構築(apache, php, mysql)と設定
  2. Webアプリのソースファイルのダウンロード
  3. (必要に応じて) 1. の設定を元に 2. の設定ファイルを修正
  4. アドレスを打ち込んで接続!

と手間が掛かりましたが、docker-compose だとソースファイルのダウンロードと設定ファイルの修正、コンテナの起動だけで済みます。

docker 自体の詳しい説明は割愛します。扱いにはコンテナやイメージについて知っておく必要がありますが、知っておくと便利です。

フロントエンドの修正

f:id:aokashi:20180419141101p:plain

CSSがヘボいとのことでしたので修正しました。

ボタンやヘッダーなどのCSSコードは、全ては自分の手で入力せずCSSフレームワークBootstrap を使用しました。フロントエンドの修正の中で一番大変だったのは Bootstrap のCSSの配置方法でした。

CSSフレームワークをWebアプリ上で使うには様々な方法があります。

  • CSSファイルを直接配置
    • 今後、CSSファイルのアップデートする際にまたダウンロードする、これは大変
  • CDNCSSファイルを持っていく
    • ネットワーク環境が乏しいと読み込みに時間が掛かる
  • bowerCSSファイルをインストール
    • bower 自体アップデートが行っていないみたいで、Yarnwebpackを使ったほうが良いと案内されている
    • つまり時代遅れ...?

以上のようなことから、アップデートを少ない操作で済ませられる方法として、Yarnとwebpackでjsファイルを作る方向で行きました。しかしながら、webpackの設定ファイルがうまく記述できなかったり、なぜCSSファイルもJavaScriptファイル1つにまとめるのか理解できなかったりして、躓いてました。YarnでインストールしたCSSファイルをコピーで持っていく方法もありましたが、あまり推奨するものではありません。

f:id:aokashi:20180419141702p:plain

production ビルドだとビルドに時間が掛かったり、HTMLの出力が結構見辛かったりと、課題はまだまだありますが、なんとか形にすることが出来ました。現時点では雑に作った感じがしますが、またある程度勉強出来たら、もっと改良してみたいですね。

おまけ: webpack の設定項目名の疑問

ちなみに、CSSを読み込む際に使う css-loader や style-loader を設定する際に、style-loader の記事では対象のファイルを正規表現で指定する項目名が test になっていて、これが不自然に思ってたことがあります。

これについて聞いたところ、どうやら正規表現で指定するメソッド名の test から持ってきたそうです。

developer.mozilla.org

2017年が終わるので

2017年そろそろ終わりを迎えるのでいつも通り振り返ってみます。

今年は努力と失敗を重ねた年だったと思います。去年の2016年は積極的に勉強会に参加する傾向がありましたが、今年は作品を出したり、試しに動かしたりする傾向が多かったです。

得られたもの

今年制作した作品はこんな感じです。また、これによって得られたスキルも合わせて載せます。

技術的なもの

  • Aokashi Home
    • VPS(サーバー)の設置スキル*1
    • git によるブランチの分け方
    • Hugoによるテンプレートの使い分け方
    • CI による自動化方法
  • WWA Wingのクラシックモード
    • CSSによるテキストの扱い方
  • インターンシップ
  • Node.js(express) で動作するWiki
    • npm の扱い方
    • JavaScriptの非同期処理と同期処理の扱いについて*3
  • 大学の研究室によるソフトウェア開発
  • WWASAVE.js のDocker設定ファイル(未完成)
    • docker-compose.yml による複数コンテナの扱い方
  • WWA Wing PE(現在製作中, 詳細は後述)

aokashi.hatenablog.jp

aokashi.hatenablog.jp

趣味

  • (作品ではないが)PC
    • PC内部の配線の仕方
  • WWA(とRPGツクールMV)の素材制作(去年に引き続き)
    • ドット絵の制作スキル*5
    • ゲームで扱いやすいサイズの決め方
  • WWA FanSquare
    • CSSフレームワークの扱い方(ここでは Material Design Lite)
    • CSSのクラス命名規則の扱い方(BEMやSMACSS)
    • pixiv BOOTH による個人間での商品の販売方法
    • OGP によるSNS上でのイメージの表示方法

aokashi.hatenablog.jp

aokashi.hatenablog.jp

その他

  • ArchLinux のインストールと大学での活用
    • Linuxの運用スキル、主にパッケージの扱い方
    • Linuxで利用できるソフトウェアの選定(これはスキル...か?)
  • (作品はどうかは別として)大学のレポート
    • TeXの扱い方

aokashi.hatenablog.jp

aokashi.hatenablog.jp

まとめ

このように、去年と比べて外部に顔を出す機会が減ってしまったかと思います。また、幾つかトラブルもあって周りにご迷惑をおかけしてしまったこともありました。申し訳ありませんでした。

ちなみに、今年は自身で行動することが多かったです。実は3月辺りでプログラミングのバイトに入るつもりでした。しかしながら、うちの学部の性質上、授業講義で休みの曜日が全然取れず、バイトの参加は無理だと9月に諦めてしまいました。来年は授業に出席することはおそらく無い*6ので、なるべく迷惑を掛けない範囲で外部で行動していきたいです。

遊んでたもの

(作者さんにはつらい話ですけど)Real Train Mod が Minecraft 1.12 に対応したら何か動き出すつもりです。

WWA Wing PE

現在、WWA Wing の拡張機能である WWA Wing PE を開発しています。WWA Wing に WWAeval のイメージ表示機能を(完全移植ではないですが)追加する拡張機能です。

この WWA Wing PE を使うことによって、フィールドを暗くしたり、エフェクトで派手な攻撃を演出したりすることが簡単にできるようになります(多分)。

ある程度完成したら、 WWA Wing に機能追加していこうかと思います。

最後に

最近は関数型プログラミング言語の Haskell の学習を初めてみました。使う側も開発する側も扱いやすいソフトウェアを頑張って開発していきたいです。

それと、今年PCを組み立てたんですが、これからはノートPCをメインに使う傾向が多いです。プログラミングに使うソースファイルを毎回2つのPCの間で転送するのが面倒ですので...*7

ということで、来年もよろしくお願いします。

*1:主に公開鍵認証によるSSH接続の辺り

*2:前からある程度は知っていたけど、知らなかったものもあって使っていて便利に感じました

*3:個人的にはまだ理解していないですが...

*4:主にステートパターンによる状態ごとの処理の分割

*5:主に光の当たり方による色の使い方

*6:仮に取得できない単位があっても、バイトの行動に支障は出ないはずです。

*7:余談ですが、ノートPCをメインにすると思い始めた頃にはノートPCの故障が頻発したことがありました。現在は落ち着いています。