2016/08/18PointDraw（旧：図形メーカー） その7

お久しぶりです。
以前の「図形メーカー」は数値だらけで「分かりにくい」という感じがあったので、
簡単かつ直感的に描けるようにする為、仕組みを一新しました。
ついでに名前も変えました。

ところで、近年全く新作を完成させられておらず、この状況はさすがにヤバいと感じています。
今度こそ完成させられるか！？


1.「点」と「線」

このツールでは、以下の3ステップで図形を描画します。

【1】「点」を作る
【2】 点と点とを「線」で結ぶ
【3】 線を何本か描いて「図形」にする

点のない所をクリックすれば【1】の 「『点』を作る」 ができ、
その点を結ぶ先にドラッグすれば【2】の 「『線』で結ぶ」 ができます。
数値を入力するよりよっぽど直感的ですよね？

このツールは、できるだけ「数値の入力」に頼らずに、
多くの事をマウスの操作でできるようにしています。




2. コピーと一括操作

直感的でも、手間がかかるようでは意味がありません。
このツールでは、「コピー」や「一括操作」という機能を使って、
規則的な「繰り返し」のある図形を素早く描く事ができます。

「コピー」は、ある操作をした時、その操作を自動的に複数回繰り返し行う機能です。

何回繰り返すかは、数字キーで指定できます。

例えば下の図のように、等間隔に点を作る事などができます。



そして「一括操作」は、「選択」した点をまとめて操作できる機能です。

点をクリックするとその点を、点のない所からドラッグすると長方形の範囲内の点を
「選択」する事ができ、選択されている点をドラッグすると、
他の選択されている点もまとめて同じように操作する事ができます。

また、選択されている点同士を結んでいる線もまとめて操作する事ができます。

選択されている点は黄色になり、もう一度クリックなどすると選択を解除できます。
先述した「コピー」と組み合わせて使う事も可能です。

例えば下の図のように、上の図の状態からマス目状の図形を描く事などができます。




では、今回はこれで終わりとさせていただきます。
次回は「線のバリエーション」などについて書く予定です。

2016/06/28超電卓 Formula その2

今回は、「メモリー機能」と「エラー通知」を追加しました。

メモリー機能は、普通の電卓にもある「メモリー」をパワーアップさせたものです。
電卓のメモリーをご存知ない方の為に軽く説明しておくと、
メモリーとは値を記憶しておいて後で使う事ができる機能で、
「M+」や「M-」などといったボタンは、このメモリーに関する操作を行うボタンです。



上図の下の部分に、前回なかった「M1」～「M5」というものが追加されていますが、
これらがこの電卓における「メモリー」です。

各メモリーには値を保存する事ができ、保存されている値は右側に表示されます。

各メモリーはクリックする事で選択でき、選択した状態で「＝」をクリックして
計算を行う事で、計算結果をそのメモリーに保存する事ができます。
選択されているメモリーは背景が黄色くなります（上図であればM1）。

なお、上図の式にある「^」という記号、見慣れない方が多いと思いますが、
これは「累乗」を表す記号で、上図の「5^2」ならば「5の2乗」を意味しています。



では、保存したメモリーはどう使うのかというと、
式の中に「M1」～「M5」を入れる事で、「x」や「y」などのような形で
「そこに入っている値」を使う事ができます。

また、「M」で「選択中のメモリーに入っている値」を、
「A」で「計算結果（＝の右）に入っている値」を使う事ができます。

なお、上図のメモリーの値には文字が黒いものと灰色のものがありますが、
黒いものは、その値が入れられてから式が書き換えられていない、
すなわち「現在の式の計算結果」である事を表しています。
書き換えられたものは文字が灰色になります。
（なお計算結果（＝の右）も同様に灰色になります）



最後に「エラー通知」についてです。
「＝」をクリックして計算しようとした時、式の内容が「計算できないもの」であったら、
その理由を示す「エラー」を計算結果（＝の右）に赤い文字で表示します。

今の所エラーは3種類で、上図の「文字『？』は識別できません」の他に、
「式が入力されていません」「ゼロ除算には対応していません」もあります。
今後種類は増えていくと思います。


では、今回はこれで終わりとさせていただきます。

2016/06/08超電卓 Formula その1

お久しぶりです。
今回は、高性能な電卓ツールです。



名称に使われている「Formula」は「式」などの意味を持つ英単語で、
その名の通り、「式を入力して計算する」電卓ツールとなっております。

一般的な電卓は、「＋」や「－」といったボタンを押す度に計算されます。
その為、例えば「1＋2×3」といった計算の場合、本来の計算順序とは違って
左から計算されてしまい、正しい答えが出ない、という問題があります。

しかしこのツールは、式を最後まで入力してから計算するので、
本来の順序通りに計算する事ができるのです。

また、上図のスクリーンショットでも使っているように、
「括弧」も使う事ができるので、計算順序は自由自在です。



式を入力する際、数字や記号は全角でもOKです。
また、空白を入れてもOKです。

計算結果が割り切れない「循環小数」の時、
一般的な電卓は表示できる限界までひたすら繰り返して表示しますが、
このツールでは、プログラムに「筆算」をさせる事で、
「循環している（割り切れない）かどうか」や「繰り返される範囲」を判定して、
上図の計算結果のようにスマートな表示をする事ができます。

（※数字の上に付いている「・」は、繰り返される範囲の両端を表すものです）



計算結果の表示は細かな設定が可能で、
上図のように「分数」で表示する事も可能です。

また、分子が分母より大きい時、「仮分数」として表示するか、
上図のように「帯分数」として表示するかも選択できます。


では、今回はこれで終わりとさせていただきます。

2016/03/17クイズメーカー その2

今回は「画像表示機能」や「結果発表画面」、「結果ツイート機能」などを作成しました。



