素人プログラマーの日常

効率の良いコード、美しいコードなんて書けません。

暗算なんてしないけど

もうひとつ、サクっと作ったやつを紹介しておきます。ある意味では計算の遅い私自身のために作ったともいえますが、作ったところでやらないのはわかっていました。数学にはそれほど苦手意識はないものの、問題を解くその過程で数字を直接扱うのが遅いんですよね。簡単にいえば四則演算が苦手です。できないわけではなく、じっくり考えて計算したいので遅くなると自己分析していますが、桁が1つ増えただけで暗算が非常に億劫になります。

f:id:dgen:20180218151639p:plain

というわけで、その暗算に慣れるため…という建前でフラッシュ暗算を作りました。前回同様特に絵を描かなくて良い内容なので気楽です。何気に絵を描くってかなりのパワーが必要です。普段から仕事や趣味で絵を描いていれば構図やら色使いやらにそれほど気をもむこともないんでしょうが、あまり慣れていない私はまともな絵を描くとなると相当なエネルギーを消耗します。それでいて試行錯誤しながらなので膨大な時間も消費してしまいます。64×64ピクセルの小さい画像でも、自分なりに本気を出すと2時間くらいあっという間に経ってるんですよね。感覚としては「あれ?タイムリープしちゃったかな?」と思えるほど。そしてかけた時間に比例せず自分でもわかるほどクオリティーは高くないのを実感するとガックリします。

 

まあ、絵を描くのも暗算するのも上達したければ何度も何度も繰り返しやって慣れるしかないんですけど、それなら上達したいものが他にもたくさんありますからね。全部できれば幸せですが、なかなかそのための時間もとれるわけでもなく現状に至るといったところでしょうか。とりあえずはこうして文章を綴ることやプログラミング、他にいくつかの趣味は細々と続けてはいます。おかげで作文が一番の苦手だった私がちょっと長い文章を書き連ねるのも苦痛ではなくなっているどころか調子に乗っているときは楽しんでたりもします。

 

