ゲーム開発 – 地形生成 アルゴリズム

こんにちは。開発担当のマットです。
 
以前の記事でも言ったことはありますが、ゲームが大好きです。
いろんなのゲームの中でも、とくに街づくりゲームが好きです。
 
街づくりゲームは沢山ありますが、内容はほとんどが似ていて何らかのマップの上で街を作っていきます。
しかし、一度成功すると二度目が面白くないので、毎回違う場所で街づくりをすることがポイントです。
 
そのため、ほとんどの街づくりゲームには、ランダム地形生成の機能が付いています。
なお、街づくりだけではなく、近年は多くのアクション・アドベンチャーゲームにも付くようになりました。
 

おそらく、Minecraftの影響ではないかと思います

 
このランダム地形生成機能に興味を持って調べたので、今回の記事では3つのアルゴリズムを紹介したいと思います。
 
今回紹介します3つのアルゴリズムを使えば、ランダムマップを生成するゲームをより簡単に作ることができると思います。

私のようにゲーム作成に興味をお持ちの方は、ぜひ読んでみてください。

1:フラクタル・アルゴリズム

個人的な意見ですが、フラクタルアルゴリズムは島や海岸の生成に向いているアルゴリズムだと思うので、島を作っていきます。
 
まずはグリッドを想像します。
5×5を使いますが、思いのままに作っても問題ありません。


 
次は、島の大体の形を決めます。
私は、ちょっと丸目の島が欲しいので角のセル(A1,E1,E5,A5)を削ります。


 
各セルの中のランダムな箇所に点(ポイント)を置いて、繋げていきます。


 
少し島の形に近づきましたが、まだ直線が多すぎて不自然です。
次は、各ポイントの間の位置を計算します。(以下で緑の点で表します)

 
それぞれの新しいポイントをランダムに左右上下にずらして、繋げ直すと島がよりギザギザになります。


 
先ほどよりも島の形が見えてきました。
 
このステップを何度か繰り返せば、本当に海岸のような線が出来上がります。
実際に作ったものはこちらです。

2:ダイヤモンド・スクエア・アルゴリズム

ダイヤモンド・スクエア・アルゴリズムはとても簡単で、上記のフラクタル・アルゴリズムのような島づくりには適していると思います。
また、フラクタル・アルゴリズムと違って地形の高度を獲得することができます。
 
前回と同じようにグリッドを作ります。
サイズは 2+1 × 2ⁿ+1 にするのが1番無難なので、このサイズをおススメします。
(つまり、5×5(2²+1 × 2²+1),9×9(2³+1 × 2³+1),1025×1025(2¹⁰+1 × 2¹⁰+1)など)
 
グリッドが出来上がったら、縁のセルの値を全部0にして真ん中のセルの値を1にします。
簡単な5×5のグリッドを例に説明したいと思います。


 
次は真ん中のセルと縁のセルの間のセルの値を計算します。
上記の例では、「真ん中のセルと縁のセルの間のセル」はB3,C2,D3,C4に当てはまります。

もちろん「間」と言ったら、「横縦の間」もありますし、「斜めの間」もあります。
この例では、「縦横の間」を使っていますが、実際に実装するときは両手段を併用するといいと思います。
ちなみに、このアルゴリズムの名前(ダイヤモンド・スクエア)はこの斜め、横縦を因んでいます。

間のセル(B3,C2,D3,C4)に、周囲のセルの数値の中間のランダム数値(もしくは平均値に近いランダム数値)を入れます。
C1が0で、C3が1となっているので、C2は0と1の間のランダム数値となります。

 
そのステップを繰り返し、全てのセルに値が入るまで続けます。
今、B3,C2,D3,C4の値を入れたので、次はB3,C2,D3,C4と縁の間のセルを埋めていきます。(つまりB2,D2,B4,D4)

やり方は色々あります。
例えばB2ですが、C2とA2の間のランダム数値を取ることもできますし、B3とB1の間のランダム数値を取ることもできます。
A2,B1,C2,B3の平均値に近い数値を取ることもできますし、A1,C1,B3,A3の平均値に近い数値を取ることもできます。
実装方法はプログラマーのお好み次第です。


 
最後に、全てのセルが埋まったら、高度の定義を行います。
例えば、0.2以下は海、0.7以上は山、その間は草、など。

 
上記の例はあまり綺麗ではないですが、ちゃんと実装すると以下のような島をランダムで生成できます。