まずは、前回の記事で導入を予定していると書いた「画像表示機能」のスクリーンショットです。
前回の記事で書いた通り、右下の枠内に画像を表示する事ができます。
（※スクリーンショット内の写真には、著作権的に問題のないものを使用しています）

あと、上図の問題は「記述式」の問題という事で、記述式の問題について少し説明します。
記述式の問題は、空の解答欄に答えを入力し、下の「OK」ボタンをクリックする事で解答します。
選択式の問題と同じく、複数解答する問題も作成可能で、
その場合は解答欄が解答する数だけ表示されます。



次に、「結果発表画面」のスクリーンショットです。
全ての問題に解答し終えるか、全体の制限時間が0になるかすると、結果発表画面に移ります。
結果発表画面では、「何点中何点獲得したか」と「各問題の正否」が表示されます。

正否は「○」「×」「-」の3種類の記号の羅列で表され、
左から1問目、2問目、3問目…の結果を表しています。
正解した問題は「○」、不正解あるいは時間切れになった問題は「×」、
途中で全体の制限時間が0になって挑戦すらできなかった問題は「-」となります。

上図の左下の「結果をツイート」から、この結果をTwitterでツイートする事ができます。



という事で最後に、「結果ツイート機能」のスクリーンショットです。
「結果をツイート」のボタンをクリックすると、
上図のような内容が初めから入力された状態でツイート画面が表示されます。

ツイートには「クイズ名」「クイズが設置されているページのURL」「何点中何点獲得したか」
「各問題の正否」「作成ツール名」「作成ツールのページのURL」が入っています。
（※上図の文中のURLは仮に定めたもので、現在そのURLのページは存在しません）

なお、「クイズが設置されているページのURL」は上図の文中には入っていませんが、
これはローカル環境（インターネット上でない場所）で実行した為です。
アップロードしてそこからツイートすれば、そのページのURLが入ります。

ちなみに、「クイズ名が長い」「問題数が多くて正否が長い」といった理由で
Twitter特有の140文字制限をオーバーしてしまう場合には、自動的に判断して
「各問題の正否」や「作成ツールのページのURL」をカットした状態で表示してくれます。

では、今回はこれで終わりとさせていただきます。

2016/03/06クイズメーカー その1

今回は、クイズが作成できるツールです。



上図は、出題画面のスクリーンショットです。
上にはクイズについての情報が、その下には問題文が、
さらにその下の左側には選択肢などが表示されます。
右側には画像を表示できるようにする予定です。

複数解答する問題や、その解答の順番も正否に関わる問題も作成可能です。
上図の問題はその例です。黄色くなっている選択肢が選ばれているもので、
順番が正否に関わる問題では、その右側に何番目に選んだものか（1st、2nd…）も表示されます。

また、選択肢がなく自分で答えを入力する「記述式」の問題も作成可能です。
正解は複数用意できるので、表記揺れ（例：ムハンマド／マホメット）にも対応可能です。

制限時間を付ける事もできます。



上図は、正解発表画面のスクリーンショットです。
クイズについての情報の下には「正解」「不正解」「時間切れ」といった結果が、
その下には問題の解説が、
さらにその下の左側にはあなたの解答が、右側には正しい答えが表示されます。

あなたの解答と正しい答えを比較する事で、不正解だった際に
どこが間違っていたかを確認できるようになっています。
順番が正否に関わる問題では、上図のように、1つ1つの答えの間に「→」が表示されます。

なおこの画面では、制限時間のカウントはストップします。

では、今回はこれで終わりとさせていただきます。

2016/02/19図形メーカー その6

では、今回変更・追加した点について紹介していきます。



まずは細かい点から紹介します。
第1に、左端に「何についての設定なのか」が分かるように表記を追加しました。
第2に、選択している図形などのボタンは黄色く光るようにしました。
第3に、図形に「長方形」を追加しました。

そして今回のメインですが、第4に、色彩の設定の下に「配置」の設定を追加しました。
この設定によって、上の2つの設定で決められた単体の図形を、
一度にたくさん描画する事ができます。
なお、前回形状の設定の中にあった「描画位置の指定」はこちらに移しました。

図形の並びには「長方形タイプ」「弧タイプ」「ランダムタイプ」の3種類があり、
図形の種類と同様に、左側に縦に並んでいるボタンで選択する事ができます。

「長方形タイプ」では、図形を1列に並べたり、それを何列も並べたりできます。
上のスクリーンショットのキャンバスの左上は、これを使って描画したものです。
マス目を描く時や、同じパターンが続く背景を描く時などに役立ちます。

「弧タイプ」では、図形を仮想の円周上に一定間隔で並べるような配置ができます。
上のスクリーンショットのキャンバスの右上は、これを使って描画したものです。
図形そのものを円周上の位置に応じて回転させるかどうかも選択できます。

「ランダムタイプ」では、指定した範囲内のランダムな位置に描画します。
図形の向きも振れ幅を指定してランダムにする事ができます。
下に、これを使って描画したスクリーンショットを挙げます。
少し凝ってみました。「茂み」のイメージです。



では、今回はこれで終わりとさせていただきます。

2016/02/02図形メーカー その5

久しぶりの図形メーカーです。
今まではひたすら図形の種類を増やしていましたが、
今回は「ツール内で値の指定と描画が行える仕組み」を作成しました。



左側で色々な指定を行い、右側に描画します。
左側の白い四角には数値を入力でき、その入力内容によって描画の内容が決定します。

左側の上部では、図形の描画位置や形状を決める値を指定します。
指定する内容は、かぶる部分もありますが図形の種類によって異なります。
左上の円形と正五角形が並んでいる部分をクリックする事で、
描画する図形の種類を変更できます。