ちょっと自分語りみたいになってきて気持ち悪いので話を元に戻しますか(笑

 

今回のフラッシュ暗算ですが、私のように計算が遅い人でもできるように1桁でゆっくり表示することも可能です。最低レベルなら私でも正解を出せます。で、正解するごとにレベルアップして数字が大きくなるようにしてあります。逆に、間違えるとレベルダウンしてしまいます。こうしたレベルを取り入れると人間はモチベーションを維持しやすいというのが私の妄想にも似た見解です。毎回同じものをやってもつまらないですからね。

f:id:dgen:20180218151706p:plain

見た目に関してですが、内容は暗算ですから派手にする必要はありませんし、すっきりしたほうが暗算に集中できます。でもあまりにサクっと作り終わってしまうので、ちょっとした演出を加えてみました。まずは画面のフェードアウトをいつもならアルファブレンドで徐々に消していたものを遊び心で縞模様に。若干ウザいです。それと正解時に★が飛び散るエフェクトを追加しました。画像を使わずフォントがカラフルに弾ける(私には似合わない)可愛らしい演出です。こういったエフェクトは面倒でほとんどやりませんが、実際にやってみると今回は他の操作などと同時進行しなかったこともあり簡潔なコードで仕上がるんですよね。次からは積極的に取り入れてみようかな。

 

これといった考えもなくなんとなく追加したエフェクトですが、些細な演出があるだけで印象がガラっと変わるのを実感できました。ゲームだと特にこうした細かい演出がプレーヤーの脳裏に焼き付いて、そのプロダクト全体の印象にもつながるものなんですよね。それを作り手側から認識できたのは収穫です。

 

…でも画像を大量に使うアニメーションとかは勘弁してもらいたいかな。

 

 

 

魚へんの需要

ここまで、最近作ったものを3つほど紹介しました。なんだか創作意欲が沸々とたぎってくるのを感じます。「何か作れ~」と無意識が語り掛けてくるような気がしますが、なんなんでしょうね、この感じ。ちょこちょこコードを書いてるので、簡単なアルゴリズムならあまり考えずに書けるようになったから自信につながっているんでしょうかね~。

 

ってことで、その自信が冷めやらぬ内に、少し簡単なものをいくつかサクっと作って「このくらいなら余裕で作れるぜっ」と言ってみるコーナー、はじまりはじまり~。

 

今回紹介するプロダクトはゲームというとちょっと違う気もしますが、ゲーム気分で楽しんで学習できる…何を?…まあ、あまり実用的な学習ではありませんが、個人的にはこういう蘊蓄を好む傾向はありますね。それは魚へんの漢字です。たくさんありますよね。お寿司屋さんの湯呑みにびっしり書いてあるイメージなんですけど、あれ全部読める人は少ないと思います。

f:id:dgen:20180125140835p:plain

魚へんはほんとややこしいことになっていて、1つの漢字で複数の読み方があって、それが別の種類の魚を表すものだったりするんですよね。なのでそのへんの細かいところは宇宙の果てまでぶん投げて今回はあくまでサクっと仕上げることに専念しました。それでも自分の知っている限りは一般に浸透しているであろう読みをチョイスしたつもりです。(ほとんど知らんけど)

 

いつものようにC言語でDxライブラリを使ってコードを書いていくのですが、ちょっとした問題が発生しました。一部の魚へんの漢字はマルチバイト文字に対応していないんです。マルチバイト文字を簡単に説明すると、半角英数が1バイトで表現できるところを2バイト使って全角文字を表現するものです。2バイトだと表現できる数が少ないので難しい漢字は端折られて対応してません。魚へんを調べてコピーして配列にぶち込もうと考えていましたが、それで実行するとちゃんと文字を描画してくれないんですよね。

 

設定を Unicode(使える漢字が増える)に変えるのもありですが「なんかそれは違う」と私の中の誰かが言うので、文字を画像に置き換えることにしました。なにげにこうすることでフォントの違いも回避できます。フォントも扱いが面倒なところがあって、インストールされていないフォントをプログラム内で設定すると無視されてデフォルトのフォントになってしまいます。今回使ったフォントは "HG正楷書体-PRO" でして、win8くらいから標準になってます(win10でしか使ったことないから間違ってるかも)。これをwin7で使うとデフォルトのゴシックになってしまい、漢字のカッコ良さを見せたいというこちらの思惑が台無しになってしまいます。

f:id:dgen:20180125141039p:plain

"HG正楷書体-PRO" は見た目がカッコイイ漢字にはぴったりで、最近ではこれしか使わないというくらいよく使うようになりました。ただ文字サイズが小さくなるとかすれたように弱弱しい印象になったり文字間の幅が広すぎて気になるので、文章にはあまり向いてないといった欠点もあります。文字サイズは最低でも20ピクセル以上ですかね。

 

まあ、そんなこんなで文字を画像にする作業が大変でした。労力でいうと、ほとんどが画像を編集する時間だったように感じるくらい画像の置き換え作業は面倒でした。それに比べコードのほうは冒頭で書いたようにサクっと完成です。漢字をランダムに並び替えて正解をクリックするだけですからね。何も難しいことはありません。あとは効果音をちょっと付け加えて完成です。

 

「このくらいなら余裕で作れるぜっ」

 

にしても、どうして魚へんの漢字に微妙ながら惹かれるんでしょうね~?完成後に木へんや金へんでも作ろうとしましたが、魚へんと比べると私の中で需要がないことに気付きます。ただ漢字の画像と読みを入れ替えるだけでできるんですけどね。

 

 

 

またパズルゲーム

またパズルゲームを作りました。今度はなかなか良作となっています。
と、その話をする前に…、


このブログでいちばん検索されているワードは、なぜか「杏仁豆腐」なんですよね。

杏仁豆腐の美味しい食べ方
http://dgen.hatenablog.com/entry/2015/04/29/184730

 

かなりいい加減に書きなぐって、プリンと一緒のごちゃっとしたあまり美しくない画像もアップしていますが、なぜだかよく検索されています。一応プログラミングがメインでやっているブログなので、それに関した検索流入も少しはありますが、「杏仁豆腐」が断然強いです。もっと杏仁豆腐をフィーチャーしたほうがいいんでしょうか?でもなあ…。これといって記事にするようなこともないですよ。杏の種子から作るところでも書いたらいいのかな。なんなら杏の種を植えて収穫するまでやりすますかっ!

 

いや、しませんっ!

 

だいたい杏が芽を出して実を結ぶまで何年かかるかも知りませんし、その長い間追跡ドキュメントするなんてこのブログの存在すらすっかり忘れていた私にできると思ってんのかーっ!

 

すみません。つい言葉を荒げてしまいました。よくわかりませんが勢いで書いただけです。本人も何に対して怒っているのかわかっていません。何はともあれ杏仁豆腐って美味しいよねってことが言いたかっただけです。

 

楽天で杏仁豆腐を検索

 

さて、前置きが長くなってしまいましたが、気分を入れ替え本題に入りましょう。杏仁豆腐のことはもう忘れてくださいね。あっ、でも今回は少し長くなりそうだからまた次回にしよっかな。いやいや、とりあえず途中まででも書いていくぞっ!

 

前回、前々回とあまりパっとしないものを紹介してしまいましたが、次はパズルゲームが好きならちょっとは時間が潰せるプロダクトとなりました。というのも前2作がてきとーな感じで終わってしまった反省と「もっと良いものを作りたい!」という創作意欲が出てきたので、多少なりともクオリティの高いものを作っていこうじゃないかと考えたからです。

 

今回の元となるゲームは「10×10」というパズルゲームです。最初にアップしたのはどこだか知りませんが、Yahoo や nifty などで遊べます。そのゲームをプレイした感触は評価したいんですが、単なるカジュアルゲームになってしまっているのが個人的に許せなかったので自分で作り始めました。

 

f:id:dgen:20180110141502j:plain

 

ルールは簡単で10×10のマスにブロックを置いていって縦横のラインを揃えるとそのラインが消えるというものです。ブロックが置けなくなったらゲームオーバー。これを私がアレンジしてどうなったかというと…。

 

まずブロックを回転できるようにしました。元のゲームでは向きが固定されているので「回転すれば置けるのに…」と、イラっとする場面が多かったからです。でも回転させると簡単になってしまうので、その分ブロックの種類を増やし難易度を上げました。またブロックの高さを5段階のランダムにしてラインが揃ったらそのラインを1段下げていくシステムにしました。それによって最大5回のコンボが発生しこれを狙ってプレイも熱くなります。もちろんコンボをつなげればそれだけ高得点となります。またラインが凸凹になるので難易度もアップします。

 

元ゲームでは得点があまりにもお粗末で、置いたブロックの数と消したラインによる得点が常に一定だったのでカジュアルゲームっぽさが加速していたわけです。ですから得点に関してはもっと付け加えて一度に一定以上のラインを消すと基礎点が上がるようにしています。こうすることでハイスコアを狙うにはちびちび消すのではなく大量消しが有効になってきます。でもこれが同時にトラップにもなっていて、大量消しを狙うと盤面が不規則に凸凹しやすくなって後からフォローするのが難しくもなったりならなかったり。

 

f:id:dgen:20180110141538j:plain

 

プレイが後半に差し掛かると1×1や2×1の小さい隙間ばかりでブロックが置けない状況になってきます。そこで登場するのがお助けアイテム!1ラインを1段下げたりブロックが無いマスを塗り潰すように埋めたり、使い方によっては差し迫った状況から逆転できます。使うタイミングや場所も結構考えてしまいますね。そしてそのアイテムはイージーモードでは最初から全種類持っていますが、他のモードでは自分で獲得していくしかありません。ここでもラインの大量消しのトラップにハマるように、複数ラインの同時消し(モードやレベルによる)でアイテムゲットとしました。

 

意外と実装してみてから面白いなと感じたのは自爆ボタンです。手詰まりになったときに自爆ボタンで置くべきブロックを全部破棄します。3回このボタンを使って次に押すとゲームオーバーになりますが、なにも手詰まりになってから押す必要もありません。今あるブロックが置けるとしてもあえて破棄することで次のブロックがイイ感じに置けるような状況も多々あるので、ある意味アイテムのひとつとして使う感覚にもなるんですよね。当初はブロックが置けない判定をするのがプログラム的に面倒なので作った自爆ボタンですが、新たな駆け引きの道具としてパズルを奥深くしています。

 

あとはおまけでブロックの見た目を選択できるようにしてあります。これは単に自分で納得のいくデザインのブロックが描けなかったのでいくつか描いている内に「せっかく描いたから全部使おう」となっただけですが…。

 

今回は細かい操作や見た目にも拘って作ったこともあり、今までの作品の中では最高傑作といっても過言ではありません。とはいってもやっぱり全体的に素人っぽさは隠せませんが…。まあ、これまで中途半端な作品ばかりでしたからね。たまにはちょっと気合を入れて作らないと!

 

あっ、BGM作らなかった…。
効果音はいくつか作ったけど。

 

 

パズル?

そういえば、このブログで紹介している作品は、以前は他にサイトを作ってそこからダウンロードできるようにしてありましたが、放置したままだったのでサーバーの契約期間が切れて現在はダウンロードできません。どちらにしたところでわざわざダウンロードしてプレイするほどのものは作ってません!(なぜか強気)実際にダウンロードした人がいるのかも把握しないままサイトは消滅してしまいました。

 

今は相変わらずC++をメインになんとな~くゲーム制作は続けていますが、最近「やっぱweb上でプレイできるのは大きい!」と今更ながらの視点で JavaScript を、こちらもなんとな~くですが覚えていこうかな、といった感じです。また新しくサイトを立ち上げて、自分で覚えながらその内容と様子をアップしていけたらな~と思う次第で御座います。

 

で、話は前回に戻って最近のプロダクトを紹介。これも特に何が面白いというわけではないんですが…。簡単なパズルゲームを作りました。ただ絵柄を並び替えて絵を完成させるだけのこれといって特徴のないゲームです。

 

なぜこれを作ったかというと、モバゲーで同じパズルがあるんですが、一度クリアしてしまうともう遊べないんですよね。全部解いてしまうと次のアップデートまで1年とか放置されるので、なんだか欲求不満になるんです。「誰も課金しないようなコンテンツがよくここまで長続きするよな」なんて考えながらも「もっと・・・パズル・・・欲しい・・・」となっている自分に気づいたわけです。そんなこんなでサクっと作っちゃいました。

f:id:dgen:20171224140742p:plain

 

画像を5×5のパネルに切り分けてシャッフル、それを並び替えるだけです。パズルと称するには計算などを必要としない気楽な感じがハマるんですかね。好きな画像を取り込んでプレイできるので、ネットで拾った画像や自分で撮影した写真などを使って無限プレイが可能です。強い拘りというわけでもないですが、プレイする画像を自動でパズルの盤面に合わせると縦と横の比率がおかしくなることもあるので、そこはサイズを編集した画像を準備するところは譲れなかったところですかね。私しかプレイしないからそこまで便利にする必要もないし。だからできるだけ手を抜いて作ってあります。

 

実際に画像を取り込んでプレイしてみると、パズルとしての難易度は結構高かったりもします。というのも、パズルにすることを前提としてなんて考えずに画像を取り込むので、背景が空のようなほぼ一色のパネルがいくつも出来上がりなかなか見分けるのが困難です。自作ゲームのキャプチャなども取り込んでプレイしてみましたが、空のようにグラデーションさえ無いまったく同じパネルが5枚くらい出てきて、あとは勘に頼って入れ替えるしかありません。さすがに自分でやったことに文句を言っても意味はないし、それはそれで取り込んだ人の味も出るもんだということにして納得しています。(モバゲーのパズルでも同様の難解なやつはあったし…)

f:id:dgen:20171224140834j:plain

 

今回のパズルはこれといって難しいことはしていません。ほんとにサクっと作った感じですね。で、作り終わった感想が「もうこれやらないな…」。そうなんです。いざ作って「無限にできる!」となると欲求が満たされるというか魅力が半減してしまうんですよね。人間って面白い!

 

 

 

よくわからないもの

またしても1年以上放置のままでした(汗。タイトルに”日常”とありますが、1年に1度の更新で日常というのもなんだかな~と思う今日この頃です。

 

あれから密かにいくつか作ってはいます。ですがこのブログのことをすっかり忘れていて数日前に「あっ、そうだ!」てな具合で思い出したので、その作ったいくつかをざざっと紹介していきます。

 

最初に作ったのは、はっきりいって失敗作です。

 

クッキークリッカーというゲームはみなさんご存知でしょうか。つい最近もバージョン2が更に更新されました。今ある放置ゲーの元となったゲームで、ゲーム内容の単純さゆえにかなりの人がハマったようです。このゲームの内容を変えて作ったのですが、いろいろと残念な結果となりました。

 

具体的なモチーフが浮かばないまま作り始めたので、最初はクッキークリッカーでいう農場や工場といった施設を何も具体的なものを準備せずただ数字だけ並べていたので何が目的なのかまったくわからないことになっています。加えて、クッキーとは別の動く何かをクリックしていったほうが面白いだろうと思って施設を購入した分だけその動く何かを登場させました。こちらもイメージが浮かばず結局以前作った phase of evolution のブロックをとりあえず使いまわしてしまいました。ちょうど施設の数とブロックの数が20で同じだったし、ブロックには通し番号が描いてあったので「わかりやすい!」とかなんとか。

 

そのまま作り続けて、最終的にRPGっぽい風体に仕上げようと考えたのがほぼ出来上がった頃で、施設は装備や魔法など強くなるイメージのもの。動く何かはモンスターに置き換えたかったのですが、描くのが面倒だったので放置して作り続けるという怠慢。これぞ放置ゲー!違う?

 

そういえばいちばん大事な大きなクッキーに相当するものも描いてなかった。画面右側が施設で左下が動く何かのスペースだったので左上の本来なら大きなクッキーを表示する何もないところをひたすらクリックするというシュールな感じに仕上がってます。

f:id:dgen:20171208130657j:plain

 

そして残念具合の最たるところは、これはちょっと技術的な話になってきますが、でかい数字が扱えないということ。32bit の double型だと有効数字が15桁くらいなんですよね。かなり大きな数字でも計算できなくはないですが、15桁に入らなかった数字は丸められて無かったことになります。単純に施設が20個あって、その価格や効果量を10倍10倍にしていくと最低20桁は必要になります。20桁となると下から5桁は0が並ぶことになってしまうし、5桁以下の数値を加算しても意味がありません。もちろんそれを回避する方法はいくつかありますが、ほぼ完成した状態から15桁を超える可能性のある変数すべてを修正するのはそれほど膨大ではないコードですが面倒です。面倒なのですぐ諦めました(笑)。まあ、それでなくとも中途半端な仕上がりなのでそこに拘る必要もないかな、といった感じです。

 

このゲームの名前はゲーム内容が完成してから付けています。最後までイメージできなかったからですね。で、付けた名前が「エレメント 八つの秘宝」。エレメントって何だよ!とツッコミを入れたくなるようなゲーム内容です。八つの秘宝は転生したときのパワーアップ要素が八つあったのでてきとーに付け足してみました。わっはっは…。でもって取って付けたようにタイトル画面を作って完成。

f:id:dgen:20171208130700j:plain

 

よほど「欲しい!」という人でも現れない限りこのゲームが出回ることはないでしょう。

 

 

 

擬似3D

いやあ、前回の記事から実に1年以上が経過しました。あれからまともにコードを書いてません…汗。ってことで、ちょっと試したいことを久々にプログラミングで表現してみました。

みなさん「平行法」はご存知でしょうか?2つの画像を並べて、右の画像を右目で、左の画像を左目で見ると立体的に見えるという一種の錯視です。これを2Dの画像を使ってリアルタイムで画面上に描画してみたかったんです。あまり形状が複雑なものは計算も複雑になるので相当時間がかかると思います。ですので今回は単純な直方体を描画していきます。

もともと2D画面上でどうやって3Dを表現するか興味があったのですが、今回のようにカメラアングルなどを気にしない簡易的なものであればそれほど難しく考える必要はありません。

まずは遠近法でどのくらいの距離ならどのくらいの大きさで描画すれば良いか考えます。見た目の大きさは距離に反比例するので単純にz値(奥行き=距離)で割るだけです。同じ要領で少し付け加えると画面上の縦と横の位置も求められます。それを直方体の8つの頂点それぞれ算出し、DrawModiGraph関数(画像を自由に変形させる)で1面ずつ描画していきます。

int DrawModiGraph( int x1, int y1, int x2, int y2,
          int x3, int y3, int x4, int y4,
          int GrHandle , int TransFlag );

このとき注意したいのはzソートです。簡単に説明すると、奥にあるものから描画しなければ最終的に画面に出来上がるのはへんてこな画像になるということです。それを考慮したつもりで、直方体の上下左右そして最後に正面を描画しましたが、「???」。左右の面が上下の面を侵食してうまく描画できませんでした。「これって見える角度によって描画順を変えないといけないなあ…」そうなんです。zソートってこんな単純な直方体1個の描画でも問題になるんです。

めんどーなことが嫌いな私はその問題を無視するかのように、見える角度を少しずらして上の面が見えないようにしましたとさ笑。そして左・右・下・正面の順で描画することで事実上問題を回避したと同じ効果を得ました(なんと手ぬるい且つ卑怯な!)。こういったところは私は職業プログラマーに向いてないのかもしれません…。

とはいえ、これで直方体を描画することができました。あとは10個くらい同時に動かしながら右目用と左目用に少し角度を変えて描画していきます。角度といっても三角関数などは使用しません。右目用の画面は手前にくるほど左へ移動し、左目用の画面は手前にくるほど右へ移動するようにずらすだけです。これでお仕舞い。

・・・ではなく、直方体相互のzソートくらいはやっておきましょう。1フレームごとにz値の大小を for文で1回比較するという世にもてきとーなソートですが、奥から手前に真っ直ぐ一定速度で移動するだけなので十分機能します。そのソートした結果を配列に突っ込んで、その配列順に描画していきます。

これで完成です。
↓こんな感じ

f:id:dgen:20161010165816p:plain



にしても、最近の(昔のもそうだけど…)3DCGを見てると「こんなのどうやって作ってるんだ!?(プログラム的に)」と思わざるをえません。単調な擬似3Dでさえ苦戦する私からしたら永遠に手が届きそうにありません。頭良い人っていいね!(なんて横目で羨望の眼差し)

ちなみにコードの掲載は無しです。試作として作ったこともあり、ざっくりと書いているので強引な修正など無駄な部分ばかりで見せるレベルではありません(いつものこと!?)。あしからず。

 

 

 

 

シルバーウィークと次回作

いつの間にやら世間にはシルバーウィークという言葉が浸透していますが、みなさん休んでますか~?あいにく私は5連休が4連休へと減ってしまいました。連休が終わってもしばらく多忙な毎日です。

まあここでちょっと愚痴を書いてみますが…(笑)職場の段取りが悪いんですよね。また関連会社の段取りも悪い。だから余計な仕事が増えたり、中断して無駄な時間を過ごしたりということが頻繁に発生します。おかげで自分の仕事に集中できずミスも増える始末。「お前ら!【段取り八分仕事二分】って言葉知らんのかっ!」と言いたくなります。いや、実際それっぽいことを言ったり態度で示してますけどね(苦)。それでも同じ間違いを何度も繰り返されるので、もう呆れてそろそろ転職を考えようかというところです。

はい。愚痴終了!

これを機にプロのプログラマーとして技術を覚えたいな~なんて気持ちはありますが、如何せん年齢的な制限に引っ掛かるのは火を見るよりも明らかなので、プログラミングはとりあえず趣味の範囲で続けていきます。

でも今の仕事を続けている内は疲労が激しいので、ここでの創作ペースはかなり落ちると思います。現に「真円プロジェクト」が完成してから、何を作るかも考えていない状態です。作りたいものは山ほどありますが、疲れていると落ち着いて創作しようという意欲が沸いてこないんですよね。困った、困った。

ということで、次回作についてはひとまず棚上げしてのんびりやっていく予定です。ブログの更新も以前に増して少なくなるかもしれません。