高度値を使って、森林や川も生成することは可能です。

先ほど言った通り、島に適しているアルゴリズムだと思いますが、縁や真ん中の値を0,1ではなくて、ランダムな数値で始めると、山と谷のような結果になります。

3:パーリン・ノイズ・アルゴリズム

ゲームの地形生成では、パーリン・ノイズ・アルゴリズムは1番使用されているかもしれません。

パーリン・ノイズの詳細を説明することは本記事の範囲外となりますが(詳しくはWikipedia)、簡単に説明すると、波の生成アルゴリズムです。

多くのプラットフォームにライブラリーが存在し、使うことによって、ランダム波のノイズを生成することができます。


 
ダイヤモンド・スクエア・アルゴリズムと同じように、海や山の閾値を設定することによって、地形を作成することができます。
以下の地図は上のパーリンノイズをベースにして作成しました。

複数のパーリンノイズマップを重ねると、森林(深緑のエリア)なども生成できます。

まとめ

ゲームを作成するとき、リプレイアビリティ(繰り返し遊べること)は重視すべき要素だと思います。

この記事は街づくりのゲームの前提でアルゴリズムを紹介しましたが、これらのアルゴリズムを使えばRPG用の洞窟や宇宙ゲームの小惑星帯など、多くのエリアを自然に生成することができます。

毎回遊ぶとき、エリアが同じだとリプレイアビリティがなくなりユーザさんは遊ばなくなってしまうので、そうならないように、ぜひ上記の地形アルゴリズムを使って頑張って開発してみてください!

スプラウトへ入社してくれてありがとう

こんにちわ。
リエです。
 
新しいメンバーが増えてはや半年。

平成29年度入社式を執り行いました


入社半年祝ということで、社内のメンバーがみな持っているSHIZQ鶴コップをプレゼントしました。
※SHIZQ鶴コップについて、以前ブログでご紹介したことがありますので、こちらもぜひお読みください(*´∀`*)

神山しずくプロジェクト – SHIZQ


 
このSHIZQ鶴コップは、徳島県神山町の山や水を守る「神山しずくプロジェクト」から生まれたもの。
天然の木目が美しいこのコップは杉で出来ています。
杉なのでとても軽く口当たりのいい飲みくち。

 
サプライズでプレゼントしたのですが、とても驚いていました。
でも喜んでもらえたので、こちらも嬉しい気持ちに(ノ´∀`*)♡
これでみんなおそろいです♪
 
写真に写っているすだちはご厚意でいただいたものです。
ありがたくメンバーといただきました。
本当にありがとうございます。
 
お料理はもちろん(すだちうどん最高)炭酸に入れたりお酒に入れたり調味料に使ったりとなんにでも合うのですが、なにより美味しい♡
匂いもとてもいいので、絞ってる間もとても幸せな気持ちになります。
最近はすだちポン酢を作りました。
3ヶ月寝かせるので、できあがりはちょうどお鍋が美味しい季節に。
3ヶ月後が楽しみです。
 
杉の新たな価値として生まれたこのコップ。
今後も愛用していきたいと思います。
 
神山しずくプロジェクト
http://shizq.jp/
オフィシャルストア
https://shizq.stores.jp/

第9回ライトニングトーク大会を開催してみた

こんにちわ。
リエです。
 
最近ミニチュアクッキング動画にハマっています。
https://matome.naver.jp/odai/2143377587420163301
 
音楽とかなくて、料理の音や動作音だけが響く動画なんですが、なんか癒されるのです。
 
先日第9回ライトニングトーク大会(以下、LT大会)を開催しました。
過去のLT大会の記事は下記リンクからご確認いただけますヽ(^o^)丿
第1回目
第2回目
第4回目
第5回目
第6回目
第7回目
第8回目
※第3回目の記事はありません。
 
2015年から続けてきたLT大会も今回で9回目。
ルールはいつもと同じで、持ち時間は1人5分、テーマは自由で実施しました。
テーマは自由なので、趣味の話や仕事に関係のある専門的な話など内容はさまざま。
 
わたしは、自分が携帯を持ち始めた時(当時はまだガラケーでした)から現在のスマホまでの思い出話をしました。
スマホを持ち始めて数年経つのですが、その前に持っていたガラケーはまだ手元にあります。
その中には懐かしい写メも入っており、たまに見返すのですが、それで今回のLTのネタはこれにしようと思いつきました。
 