その下では、図形の色などを決める値を指定します。
ここで指定する内容は、図形の種類に関係なく固定です。
輪郭にあたる「線」の色・不透明度・太さと、
その内側にあたる「塗り」の色・不透明度が指定できます。

さらにその下の「描画」と書かれたボタンをクリックする事で、
指定した値に基づいて右側に図形が描画されます。
描画用のスペースは640×640で、白い部分の左上を（0, 0）として描画されます。

では、今回はこれで終わりとさせていただきます。

2015/12/30将棋系大全 その2

では、今回の主な変更点を説明していきます。



第1に、画面の左下に「駒情報」あるいは「成駒情報」が表示されるようにしました。

駒を選択していない状態では、マウスカーソルを合わせた駒の動きなど（＝駒情報）が、
選択している状態では、選択している駒が成った状態での動きなど（＝成駒情報）が
表示されます。

駒の動きは、「各方向に何マスまで進めるか」という形で表示されます。
進めるマス数は、各方向にあたるマスの真ん中に数字で表示され、
何マスでも進める場合は「∞」と表示されます（無限を表す記号）。
普通の動きの場合はマスが緑色に、桂馬のように跳び越える動きの場合はマスが青色になり、
進めるマス数が多いほど明るい色になります。


第2に、画面の右上の「棋譜」を大幅に改良しました。

まず、同じ場所に動ける同種の駒がある時に付け加える「上」「寄」「引」などの文字を、
判定を行って記述されるようにしました。

そして、手数が増えて棋譜全体が枠内に収まり切らなくなった状態では、
マウスホイールを前後に回転させる事で表示する範囲を上下にスクロールして、
過去のものを見られるようにしました。
なお、何らかの手を指す（あるいは打つ）と、自動的に一番下までスクロールされます。

さらに、直近の一手は赤字で表示されるようにしました。


第3に、王将（玉将）にまつわる禁じ手を実装しました。

王将（玉将）は、敵の駒の利き（その駒が一手で移動できる範囲）に移動させられなくし、
王手がかかっている状態では、「王将（玉将）を逃がす」「間に他の駒（間駒）を入れる」
「王手をかけている駒を取る」のいずれかの行動しか取れないようにしました。

なお、分かりやすくする為、王手をかけている駒は赤色の枠で囲われるようにしました。


では、今回はこれで終わりとさせていただきます。
まだ今後数回は普通の将棋（本将棋）の制作が続くと思われます。

2015/11/23将棋系大全 その1

今回は、将棋や将棋に似たルールのもの（チェスなど）で遊べるゲームです。
ただし、最近作り始めたものなので、まだ普通の将棋しかなく、未実装のルールも残っています。

このゲームでは、コンピュータだからこそ出せる「分かりやすさ」を重視しています。
その為、デザインが実際の将棋などとは異なっている部分が多々あります。ご了承ください。



先手の駒は暗めの色、後手の駒は明るめの色になっています。（棋譜で先手を▲、後手を△と表す事から）
また、王将や玉将は、他の駒に比べやや黄色っぽい色になっています。

駒をクリックすると、その駒を「選択」する事ができます。
盤上の駒を選択した状態で、その駒が移動できるマスをクリックすると、
その駒をそのマスに移動させられます。

明るい緑色になっているマスは、普通に移動できるマスです。
桂馬のように他の駒を飛び越えて移動できる場合は、明るい青色になります。
また、灰色になっているマスは、他の駒に妨げられて移動できないマスです。

選択している盤上の駒のマスは、暗い緑色などになります。
桂馬だと暗い青色になるなど、その駒の動きによって異なる色になります。



自陣・敵陣とその外との境界には、赤色の境界線を引いてあります。

敵陣に入るなどした駒は一部を除き「成る」事ができますが、成るか成らないか選択できる場合は、
その駒の付近に「成」「不成」のボタンが出現し、どちらかを選択する必要があります。
この時、どちらかを選択するまでは手番が終わらず、盤上などにある駒は選択できない状態になるので、
その事を表す為に、成るかどうかを選択する駒にスポットライトを当てるような演出をしています。

なお、どの駒が動いたかが分かりやすいように、直前に動かした駒のマスは暗い茶色になります。



相手の駒を取って手に入れた「持ち駒」は、それぞれ右下と左上に表示されます。
持ち駒も盤上の駒と同様に、クリックする事で「選択」でき、
選択した状態でその駒を置けるマスをクリックすると、その駒をそのマスに置く事ができます。

明るい黄色になっているマスは、その駒を置けるマスです。
また、灰色になっているマスは、他の駒がある事によって置けないマスです。
そして、明るい赤色になっているマスは、行き場がないマスや「二歩」になるマスなど、
その他のルールによって置けないマスです。

選択している持ち駒は、背景が暗い黄色になります。
あと、スクリーンショットにはありませんが、直前に置いた駒のマスも同じく暗い黄色になります。

では、今回はこれで終わりとさせていただきます。

2015/10/29Reflequest その4

今回は、前回の最後に書いた通り、新システム「アチーブメント」を実装しました。
また、メニュー画面の機能の追加とタイトル画面の作成を行いました。



「アチーブメント」は特定の条件を満たすと獲得できるもので、やり込み要素です。
例えば、上図のスクリーンショットの「旅立ち」は、最初のステージをクリアすると獲得できます。
左に付いている「Lv.1」は「獲得難易度」で、そのアチーブメントを獲得する難しさを表しています。
獲得難易度はLv.1からLv.5まであります。



上図のスクリーンショットがメニュー画面です。まだ未完成ですが…

上部の「難易度選択」の下の各難易度をクリックすると、難易度を切り替える事ができます。

また、左側の「ストーリー」の下に並んでいる丸いもの（ボタン）をクリックすると、
そのボタンに応じたステージをプレイする事ができます。
ボタンの外側のリング状の部分はクリア済みの場合のみ表示され、
その色はトロフィーの獲得状況に応じたものになります（銅・銀・金）。

