開発報告(6/1版)

前回の開発報告から日が開いてきたのでひさびさの報告をばをば。とはいいつつも、サーバ側で処理するあれやこれやを実装していたりしたので、派手な成果はないのでした。

とりあえず現状のマップエディタを使ってみた

作ってばっかりいると、ついつい使うのを忘れてしまうのですよね。というわけで、ちょっとマップを作ってみました。画像は墨cm様からお借りしたものを使います。 マップチップを置くとそれっぽくなったなぁとうれしくなりつつ、マップに使えそうな画像一式を送っていただきありがたいなぁと思いました。

(このようなサンプル画像に使っていい画像を募集しているので、「つかっていいよ!」という方はお声かけください!利用条件などはこちらです。ただし、作者は気まぐれなのでいつ利用させていただくかはわかりません...)

f:id:piyorinpa:20180531225118p:plain
マップを描いてみたよ!

やっぱり実際に使ってみるの大事ですね。アイテムなどの配置のしづらさや微妙なあたり判定バグなどがいろいろ出てきて、まだまだいろいろ作りこまないとなぁと思ったのでした。道のり険し...

レイヤー機能を実装した

先ほどの画像で樽や看板が草に隠れている場面が映し出されていますが、このような表現を実現するために「レイヤー機能」を実装していたりもしました。画像エディタとか、ツクールとかウディタとか使っている人にはおなじみのやつですね。 マップチップに前後関係を持たせることができるようになるので、ちょっとだけ表現の幅が広がりました。ちょっとだけ実装のお話をすると、(描画にはPixiJSを利用していますが、)PixiJS単体ではレイヤー機能はありませんが、拡張ライブラリを入れることでレイヤー機能を簡単に利用できます。公式のサンプルはこちら。 https://pixijs.io/examples/#/layers/zorder.js

f:id:piyorinpa:20180531225740p:plain
レイヤー番号を指定して所属レイヤーを決めます

PixiJSはV5が開発中のようですが、楽しみである一方、アップデートがスムーズにいくといいなぁとちょっとだけ恐々としています。色々見こしてレンダラまわりはある程度融通がきくように作ってはいるつもりですが...

そのほか

あとは概ね以下のようなことをしていました。(主に開発環境の構築まわりとかのお話なので、「へぇー」程度に眺めてください)

  • Webpackのアップデートなど、開発環境まわりの整備
  • コネクタまわりの公開設定などまわりの実装(このあいだのブログ記事に書いたこいつを実装している最中)
  • サーバ側のアプリケーションのテストコード書く準備など
    • サーバ側アプリケーションにはRuby on Railsを利用しています
    • とりあえずRSpecとfactory_botを入れてテストコードが書けるようになりました
    • 今回はサーバ側もちょっと複雑になりそうと思ったので、テストは書かないとなぁとおもいまして...
    • フロントエンド側のテストどうするかなぁ...

雑記

作っているとやっぱり見た目は大事だよねと思うわけです。この間、開発環境一式をつめこんで4KディスプレイなPCに接続してみたら、「あれ?なんか違うなぁ...」となってしまい、ちょっとだけ落ち込んだのでした。 ディスプレイによって色味や解像度が違うので、いつも使っているPC以外に接続してみた目を確認するのは必要かもなという気持ちになりました。

また、見た目がよろしくなると「うぉーつくっているぞー」感が出てやる気が上がったりするので、もうちょいとその辺頑張りたいなと思ったのでした。

さいきんはウェブ上にすてきなアニメーション効果などをふんだんに使ったサイトをたくさん見られるので、その辺を参考にしながらいい感じにしていければよいですね。(最近は、そういうサイトを見ていると「いいなぁーこういうのをつくりたいのよなー」という気持ちになったりしています)

ではではー。