開発報告（5/11）
おひさしぶりです。相変わらずちまちまと開発しているので、進捗報告をばをば。 先月からの大きな進捗は概ね以下のような感じです。
「みんなでつくるダンジョン」の進捗報告
ほかのマップへ移動できるようになった
ほかのマップに移動できるようになって、ようやくやりたいことの骨組みができ始めてきたぞー、という気持ち。 こんなかんじにマップに「コネクタ（仮称）」とよばれるブロックを置き、接続先のコネクタを選んであげるとマップ間移動ができるようになります。
まだまだ作り立てほやほやなこともあり、UIは微妙な感じですが、これからもうちょっとカッコ良くしていきたいなと思っています。
いまは自分のつくったマップのみ接続先として設定できるようになっていますが、これから他の人が作ったマップとも接続できるようにしていきます。
あたり判定を改善した
あたり判定を改善して、アバターの位置補正処理（壁や床に当たったときに止めたりする処理）がよくなりました。
いままでは、以下のように接触部分をバネ・ダンパーモデルっぽくしてあげて、マップに拘束された（動かない）物体にめり込まないように アバターの跳ね返り処理を行っていました。めり込み量とばね定数からなるばねの反発力を使って、アバターなどの「固定されていないオブジェクト」の 位置を補正します。
こうすることで、複数の物体が重なったり押し込まれたりした場合についても、ばねの反発力が作用しあうことで位置補正が自然と行われることが期待できるため、このようにしています。
しかしながら、めり込み量が大きいとアバターが跳ねてしまうほか、ばね定数が小さいとめり込みから復帰しなかったりとなかなか調整が難しいなぁという感じでした。 そこで、新たに「拘束条件を求める処理」を追加して、壁に接触している場合のめり込み方向の速度を補正してあげる処理を追加しました。こうすることで、めり込みすぎを防止したりできるので、 ばね定数の調整などもしやすくなると考えました。
こんな感じに接触ツリーをあたり判定時に構築し、壁や天井などの「マップに拘束されている」部分からツリーを辿り、接触面の法線ベクトルと力の向きから修正すべき速度の方向や大きさを決定します。
これである程度はマシになったので、しばらく様子見をしてみようかなーという感じです。
ロゴを試しに描いてみた
やっぱり見た目がある程度ちゃんとしていないと開発のモチベーションが維持できないなという気持ちになったので、（サービス名も決まっていないのにというツッコミはありつつ）とりあえずロゴでも書いてみました。
いろいろなマップを組み合わせてつくられた空間を動き回るというイメージです。（そのまんまじゃないか）
ロゴ、以下の理由から描くの難しいなーって思います。個人開発なのでよいじゃないかといえばそうなのですが、やっぱりもうすこしこの辺のスキルも欲しいなと思うのでした。
- ぱっとみてわかる図にしなければならないこと
- ある程度大きさの変更に耐えうること（特に小さくしたときでも見づらくならないこと）
- （デザインにもよるけど）シンプルなほうが良い場合が多いこと
ロゴは「Inkscape」というベクトル画像をつくれるソフトウェアで描いたのですが、このソフトを使っている人をあまり周りで見ないなぁという気持ちになったので、いつか使い方記事でも書いてみようかな。
雑記
進捗報告だけのブログだと、どうしてもネタがあれでなかなか筆が重くなってしまうので、もうちょっとどうでもいいことを書いてもいいかなと思い始めています。 というのも、こうして進捗報告記事を書くときに「あれ、なに実装したっけ？」となりがちなので。。。
継続はなんとやら、ということで、文章書くのに慣れて（というか面倒くさがりな部分を直して）もうちょっとこまめに開発報告できるといいなぁ。
ではでは。
さいきんの開発報告など
ちょっといろいろありまして、開発作業などが滞っており、現在スローペースで開発しています。
みんなでつくるダンジョンの開発状況
ブラウザでマップをつくって探検できる予定のウェブサービス「みんなでつくるダンジョン」のほうは、こんな感じに進捗しています。
キャラが歩くようになった
キャラが歩くようになりました。これであたり判定などのデバッグがしやすくなったので良かったなぁという感じです。
※床や壁などの画像は「@bunaguchi様」、キャラクターは「墨cm」様からお借りしました。ありがとうございます。
まだまだキャラと地面とのあたり判定が微妙だったりするところなどがあり、そのへんはこれから詰めていかないといけないのですが、画面上で動かせる環境ができたのでバシバシ試しながら作っていければよいですな。
キャラクターと地面天井などの各種オブジェクトとの跳ね返り処理は、ばねとダンパーをモデルに計算してみているのですが、条件がそろうとキャラクターが勝手に飛び跳ねてしまったりしてしまいます。 計算処理速度との兼ね合いも見て、力の伝達っぽく判定するのはやめるかもなぁ。JavaScriptの出せる力をまだ見極められていない感があるので、その辺は都度調整して対応していきたいですね。
ちなみにキャラクターは1アカウント1つ持つことができ、画像などは変更できるようになっています。（いろいろなパラメータを用意していじれるようにしたいな）
グリッドに沿って壁などを配置できるようになった
グリッド（画面上の点々）に沿って壁などを配置できるようになりました。これでアクションゲームっぽい画面を比較的簡単に作れるようになったかな。。。
いわゆる「マップエディタ」とは異なり、マップチップ（タイル）を並べてマップを作るというよりは、壁や天井などの大きめの四角いオブジェクトをならべて作るインタフェースになっています。 自由な位置にオブジェクトを配置できるようになっていますが、グリッドに沿って配置できるようにすることで、マップエディタでつくれるようなステージも作れるようになりました。
ぴこぴよにosushiのリンクを貼ってみました
ぴこぴよにosushiのリンクを貼ってみました。お寿司を送っていただいてもこれといったお返しができるわけではないのですが、くれると私がよろこびます。 「ぴこぴよ」(picopiyo)：ドット絵ツイート支援ツール
まとめ
というわけで、スローペースになってしまっていますが、ちょっとずつ手を動かしたりしています。「みんなでつくるダンジョン」のフロントエンド側はVue.jsを使っているのですが、Angularを触らなければいけない状況になったりしている関係もあり、どこかでAngularをつかった小さいプログラムを作りたいなぁと思ったりしています。
ではでは。今後もしばらくはスローペースになったりちょっと開発をお休みしたりすることもありそうですが、ちょいちょい更新情報を報告できるようにがんばります。
作品ページをつくりました・続
しばらく更新をさぼってしまっておりました。最近進捗報告ができておらず、なかなかもんもんとしておりますが、ちまちまと作業しておりますのでもう少々おまちください。 （「みんなでつくるダンジョン」については、画像募集しておきながら、ぜんぜん活用できていなくて申し訳ないなと思っています）
そういえば、先日に「作品ページを作りました」という報告をしましたが、細かい点で（技術的に）苦労したので、その辺の話をまとめました。 （少々技術的なお話をば。）
作ったサイトはこれ。 garakuta-toolbox.com
デザイン
私は最近「Vue.js」にはまっておりまして、これを使って「みんなでつくるダンジョン」も開発しています。 その過程で「ウインドウっぽいものがつくれるコンポーネント」を作ったので、せっかくだからそれを活用しよう、ということで Windows風デザインのウェブサイトを作りました。
また、こちらのX68000データベース をみて、「かっこいい！」と思ったことも理由の一つです。
ここで面倒なのが、ウインドウの前後関係を管理する部分です。 こんなかんじに、ウインドウをクリックすると最前面に表示されるのですが、このときクリックされたウインドウより手前に表示されているウインドウの 前後関係をいい感じに設定してあげなければいけません。
このへんは、「Vuex」をつかってウインドウを管理することで解決しました。ウインドウを最前面に表示したり、前後関係を設定するmutationを定義して、 よしなに処理しています。
（このへんのソースコードは、まだちょいと整理できていないので今回は掲載を見送り。。。）
ルーティング
1ページで全ての情報を表現するので、何も考えずに作るとURLが一つになります。 これでは特定の記事について紹介するためのURLが存在しないことになり、とても不便です。
そこで、今回はJavaScriptでルーティングを行うようにしました。 ルーティングライブラリを用いてもよいのですが、私自身のお勉強もかねて、簡易なプログラムを組んでみました。
まずは、こんなクラスを定義します。
export default class router { constructor(baseURI, routeInfo) { this.baseURI = baseURI; this.routeInfo = routeInfo; } route() { let parameter = location.href.replace(this.baseURI, ''); if( !this.routeInfo[parameter] ) { return false; } this.routeInfo[parameter].callback(); return true; } }
この router クラスは以下のように使います。コンストラクタに起点となるURL（たとえば https://garakuta-toolbox.com ）とルーティング情報を渡しておきます。
ルーティング情報は、URLの情報をキーとしたオブジェクトで、コールバック関数を持ちます。
route() を呼び出すと、location.href を見て現在のURLを取り出し、一致するルーティング情報のコールバック関数を呼びます。
routes = new router('https://garakuta-toolbox.com', { 'contents/introduction/memorian': {callback: ()=>{showMemorian()}}, '/': {callback: ()=>{resetDialogVisible()}}, }); this.route();
あとは、サーバ側で（画像やjsファイルを除く）ファイルにアクセスしようとしたときは、常に index.html を返すようにしておけば
URLに応じた処理を行うことができるようになります。（Apacheなら .htaccess を設定するなど）
これで「URLに応じた処理」ができるようになったので、たとえば https://garakuta-toolbox.com/contents/memorian にアクセスがあったら「めもりあん用のウインドウを表示させよう」みたいなことが
できるようになります。
URLの取り扱い
今回作ったページでは、「最前面のウインドウを指すURL」をアドレスバーに入れるようにしています。（うまく言語化できない。。。）
じぶんで文章を書いていてもなかなかしっくりこないので、以下の動画をご覧ください。
これは、 History API を活用することで実装しています。 （参考：https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history）
history.pushState(state, "", url);
上記のようにすると、指定した url をブラウザの履歴に追加でき、かつアドレスバーに url を設定できます。
これを「ウインドウが選択されたタイミング」（＝ウインドウが最前面に表示されるタイミング）で実行しています。
また、ブラウザの「戻る」ボタンが押されたとき、先ほどのrouterの route() を呼び出すことで対応するウインドウが最前面に表示されるように実装しています。
さいごに
今回作ったサイト、閑古鳥がないておりますが、ちょいちょい更新していければなーと思っているので、思い出したころにでもちょいちょい覗いていただければと思います。 ではでは！
作品まとめ用のウェブサイトを公開しました
あけましておめでとうございます。 今作っている作品をなんとか形にできたらいいな、というのがとりあえずの今年の目標です。
新年初めの公開情報をば。そろそろじぶんの作品をまとめたサイトが欲しいなぁと思っていたので、じぶんの作品紹介ウェブサイトをつくりました。
※スマートフォン・タブレットでは正常に閲覧できません。そのうち対応しますので、それまでお待ちください。
古いWindowsのような見た目のウェブサイトにしよう、と思って作り始めたのですが、なんだかいろいろと実装が増えて、結構な 作業量になってしまいました。（ウインドウの管理部分とか、ブラウザの履歴管理まわりとか。ちょっと変わったUIにしようと思ったら、 なんだか大変なことになってしまった。。。）
実装まわりのもろもろは、そのうちブログ記事にできたらなーと思っています。
そんなこんなで作ったサイトですが、肝心のコンテンツがまだいろいろ足りないな、という感じなので、 随時更新していければと思っています。
ではではー。今年もよろしくお願いします。
2017年の週末開発ふりかえり
（これは2017/12/31に書いています。ちょいと時間がないので乱文になっているかも。。）
そろそろ年があけるので、今年の週末開発について振り返ってみようかなーと思います。 だいたい以下のようなことをしました。
概ね時系列順になっているかな？と思います。ひとつずつふりかえってみます。
あいこんくらぶの「おへや機能」のリリース
あいこんくらぶでは、作品を公開する手段として「マイページ」機能を提供していましたが、 原寸大のドット絵をかわいく表示するにはちょいと不満がありました。（原寸大のドット絵をマイページで表示すると、余白ばかりでスカスカになってしまうので。。。）
そこで、もういっそ自由にドット絵をならべて、自由なサイズで公開できるようにすればいいのでは？と思い立ってつくったのが「おへや機能」です。 簡易な図形の描画や背景機能、文字列挿入機能、バックアップ機能など、作っていくうちにいろいろ盛り込んだなぁという感じになりましたが、 個人的にはそこそこ満足のいくものができました。
おへや機能でつくったわたしのページはこちら
コードスニペットメモツール「めもりあん」のリリース
あいこんくらぶの開発も概ね落ち着いてきたので、そろそろ次の何かを作りたいなぁと思っていたときに、 「Vue.jsをさわってみたいなぁ」という気持ちになったので作ったツールです。 「この技術がつかいたいな」という気持ちで開発を始めたのは初めてかもしれません。
また、ちょうどこのとき「Ruby on Railsチュートリアル」というものをやっておりまして、これは Ruby on Railsの開発技術を学ぶのにもってこいな教材なのですが、途中で「あれ？これどうやって書けばいいんだっけ？」となったときに 長大なページの中から該当場所を探すのに大変な思いをしていました。
そんなこんなでつくったので、みなさんもつかってみてください！
ステージデザイナーの開発停止
ステージデザイナーは2013年以前から（！）ちまちまと開発していたのですが、利用者数が伸びないことや、最近放置気味だったこと、またソフトウェアとしてもいろいろと課題を抱えていたので、 思い切って開発停止とすることにしました。（期待いただいていた方々には本当に申し訳ありません、という気持ちです。。。）
長いことつくっていたソフトだけに思い入れも大きかったのですが、ここに書くと長くなってしまうのできょうはここまで。
いろいろと機能を盛り込みすぎて、操作が複雑になってしまったことなどが失敗点かなぁと思っています。 しかし、ステージデザイナーで得られた開発技術や知見も多いので、これからの開発に生かしていきたいです。
ぴこぴよのアドレス変更
「ぴこぴよ」は「あいこんくらぶ」の派生サービスとして提供していたのですが、いまや「ぴこぴよ」のほうがアクセス数で上回り、 そのへんが影響して旧来のアドレスだともろもろ問題がありそうだと感じたので、アドレスを変更することにしました。
もともとはあいこんくらぶの機能を切り出して提供していたこともあり、あいこんくらぶのシステムと密結合になっていたので、 なかなか面倒な作業でしたが、なんとか作業を完了できたな、という感じです。
このへんについてくわしくはこちら
「みんなでつくるダンジョン（仮称）」の開発開始
みんなが思いのままにつくったマップを自由に移動しながら探検出来たら面白いだろうなぁと思って作りはじめました。 また、Twitterなどで素敵なゲーム素材（っぽい画像など）を描いている方が「ゲーム作りたいなぁ」とつぶやいているのを見ていて、 ゲームまではいかなくても、マップをかんたんに作れて公開出来たら楽しいだろうなぁと思ったのも、開発を始めた動機のひとつです。
いまのところ、なんとか飽きずに作り続けています。
じぶんの力量不足的な問題で、技術的にもなかなか大変なこともあり、苦労していますがなんとか完成できるといいなぁ（とは言っておりますが、完成はまだ保証できない程度の進捗です）。
こちらについては、これからもちまちまと情報を載せていければなと思っています。 （スクショ用素材の募集も引き続き行っておりますので、よろしくおねがいします！）
まとめ
今年もそれなりにいろいろつくったなぁという感じです。Vue.jsやRails、ちょっとだけWebGLやWebAudioも触ったりと、技術的にも それなりにいろいろ触れることができました。
一方で、つくったものが思うように使っていただけなくて、落ちこむことが多い年でもあったなと思います。 趣味開発なので、好きなように作ればいいのかもですが、やっぱりたくさんの方々に使っていただいたほうがやる気も出るので、 来年以降もこのあたりを意識して開発していければよいですね。
また、ドット絵Advent Calendarに参加しましたね。ふだんはこういうイベントに参加することに対して及び腰なのですが、 もうちょっと積極的にイベントごとなどに参加していきたいな、と思いました。
ではでは！
「みんなで作るダンジョン」の進捗報告スクショ用の画像をゆる募します
※2018/1追記：画像をつかっていいよ！と言っていただいたみなさま、ありがとうございます。ただいま進捗が芳しくないので、画像を活用した進捗報告はもうちょっと遅れそうです。
最近作っている「みんなでつくるダンジョンっぽいやつ（仮称）」の進捗報告などをやっていきたいと思っており、 こんなかんじの記事を投稿したりしています。
スクリーンショットは「おぉーやっているなぁ感」が大事だなと思っているのですが、絵を描く時間やモチベーションがわかず、苦労していたりします。 そこで、マップチップやキャラ画像をゆる募したいです！
素材の要件・仕様
- マップチップ or キャラチップ or アクションゲームっぽい足場や壁や背景
- マップチップ・キャラチップの場合は1コマあたりのチップサイズは32px以上
- 「チップ・タイル」である必要はないです
- アクションゲームっぽいスクリーンショットにつかってOKな素材であること
- たとえばRPG用に作った画像でも、アクションゲームっぽく使うことができればOK
- PNG画像（透明部分は透過になっていること）
- アニメーションの場合は、アニメーションの順番が分かるようになっていること
- 明らかに見てわかる場合はコメントなどは必要ないです
- ご自身で描いた素材であること・二次創作でないこと
- 全年齢向きであること
素材の利用条件
以下の条件で利用させていただきたいと思います。
- このブログや（将来的に作成するかもしれない）作品紹介ページのスクリーンショット用にのみ用います
- 利用例はこちら(過去ブログ記事)
- 作品に組み込むことはありません。（将来的には作品組み込み可能素材も募集したい。。。）
- 掲載の際は、（掲載不可の希望がなければ）素材提供していただいた作者の配布URLもしくはウェブサイトを併記します
- 頂いた素材は必ず掲載するというお約束はできません（ごめんなさい！）
- 限られた時間での制作活動なので、もしかしたら掲載できないかも。。。
- 1枚のスクリーンショットに他の方の素材も同時にうつることがあります
素材つかっていいよ！な報告のしかた
素材使っていいよ！と言っていただける方は、素材の場所のURL（自サイトのURLや画像共有サイトのURL）を、このブログのコメントもしくは わたしのTwitterのDM まで教えてください。
（ウイルス対策などが面倒なため、メールの添付ファイルやzipファイルなどのアップローダでは、いまのところ受け付ける予定がありません。透過PNGであれば劣化の心配がないので、Twitter経由でのデータやり取りもOKかなと思います）
ではではー
「みんなでつくるダンジョン」の開発状況2
開発状況の報告をばをば。 まあなんとか飽きずに開発を続けられています。
エディタっぽくなってきた
こんなかんじに、アイテムやキャラや壁が置けるようになりました。 これからあたり判定を適用したり、動くようにしたり、ほかのマップへ移動できるようにしていきたいなーと思っています。
きょうまでに実装した機能は以下の通りです。（すべて途中段階）
- アニメーションエディタまわりの実装
- 「オブジェクト」（壁やキャラクターの素体みたいなやつ）の配置まわりやアニメーション設定まわり
- マップの保存処理
- アバター（マップ内を移動できる自キャラクタ）のエディタまわり
- マップ間移動のための「コネクタ」を配置できるようにした
懸念点として、「どこのサーバ（ホスティングサービス）に置こうかな」問題があったりします。 既に公開しているもろもろのために毎月サーバ代などを払っているし、残念ながらお金持ちではないので、費用的な面はかなり問題だったりします。
（サーバのスペックによってできることとできないことが出てきそうなので、ほどほどに作ったらまじめに検討しないとな。。。）
最近は個人開発者な方々に投げ銭できるシステムが整備されてきていたりと（※1）、 週末開発でもうまいことマネタイズしていこうという風潮があるようなので、 私にもそういうノウハウが必要なのかもなーと思ったりもしています。
（でも、お金を頂くと責任が生まれたりして面倒になったりしそうだな、とも思っているので、方法を考えないとですね。）
ではではー。