そして、右側の「サブコンテンツ」の下に並んでいるものをクリックすると、
そのサブコンテンツをプレイあるいは閲覧する事ができるようになる予定です（未実装）。
サブコンテンツは、ストーリーのステージをクリアしていく事で徐々に解放されていきます。



では、今回はこれで終わりとさせていただきます。

2015/10/01Reflequest その3

今回は、前回の最後に書いた通り、魔物にダメージを与えた時と倒した時のエフェクトを追加しました。
また、ステージクリア画面と、メニュー画面の一部の機能を作成しました。

現在、メニュー画面では「難易度の変更」と「プレイするステージの選択」ができる状態です。





前回登場した「トロフィー」について改めて説明しておくと、
各ステージにおいて、初めてシルバースコアに到達した状態でクリアすると「シルバートロフィー」が、
初めてゴールドスコアに到達した状態でクリアすると「ゴールドトロフィー」が獲得できます。

なお、ステージクリア画面において、最も上に表示される「STAGE CLEAR！」の文字は、
ゴールドスコアに到達していれば金色、シルバースコアには到達していれば銀色、
両方到達していない場合は銅色になります。

次回は、新システム「アチーブメント」の実装などを行う予定です。

では、今回はこれで終わりとさせていただきます。

2015/09/01Reflequest その2

今回は、前回の最後に書いた通り、右側に各種情報の表示を追加しました。
また、左側の下部に「ポーズ」「リトライ」「メニューに戻る」のボタンを追加しました。
さらに、軌道を分かりやすくする為、飛行中の光球に残像が出るようにしました。（スクリーンショット上部）

なお、前回書いた、球のスライドのS・Z・X・Cキーへの対応も行いました。



1. 情報

一番上の枠は1つ目の新システム「難易度」です。
「Classic」「Hard」「Very Hard」の3段階が存在し、後の方が難しいです。
Hard以上には光球の発射に時間制限が存在し、自ターンが始まってから、
Hardは3秒、Very Hardは1秒以内に光球を発射しないと、自動的に発射されてしまいます。
発射されるまでの残り時間は、光球のすぐ上に表示されます。

その下の枠は「ステージ名」と「ステージの種別」です。
左上に大きく表示されているのがステージ名、右下に小さく表示されているのがステージの種別です。
ステージの種別には、「通常ステージ」（Ball Defense の通常エリア）、
「ボスステージ」（〃 の少数精鋭エリア）、「大量発生ステージ」（〃 の大量発生エリア）、
「長期戦ステージ」（〃 の長期戦エリア）の4種類があります。

その下の枠は2つ目の新システム「スコア」です。
スコアは魔物にダメージを与える度に増加し、その量はそのターンにおいて
それまでにダメージを与えた魔物の数（＝コンボ数）が多いほど大きくなります。
上がハイスコアで、下の現在のスコアがこれを上回ると、
それまでの黒字の「ハイスコア　0」から、赤字の「ハイスコア更新！　前：0」へと表示が変化します。

その下の3つの枠は、左から「シルバースコア」「ゴールドスコア」「コンボ数」です。
シルバースコアとゴールドスコアは、各ステージにそれぞれ定められており、
スコアがこの値以上になると、値が黒字から赤字に変化し、
その状態でクリアすると銀のトロフィー・金のトロフィーを獲得できます。
トロフィーはゲームを進めていく上では関係はなく、いわゆる「やり込み要素」となっております。
そしてコンボ数は、1つ前で少し出てきましたが、
「そのターンにおいてそれまでにダメージを与えた魔物の数」です。これを増やす事を「コンボ」といいます。

その下の枠は「魔物の数」です。
分数で表されており、分子は残りの魔物の数、分母はそのステージに登場する魔物の数を表しています。
この分子が0になる、すなわち登場する魔物を全滅させるとステージクリアとなります。

その下の枠は「増援情報」です。
増援とは、ターン経過で新たに出現する魔物や、その出現の事です。
今作では、Ball Defenseと違い、初めから3列分魔物が出現しています。
魔物の数と同じく分数で表されており、分子は残りの増援の回数、
分母はそのステージで行われる増援の回数を表しています。
中央の魔物の画像が並んでいる所は、左の縦列から順に「1ターン後に出現する魔物」
「2ターン後に出現する魔物」「3ターン後に出現する魔物」…　を表しています。


2. ボタン

「ポーズ」は、左クリックかPキーで、ゲームを一時停止させられるボタンです。
ただし、Hard以上の時間制限が無意味にならないよう、一時停止中は左側がボタン以外見えなくなります。
一時停止中、このボタンは「ポーズ解除」となり、もう一度左クリックかPキーで再開する事ができます。

「リトライ」は、左クリックかRキーで、そのステージを初めからやり直せるボタンです。
ただし、魔物の出現位置は変わります。また、ハイスコアは保存されません。

「メニューへ戻る」は、左クリックかBキーで、そのステージのプレイをやめてメニューへ戻れるボタンです。
リトライと同じくハイスコアは保存されません。（※メニューは未作成です）

なお、キーボードによるボタン操作は、そのボタンが表示されていない状態だとできません。


◇次回の予定

次回は、Ball Defenseにもあった、魔物にダメージを与えた時や魔物を倒した時のエフェクトの
追加などをする予定です。

2015/08/02Reflequest その1

今回のゲームは、筆者の過去作「Ball Defense」のリメイク版です。
Ball Defenseを基に、様々な変更・追加を行ったものとなります。
名前は「Reflect」と「quest」を組み合わせた造語です。



では、現在制作した所まででBall Defenseから変更・追加した部分を紹介していきます。