今回は時間オーバーになった人もいましたが、みんなの個性が出たおもしろい内容のものが多かったです。
最後に自分がいいと思った人に投票し、優勝者が決まりました。
 
優勝者には毎度恒例の優勝カップの授与(ノ´∀`*)

 
この記事を書いてて、まだトロフィーリボン作ってないことに気づきました。
早く作って優勝カップにつけなきゃε≡≡ヘ( ´Д`)ノ
※この記事作成後にトロフィーリボンを作って優勝カップにつけました🎀

スマホ、Outlook対応!HTMLメールのボタンの作り方


HTMLメールを作ったけど、PC、スマホ両方対応しようとすると「ボタンを画像で作ったから大きすぎる、小さすぎる…。」などといった経験はないでしょうか?
「HTMLメールだから仕方がない…。」と画像で進めるのもありですが、ソースコードのみで対応できる方法がありますのでご紹介します。

 

「padding」を使えたら一番楽ですが、下記のように古いOutlookの場合、aタグに「padding」が対応していないようです。(代わりにborderを使おうと思ったのですが、10px程度までしか太くなりません…。)

The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/
(「!」マークにツールチップで「Padding for p, div and a tags is not supported」と表示されます)

 

そのため、Outlook用のハックを利用します。





  
    Googleにリンク
  



「<!– [if gte mso 9]>〜<![endif]–>」とは、「Outlook 2000(Version 9以上)」のみ読み込むというハックです。
※以前ご紹介しました、スマホでもPCでも読みやすい!HTMLメールのフォントサイズを参照

 

その中に書かれている「<v:roundrect>」「<w:anchorlock/>」「<center>」はVMLタグらしく、そのタグで図形を描画しているようです。
なんだかややこしそう…と思っていたら、下記のジェネレータがありました。

 

Bulletproof email buttons
https://buttons.cm/

このジェネレーターでボタンを作成すると、Outlookにも対応した形でコードが生成されます。Outlook用のボタンは、幅と高さは固定されてしまうので、文字の量等に対応した調整はその都度必要です。

 

簡単なご紹介となりましたが、HTMLメールでボタンを作る際に参考になれば幸いです!

 

文章チェックで大事なこと

こんにちわ。
リエです。
 
今回は文章チェックのお話をしたいと思います。
 
お仕事でマニュアルなどの文章チェックをすることが多いのですが、どれだけ気をつけていても誤字脱字って起こってしまいます。

 
そこで校正チェックフローを作成したいなと思い、どんな方法が最適なのか調べてみました。
ちなみに今までは、以下の方法で確認をしていました。
1.文章をまず読み込む
2.誤字脱字の確認
3.文法の確認
4.修正
5.再度読む込む
※1〜5は複数回繰り返します
 
調べてみると誤字脱字の種類は大きくわけて『語彙のミス』『文法のミス』『文章作法のミス』と、この3つに分類されるそうです。
なのでこの3つを徹底してつぶせば、正しい文章ができあがるというわけです。
 
そして文章確認で大事なのは、必ず間違いがあると思って読むこと。
未完成のものとして見なければミスは見つけられません。
ミスを見つけるコツは、以下の通りのものがあります。
 
1.文字は単語で見ない
人間の脳は、知っている言葉を補完して読むという仕組みを持っています。
めちゃくちゃな文章でも、意味を通じる文章に置き換えて読んでしまうのです。(怖い
文章チェックをする時は、脳内補完が起こらないように、文章を単語毎で読むのではなく、1文字1文字しっかりと確認して読まなければいけません。
 
2.数字に焦点を絞る
数字の誤字脱字が発生してしまうと、大問題です。
金額や日付や曜日などは特に注意して確認する必要があります。
 
3.漢字の送り仮名に焦点を絞る
漢字の送り仮名も、非常に間違えやすい&脳内補完が起こりやすいため、しっかりと意識して文章を読まないとミスを見落としてしまいます。
 
4.分節を区切って読む
文節を区切って読むことで、脳内補完をしてしまうミスを防ぎます。
 
5.黙読ではなく音読する
一語一語しっかりと声を出して読むと、かなりの確立でミスを発見することができます。
 
6.複数人でチェックをする
人によって、見る箇所が違っていたり誤字脱字のチェック箇所の得意・不得意があるので、複数人でのチェックは必須です。
 
 
この内容を踏まえ、フローを作成し社内で共有しました!
これで脱!誤字脱字だぜ\(^o^)/