自分の最初のホームページ「Coden City」の設立から10年が経ちました。
Coden City は2010年2月3日、ブラウザゲームのWWAを設置するために設立しました。当時、自分はまだ中学生でした。
続きを読むAokashi Home のWWA素材を整理しました。また、いくつかWWA素材も追加しました。
素材は Aokashi Home のWWA素材ページ からどうぞ。タグ「WWA素材第3世代」から探すことができます。
Set16
を削除し、代わりに 19Set
を追加
19Set
は WWA Contest 2018 の素材部門に投稿した「現代風WWA素材画像」をベースに改良したものになります。16People-Player
として独立しました18TreasureBox
を追加
18Door
を追加
$dirmap
マクロで実装できます。18Floor
を追加
18Furniture
を更新
BuHouse18
と BuBuilding18
を更新
BuHouse18
は青い台形の屋根と工場の屋根 *1 を追加しました。BuBuilding18
は白い壁を追加しました。この壁に限って凸型の建物が作れるように一部パーツが追加されています。概ね、去年 WWA COLLECTION 2 に収録された 謎めいた機械を追い求めてで使用した素材を、当サイトの素材に反映させた形になります。
使用したくても素材がないから使用できなかったダンジョンの扉や人物キャラクターがここで追加されたので、これを機会にWWAゲームを作成してみてはいかがでしょうか?
素材の順番がかなり崩れているようなので、次はそっちの整理でしょうか・・・。
*1:工場の屋根というと、のこぎり形を想像しますが、今回はそうじゃなくて平屋根になります。
はてなブログのデザインテーマを投稿しました。
今回投稿したテーマは「Vertical BlogTheme」です。明るい色と暗い色の組み合わせを目指しました。左側のコンテンツは明るい色で、各記事の項目には白い背景色を与えています。一方の右側のサイドバーは暗い色で、デザインのカスタマイズで背景を変更すると反映されます。サイドバーの暗い色が縦に伸びる意味で「Vertical」と名付けました。
WordPress の公式テーマ Twenty Fifteen をベースに、昔制作した WordPress のテーマの要素と、はてなブログの環境に合う要素を加えながらデザインしました。
Twenty Fifteen は左側にサイドバーが配置されていますが、はてなブログでは右側にサイドバーを配置することがほとんどのため、右側に配置を変更しました。また、ヘッダーやフッターも、左側のコンテンツに配置しています。
スマートフォンでもタブレットでも同じデザインで表示できるレスポンシブデザイン対応のテーマです。
サンプルは下記のブログからご覧になれます。
vertical-blogtheme.hatenablog.com
既存のテーマであれば、「Gravity」と類似しているかもしれません。こちらは3カラムになります。
前からブログのデザインを変更して、ブログ更新のモチベーションを上げれば良いなと思っていました。
そこで、自分でテーマを作ろうと思ったのですが、結構手間が掛かりそうだと思い、作成せずに既存のテーマにカスタマイズを加えれば良さそうと判断しました。
しかしながら、後で調べてみると、はてなブログのデザインテーマ作成はCSSファイルのみということが分かり、これなら短時間で作成できると思って開発に至りました。
短時間で作成できる と言いましたが、はてなブログのデザインテーマはCSSのみですので、レイアウトの配置に凝ってみようとすると、逆に時間がかかってしまいます。
両者とも満たそうと実装しましたが、この場合だとサイドバー部分の位置を絶対座標にする必要がありました。
#container { background-color: #c0c0c0; /* 左側の背景色の割当は簡単なのだが... */ position: relative; } #box2 { position: absolute; top: 0; left: 800px; }
しかし、この場合だと、左側コンテンツの高さが、右側サイドバーの高さよりも低いと、右側サイドバーの背景が途切れるなど、レイアウト崩れが発生してしまいます *1 。
レイアウト崩れを起こさないようにすることも出来ないことは無いですが、結構大変な作業になることから、ブログタイトル、メイン、フッターそれぞれの要素に左側コンテンツの背景色を割り当てるようにしました。
そのため、左側コンテンツの背景色を変更しようとすると、下記のようになります。ちょっと面倒ですね。
#blog-title, .header-image-enable #blog-title, #wrapper, #footer { background-color: (お好きな色); }
WordPress だと、テーマのカスタマイズ機能があるおかげで、テーマを使用する側からは、簡単に色を変えることができます。
まあ、それ以前にはてなブログでは HTML の編集が出来ないので、出来るだけで解決する問題かもしれません。
ここから先は、数学的な内容が含まれています。このために久しぶりに方程式を使いました。
このテーマはレスポンシブデザイン対応です。ということは、画面の横幅を変えると自動的にコンテンツの幅も変わります。
どのようにコンテンツの幅が変わるかを下図に用意しました。なお、 768px よりも狭い場合は1カラムレイアウトとみなし、コンテンツとサイドバーが同じ列に並びます。
ここで悩んだのが、左側コンテンツ 外側 の幅の決め方でした。
まず最初に考えたのは、50vw + (左側コンテンツ内側の幅) / (何かの率)
という計算式で、左側コンテンツ外側の横幅を決める方法です。50vw
にした理由は、ブログのコンテンツが中央に寄って見やすくなると判断したためです。率の値は最初は適当に 4 としていましたが、後に 3.238 辺りに変更していました。
868px
です。実際に左側コンテンツ外側の幅は calc(50vw + 868px / 4)
になります。この方法で進めた結果、幅を変えるとヘッダーとコンテンツの幅が合わない事態が発生しました。
スクロールバーが原因で画面の横幅が狭くなってしまい、コンテンツ内側の幅が確保出来ないから・・・というのもありましたが、デバイスごとに率の値が同じだと、違うデバイスで正しく幅が揃わないようです。
とりあえず 50vw
にこだわるのをやめて、デバイス毎に幅を vw
単位で割り当てる方法を用意しました。左側コンテンツ外側の幅を決めるには、(左側コンテンツ内側の幅 / 指定したメディアクエリーの最小幅) * 100
で済みます。
1200px
です。先程の左側コンテンツ内側の幅である 868px
と併せて使用すると、左側コンテンツ外側の幅は 72.3vw
になります。それをデバイス単位で設定したところ、幅が揃わない事態は直りましたが・・・。
上図のように、幅を広げると内容がかなり右寄りになり、このテーマのコンセプトである「デザイン設定で設定した背景が大きく見えるようになる」と合いません。
そういったことがあって、一度 50vw
から値を足す方法に戻って再び最適な方法を模索しました。デバイス毎に率を変えれば良さそうなので、下記関数を用意して計算してみました。
/** * 左側の横幅を取得します。 * このテーマは右側のサイドバーをなるべく広く取るために、画面の半分の幅をベースに、左側の横幅を計算しています。 * 左側の横幅を取得するまでには、左側の内容の横幅を割るための率(ratio)が必要です。 * ratio はコンテンツとサイドバーの内側の幅で値が異なるため、ここで計算することになります。 */ @function make-content-outer-width($viewport-width, $content-width) { $half-viewport-diff: $content-width - ($viewport-width / 2); $ratio: $content-width / $half-viewport-diff; @return calc(50vw + #{$content-width / $ratio}); } // タブレット、PC(狭い)、PC(広い) それぞれに対応した左側内側の幅を設定 (実際は関数を使用して計算しています) $content-width-sm: 520px; $content-width-md: 660px; $content-width-lg: 868px; // それぞれの左側外側の幅を設定 $content-width-outer-sm: make-content-outer-width(768px, $content-width-sm); $content-width-outer-md: make-content-outer-width(992px, $content-width-md); $content-width-outer-lg: make-content-outer-width(1200px, $content-width-lg); // 設定した変数はレイアウトに使用される
実際に動かしてみると、レイアウトが崩れず、ちゃんと中央に寄るようになりました。
おまたせしました。ながーい間公開できていないまま放置していた依頼生活の3章ですが、現在制作中です。
2010年2月に1章が公開された長編のWWA作品です。1章は一番最初に公開されたWWA作品となります。3章構成になっていて、自分のWWA作品の中では唯一の複数章作品です。
このゲームの舞台となっている惑星「森星 *1」では、地球温暖化が原因による災害が発生しています。今作の舞台であるハヅツ国も例外ではなく、近年台風の発生に頭を悩ますばかり。
この後絶対おかしい現象が起こるはずだと思った主人公は、翌日見事に的中。普段おとなしくしていたモンスターたちが急遽暴走してきました。本来なら出てこないスライムも出てきてしまい、住民は困惑しています。
普段だったら通っていた学校も、急遽国からの指導により、「冒険者学校」に変更。暴走を止めるために、国中くまなく散策することになります・・・。
ちなみに、この物語の文章はこのブログ記事の執筆時に刷新しました。
3章はサントグ町に到着した主人公とその仲間が、まだ残っているとされている鍵を見つけ出すために冒険を進めます。
マップはすでに完成していて、後はメッセージやストーリーの追加、モンスターのバランス調整、最後のシーンの制作が残っています。なお、グラフィックは「謎めいた機械を追い求めて」で使用していたグラフィックを使用しています。
章毎にグラフィックが違うのは、WWA作品の中では数少ないかもしれません。プレイしてみると、進むたびにグラフィックが次第に進化していく・・・という小さいお楽しみ要素が待っています。
ゲームのストーリーの設定を明確にしたり、優しすぎたゲームバランスを調整したりするため、2章以前のマップデータにも修正を加えます。
なお、だいぶ前に1章をリメイクしたことがありますが、リメイクしたマップは使用せず、すでにあるマップを修正する形で済ませます。
リメイク中の依頼生活1章は、鉄道の移動方法をベルトコンベアのようにしました。地下の区間は、カット(省略)無しで移動します。 pic.twitter.com/qWNxmti41k
— Aokashi (あおかし) (@aokashi) 2015年5月11日
*1:住んでいる人からは森惑星と言っているのだが