1. 操作方法

Ball Defenseの制作に使用したアクションエディター4では実現できなかった
マウスによる操作を取り入れました。
球の発射および回収 （Ball Defenseにおけるターンスキップ） は左クリックで行い、
発射方向はマウスカーソルのある方向となります。

球のスライド （Ball Defenseにおける左右移動） はそのまま矢印キーで行います。
筆者は左利きなので左手にマウス、右手に矢印キーで問題なく操作できますが、
右利きの人は右手がマウスなので、左手が右側の矢印キーとなり操作しにくいと思われる為、
スライドには左側のS・Z・X・Cキーも矢印キーの代わりとして使えるようにしようと考えています。

余談ですが、たまに見かけるA・S・D・Wキーが上下左右に対応しているタイプのゲームに
筆者は疑問を抱いていました。矢印キーの方が分かりやすいのに何故なのか、と。
しかし操作にマウスを取り入れようという事で新たな操作として上記の方法を考えた時に、
その疑問が晴れました。A・S・D・Wキーなのは利き手に配慮する為だったのではないか、と。
まあ、それならなぜもっと位置が近いS・Z・X・Cキーにしないのか、という新たな疑問が増えましたが…

2. 発射方向線

発射方向を示す線（破線）を長くしました。
これは、発射方向の調節をマウスによるものとした事で、マウスカーソルを遠くに持っていけば
遠い所にも狙いがつけやすくなった為、もはや線の長さにほぼ意味はないだろうと思って、
それならば長くして反射した後の動きが想像しやすいようにしよう、という事で長くしました。

また、この線が発射後は消えるようにしました。次の自ターンの時に再び表示されます。

3. 魔物のアニメーション

魔物のアニメーションを構成する画像が、2枚から3枚に増えました。
また、画面内の全ての魔物において、動き（画像の切り替わり）のタイミングを統一しました。

・アニメーションの仕組みの変化

Before　Aを基本の画像として、A→B→A→B→…
After　　Bを基本の画像として、B→A→B→C→B→A→B→C→…

※基本の画像… 魔物図鑑などで静止画として使われる画像

4. ターン表示

「PLAYER TURN」「ENEMY TURN」の表示が、画面下部に表示されるようにしました。
PLAYER TURNは青字、ENEMY TURNは赤字となっています。
これは時間経過で消えますが、第2項で書いた通り
発射できる時しか発射方向の線が表示されないので、消えていても判別は可能と判断しました。

◇次回の予定

次回は、Ball Defenseにもあった、右側の情報を表示する部分を追加する予定です。
新システム（説明は次回）の追加の影響もあって、情報量が大幅にボリュームアップします。

2015/07/02図形メーカー その4

では早速、今回新たに描画できるようになった図形をスクリーンショットで紹介していきます。



左上： 二等辺三角形
2つの辺の長さが等しい三角形です。
高さと、底辺か頂角のどちらかを指定して描画します。

それ以外： ウニ形
正多角形を基に、その各辺を底辺とした二等辺三角形の底辺以外を描画した、トゲトゲな図形です。
図形の名前は、形がウニっぽいので勝手にこう名付けました。

二等辺三角形の部分（トゲの部分）は、高さか頂角を指定する事が可能で、
高さに負の値を指定すれば、内側に向かって突起を伸ばす事もできます。（→左下）
（頂角を指定する場合でも、内側に向かって伸びるように指定はできます）
さらに、星形になるように、正多角形の角の数に応じて頂角を計算してくれるように
指定する事も可能です。（→右下）

上述の星形にする機能を付けたので、その2で紹介した「星形」は廃止しました。



左上： 直線
今さらの直線です。
始点の座標に加え、「終点の座標」か、「終点までの距離＋終点の方向」を指定して描画します。

右上： 線雲形
複数の円（楕円にも対応）を一直線に並べ、重なっている部分以外を描いた、絵の雲みたいな図形です。
図形の名前は勝手に名付けたもので、「雲形」ではないのは、
円の並べ方を変えたタイプの図形も追加する予定だからです。
重なる部分は、中心の角度と角度の範囲を指定する形で調節する事ができます。

左下： 回転直線
くるくると輪っかを作っていく感じの曲線です。
名前が「直線」なのは、この図形が「コンパスの針の部分を『一直線』に動かして軸をずらしていきながら
鉛筆の部分を回していく」ような感じで描かれているからです。
輪っかの数・幅・高さや、一回転でどれだけ進むかなどを指定して描画します。

右下： 角丸正多角形
正多角形の各頂点を丸めた図形です。
丸みは値を指定して調節する事ができ、0で正多角形、
正多角形の基として指定する円の半径と同じ値で円になります。

では、今回はこれで終わりとさせていただきます。

2015/06/08図形メーカー その3

超久し振りの図形メーカーです。前回のその2から半年以上経ってしまいました。
図形を生成するプログラムが上手くいかなかったり、他のものを作っていたりで
長らくほったらかしにしていましたが、最近になって
次に描画できるようにする予定にしていた図形を描画する為の良い案を思い付いたので、
これをきっかけに、図形メーカーの制作を再開する事にしました。

では、新たに描画できるようにした図形をスクリーンショットで紹介していきます。
今回も今まで通り2枚ありますが、2枚目（新しい方）が昨日撮ったものであるのに対し、
1枚目（古い方）はほったらかしにし始める前の、半年以上前に撮ったものとなっています。



左上： 渦巻き形
その名の通り渦巻きのような形です。
回転方向や何周するか（角度単位でも調整可能）、線と線の間の幅などを指定します。

右上： 弦
円周上の2点を結ぶ直線です。円は分かりやすいように描画したもので、付属してはいません。
始点・終点をそれぞれ「円の中心からの角度」「X座標」「Y座標」のいずれかで指定します。
（基準となる円の半径も指定する必要があります）

左下： 角丸長方形
長方形の各頂点に丸みを付けたものです。
長方形の縦・横の長さに加え、丸くする範囲の縦・横の大きさを指定します。

右下： 出島形
弧が厚みを持ったような形です。出島っぽい形なので勝手にこう名付けました。
外側と内側の2つの半径と、開始角度・終了角度を指定します。



きらめき形です。出島形と同じく勝手に名付けました。
正多角形を基に、その各辺を基準とした、その正多角形の内角分の弧を内側に描画します。
この弧の深さ（基準とした辺と、弧の上でそこから最も離れている点の距離）は
倍率の形で自由に設定可能です。
（0倍にすると正多角形に、－1倍にすると円に、それ未満にすると外側に飛び出します）
右下以外の3つの図形は、いずれも同じきらめき形用のプログラムから生成されたものです。

なお、右下はその2に登場した花形です。似た性質を持っているので、左下との比較用に描画しました。
（きらめき形は弧が内角分なのに対し、花形は弧が内角の大きさに関係なく180度です）

左上は正方形を基に、深さ1倍で描画したものです。
右上は正十二角形を基に、深さ5倍で描画したものです。（角の数が増えるとへこみが浅くなっていきます）
左下は正六角形を基に、深さ6倍で描画したものです。


では、今回はこれで終わりとさせていただきます。

2015/05/09訓読文シミュレーター その2

お久し振りです。
今回は、前回の最後に書いた通り、訓読文の入力機能と
自動判定のON/OFFの設定機能を追加しました。



まずは、訓読文の入力機能について、上のスクリーンショットを使って説明していきます。

左側の「訓読文」の、薄い黄色の四角をクリックすると、
その文字（送り仮名なども含む）を選択する事ができます。
選択した文字の四角は、山吹色に濃くなります。
（この場合は「曰」）

その右にある「入力種類」の、薄い黄色の部分をクリックすると、
選択した文字の何を入力、あるいは設定するのかを選択する事ができます。
選択したものは、同じく山吹色に濃くなります。
（この場合は「送り仮名（通常）」）
また、訓読文中の選択した種類の文字は全て赤色になります。
（この場合は「ハク」「ビテ」「ニ」）

「漢字」「送り仮名（通常）」「送り仮名（再読）」「返り点１」「返り点２」は、
下にある「入力」のウィンドウから入力する事ができます。
このウィンドウも、選択されていなければ薄い黄色で、選択すると山吹色に濃くなります。

「置き字設定」と「再読文字設定」は、選択中の文字の四角をもう一度クリックする事で
「置き字かそうでないか」「再読文字かそうでないか」を切り替える事ができます。

なお、「↑キー」「↓キー」で、選択している文字を上下のものに変える事ができます。
押しっぱなしにしておくと、どんどんその方向に動いていきます。
「入力」のウィンドウが選択されていたら、選択された状態のまま動きます。

訓読文を少しでもいじると、右の「変換結果」と「変換過程」の背景が灰色になります。
これは、現在の訓読文の内容と、変換結果・変換過程が一致していない可能性を表しています。
その左の「変換」をクリックして変換すると、背景は白色に戻ります。



そして、自動判定のON/OFFの機能について、上のスクリーンショットを使って説明していきます。

この画面は「オプション」の画面です。
このオプションで、置き字や再読文字の自動判定のON/OFFなどを変更する事ができます。
空欄の部分は、今後追加する予定となっております。

これまで通り、選択されていない方は薄い黄色で、選択されている方は山吹色に濃くなっています。

右上の「戻る」をクリックすると、元の画面に戻る事ができます。
一番上のスクリーンショットでは、右上のこの部分は「オプション」となっており、
ここからオプションに行く事ができるという訳です。

では、今回はこれで終わりとさせていただきます。
次回は、現在の状態では訓読文を7文字までしか入力できないので、
もっと長く入力できるようにする予定です。

2015/04/09訓読文シミュレーター その1

送り仮名や返り点などを付け、日本語の形で読めるようにした漢文を「訓読文」といいます。
そして、この訓読文を完全に日本語の形にしたものを「書き下し文」といいます。
今回制作するのは、訓読文を入力して書き下し文に変換できるツールです。

ただし、変換した書き下し文が正しいという事は保証できません。
よって、最初は「訓読文変換機」という名前にしようと考えていたのですが、
あくまでもシミュレーションであるという事にして、「訓読文シミュレーター」と改名しました。



では、上図のスクリーンショットを使って説明していきます。

左側の「訓読文」の部分が、入力した訓読文が表示されるスペースです。
ただし、まだ入力する機能は作れておらず、この訓読文はプログラム側で生成したものです。

その右の「変換」と書かれた矢印をクリックすると、訓読文を書き下し文に変換できます。
さらにその右の「書き下し文への変換結果」に書き下し文が、
変換結果の下の「書き下し文への変換過程」にどういった理屈でこう読んだ（変換した）のかが
表示されます。
また、訓読文の方に読まれた順番が青色の数字で表示されます。（6→5→3→1→2→4→7というヤツ）

変換過程の文章では、その時点でどこを読もうとしているのかを示す[～文字目]が、
読む場合は普通の青色で、スルーする場合は薄い青色で表示されます。

なお、このスクリーンショットでは分かりませんが、返り点だけでなく
置き字や再読文字、ハイフンにも（一応）対応しています。
置き字・再読文字については、ツールの使用者が各漢字に
それらの文字である、という事を設定する形となりますが、
各漢字がそれらの文字なのかどうかを自動で判定する機能も搭載しています。
（正しく判定できるとは限りません）
ON/OFF可能ですが、まだON/OFFを設定する機能は作れていません（今はプログラム側で設定）。

では、今回はこれで終わりとさせていただきます。
次回は、訓読文の入力機能や自動判定のON/OFFの設定機能を追加する予定です。

2015/03/06スライドスクエア(再) その4

今回は、「パズルモード」を途中まで作成しました。
これにて、3つ全てのモードが揃いました。





では、上図のスクリーンショットを使って説明していきます。

「パズルモード」は、決められた手数内でブロックを全色揃えて「ステージ」をクリアしていくモードです。
レベル1～レベル4まで各10ステージずつ、合計40ステージあります。
(現在はまだ21ステージしか完成していません)

1枚目のスクリーンショットの画面において、「1-1」などと書かれている部分をクリックすると
そのステージをプレイする事ができます。
この部分にカーソルが触れていると、そこが黄色く光ります。(この場合1-5の部分にあたります)
クリア済の場合、この部分の左上に「済」と表示されます。
なお、交互に白色・灰色となっているのは、それぞれの境界を分かりやすくする為です。

2枚目のスクリーンショットを見たら分かる通り、他のモードとは異なってブロックは5色ありません。
レベル1では1色、レベル2では2色、レベル3では3色、レベル4では4色となります。
(4色は5色みたいなものですが)

ちなみに、下のような位置での2×2は揃ったとはみなされないのでご注意ください。
(揃った時の光が生じていない事からも読み取れます)



では、今回はこれで終わりとさせていただきます。

2015/02/15スライドスクエア(再) その3

今回は、2つ目のモード「エンドレスモード」を作成しました。



では、上図のスクリーンショットを使って説明していきます。

「エンドレスモード」は、右上に表示されている「制限時間」(残り～秒)が0になるまで、
フリーモードのシャッフル機能と同じようにランダムで生成される「問題」を解き続けて
左下に表示されている「スコア」を稼ぎ、左上に表示されている「ハイスコア」を追求するモードです。

5色全て揃えると、スコアが1増え、ボーナスとして制限時間が増加します。
そしてシャッフルが行われ、次の問題へと移行します。

スコアが増えるにつれて、難易度が高くなっていきます。
詳細には、初めの内はランダムにスライドされる回数が増えていき(ボーナスの制限時間も少し増えていく)、
途中からはボーナスの制限時間が少なくなっていきます。
ランダムにスライドされる回数とボーナスの制限時間は、右上の制限時間の下に表示されています。

では、今回はこれで終わりとさせていただきます。

2015/01/31スライドスクエア(再) その2

お久し振りです。
今回は、本作に登場する3つのモードの内の1つ、「フリーモード」を作成しました。



では、上図のスクリーンショットを使って説明していきます。

「フリーモード」は、自由に遊べるモードです。

左下の「配置リセット」をクリックすると、ブロックの配置を元の5色全て揃った状態に戻せます。

右上の「シャッフル」をクリックすると、一定の回数ランダムにスライドされます。
ただしスライドといっても一瞬で変化するので、どうスライドされたのかを見る事はできません。
よって、ランダムに「問題」を生成する機能として捉えてもよいでしょう。

シャッフルでスライドされる回数は、その下の（）内に表示されています。
さらにその下にある「－」「＋」をクリックする事で、回数を調節する事ができます。
最小1回、最大20回です。(最大回数は仮に定めたもので、以後変更される可能性があります)

ちなみに、シャッフルのスライドは、各スライド回数における(揃える為の)難易度が
それぞれできるだけ等しくなるように、完全なランダムではなくある程度規則を設けています。

1. 同じラインは2回連続でスライドされない
2. 縦に3回連続でスライドされない・横に3回連続でスライドされない
3. 最初の2回は、同じ方向にスライドされない

では、今回はこれで終わりとさせていただきます。

2015/01/10ストップウォッチ(新) その2(完成)

今回は、前回の最後に書いた通り、
その時点での経過時間を保存する「メモリー機能」を追加しました。
そして、どこがクリックに反応してどこがクリックに反応しないのかを分かりやすくする為、
クリックに反応する部分(ボタン)は背景を薄い黄色に変更しました。
以上の2つを適用して、先日、ストップウォッチが完成し、同日に公開しました。
ご利用の際はこちらからどうぞ。

なお、公開後、「メモリーの各単位における2桁目の0の有無が経過時間に応じて変化してしまう」
という不具合が発覚しましたので、それを受けて本日修正を行いました。
現在はもう大丈夫だと思います。



では、「メモリー機能」について、上図のスクリーンショットを使って詳しく説明していきます。

画面下の中央部、縦に5列並んでいる部分が「メモリー」です。
その左上の「メモリー記録」をクリックする事で、その時点での経過時間がここに保存されていきます。
最大100個まで保存可能で、その内容は自動的にセーブされます(オートセーブ)。
既に100個保存されている状態では「メモリー記録」をクリックしても何も起こりません。
メモリー登録の右にある「メモリー消去」をクリックすると、保存した経過時間を全て消去できます。

上図では、メモリーの左側に1～5の数字が表示されていますが、
これは1番目～5番目に保存した経過時間である事を表しています。
メモリーの左右にある「－(マイナス)」「＋(プラス)」で、
何番目～何番目に保存した経過時間を閲覧するかを切り替える事ができます。
ちょうど前のページに戻したり次のページに進めたりするような感じです。

では、今回はこれで終わりとさせていただきます。

2015/01/03ストップウォッチ(新) その1

今回は、前にツクローアドベンチャーでも作ったストップウォッチを、
今度は公開用としてFlashで制作しようというものです。



では、上図のスクリーンショットを使って説明していきます。

このストップウォッチは、99日23時間59分59秒999まで計測できます。
よって、どうしても字数が多くなってしまうので、視覚的に分かりやすくする為に、
使われていない単位(この場合だと日・時間)は、数値共々文字の色が薄くなるようにしています。

「スタート」をクリックすると時間のカウントが始まります。
既に動いている時は文字の色が薄くなり、クリックしても何も起こりません。

「ストップ」をクリックすると時間のカウントが止まります。
既に止まっている時は文字の色が薄くなり、クリックしても何も起こりません。

「リセット」をクリックすると時間が0にリセットされます。
動いている状態でクリックすると、0にリセットされた上で動き続けます。

さらに、このストップウォッチはオートセーブ機能を備えています。
カウントが止まっている状態で画面を閉じると、次に開いた時はその時間からとなります。
カウントが動いている状態で画面を閉じると、閉じている間のカウントも行われ、
次に開いた時は閉じていた間を加味した時間からとなります。

次回は、ラップタイムなどの計測もできるようにする為、
ボタンをクリックしたタイミングの時間を保存する「メモリー」機能を追加する予定です。

では、今回はこれで終わりとさせていただきます。

2014/12/06スライドスクエア(再) その1

今回は、かつてツクローアドベンチャー2で挫折した「スライドスクエア」の制作に
Flashで再挑戦しようというものです。

これは、ルービックキューブを基にしたゲームです。
「立体的なルービックキューブは、どう動かすとどう変わるのかが分かりにくい」と感じた為、
平面的な展開図にして考えてみた、というのがそもそもの発端です。



では、上図のスクリーンショットを使って説明していきます。

十字型に配置されたブロックを、矢印をクリックして2マス単位でスライドさせ、
それぞれの色のブロックを全て2×2の正方形にすればクリアです。
上下左右は繋がって(ループして)おり、例えば、上に動かすと上の2ブロックは下から出てきます。

今回は、2×2の正方形になっているブロックが光ります(この場合赤と紫が光っています)。
また、スライドがアニメーションします(前回はワープの様な動きでした)。
周囲とずれているラインがあるのは、そのラインがスライドのアニメーション中であるからです。

右側に1つだけ他より明るい色の矢印がありますが、これはカーソルがその矢印に触れている為です。
また、左上の分数は、何色中何色が2×2の正方形になっているかを表していますが、
現在作成中のクリア判定のテストの為に一旦表示させているだけなので、
今後なくなるか位置などが変更される可能性が高いです。

では、今回はここまでで終わりとさせていただきます。

2014/11/13図形メーカー その2

今回は、前回の最後に書いた「星形」や「花形」のプログラムを作成しました。
では、早速スクリーンショットでの紹介に入ります。



星形です。正多角形を基に描画します。
この正多角形の有無やその部分の大きさは自由に設定可能です。
これら4つの図形は、いずれも同じ星形用のプログラムから生成されたものです。

左上は基となる正多角形を描画しなかった場合で、右上はそれを描画した場合です。
左下はこの正多角形に該当する部分を小さくした場合です。
右下は2つの同じ形を回転させて組み合わせたものです。



花形です。正多角形を基に、その各辺を直径とした半円の弧を描画します。
この弧の膨らみの大きさ(＝辺に垂直な方向の半径)やその方向(外側か内側か)は自由に設定可能です。
上と同様に、これら4つの図形は、いずれも同じ花形用のプログラムから生成されたものです。

左上は基となる正多角形を描画しなかった場合で、右上はそれを描画した場合です。
左下・右下は弧を内側にした場合です。


では、今回はこれで終わりとさせていただきます。

2014/11/01図形メーカー その1

画像作成・加工が行えるフリーソフトは沢山ありますが、
数学的な図形の描画はなかなか面倒だったりするものです。
正方形や長方形、円形といったものはともかく、正多角形や星形などはなかなか大変です。
ならば、そういった図形を簡単に描画出来るツールを作ってしまえばいい、
私はそう考えました。

Flashのスクリプト(ActionScript)には、座標を指定するだけで
簡単に直線を描画できる命令(関数)があります。
曲線も、直線を沢山組み合わせればそれっぽく見せられる筈です。
…という訳で、私は数学的な図形の描画に特化したツール「図形メーカー」の制作を開始しました。

現在は、ただひたすら図形を描画するプログラムを作り続けています。
ここからは、これまでに描画できるようにした図形(をいくつか組み合わせた物)を
スクリーンショットで紹介していきます。
なお、ほとんどの図形は、回転角度を指定して回転させる事ができるようになっています。



左上：　正円形。いわゆる普通の円です。半径を指定します。
右上：　正多角形。円周を等分した点を直線で結んで描画します。基準となる円の半径と角の数を指定します。
左下：　楕円形。半径が一定でない細長い円です。横方向と縦方向、2つの半径を指定します。
右下：　扇形。正円形の一部を切り取った様な形です。半径と開始角度、終了角度を指定します。



左上：　弧。扇形から直線を抜いたものです。指定するものは扇形と同じです。
右上：　菱形。2つの対角線が中点で垂直に交わる四角形です。横方向と縦方向の対角線の長さを指定します。
左下：　長方形。全ての角が直角である四角形です。縦・横の長さを指定します。
右下：　波線。いわゆるサインカーブです。振幅と周期(波の密度)、波の数を指定します。

次回は、星形や花形といった少し複雑な図形の描画にも挑戦してみようと思っています。
では、今回はここまでで終わりとさせていただきます。

2013/12/29F・S・E Shooting

今回は、新たな試みです。
「ParaFla」というFlash制作用のフリーソフトを使って、Flashゲームを作ってみました。
作品名は、記事のタイトルの通り「F・S・E Shooting」。
FはFlash、SはSimple、EはEndlessの頭文字から取っており、
Flashのシンプルなエンドレス形式のシューティングゲームとなっております。
左のサイドバーのリンクの「自作Flashゲーム集」、もしくは
ここからどうぞ。

今回のスクリーンショット