単語記事: 音ゲー関連記事で使えるテンプレート一覧(その2:譜面再現系)

編集  

この記事では、音ゲー関連記事の編集に役立つ譜面再現系のHTMLテンプレートお絵カキコテンプレートを集めている。

目次

HTMLを利用した譜面再現系テンプレート

ここでは、ソースコードコピペして使うタイプテンプレを紹介する。

jubeat

jubeatのONLINE MATCHING待機時間の暇潰し一覧」の記事で使われているテンプレ(ひとまわり大きめ)。<table>のセルが4×4で並んでいるだけなので、テンプレと言うほどたいそうな物ではないかも知れないが…

なお、このテンプレでは後続の文章が右側に回りこむ仕様になっている。これを解除してテンプレの下に後続の文章を配置したい場合は、ソースコードの1行にあるfloat: left;の部分を削除すればよい。

ソースコード

<table style="margin: 10px; float: left; width: 128px; height: 128px;">
<tbody>
<tr><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td></tr>
<tr><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td></tr>
<tr><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td></tr>
<tr><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td><td height="32" width="32"></td></tr>
</tbody>
</table>

サンプル

使い方

  1. 上のソースコードコピーする。
  2. テンプレを貼り付けたい記事の編集画面を開き、HTMLエディタ効化する。
  3. テンプレを挿入したい位置に、先ほどコピーしたソースコードを貼り付ける。
  4. HTMLエディタを有効に戻す。すると編集画面に上のサンプルのような、四形(これをセルという)が4×4に並んだ図形が出てくるはず。
  5. このままでは単なるセル集合体でしかないので、セルの色を変えて譜面を再現してみよう。まずは色を変えたいセルの上でクリックし、文字カーソルがそのセルの中に表示されている状態にする。
  6. HTMLエディタの上のほうに色々なアイコンが並んでいるが、上の段の左から10番に「セルプロパティ」というアイコンがあるので、それをクリック
  7. セルプロパティ」というウインドウが新しく開かれるので、上の「上級者向け」タブをクリック
  8. 出てきた画面のなかに「背景色」という入欄がある。試しにここに半で「ff0000」と入して、下の「更新ボタンを押してみよう。
  9. そうすると、先ほどのセルの色がに変わっているはず。あとは5~8を繰り返して、色を変えたいセルの色を全て変えればよい。

ちなみにWindowsユーザーであれば、上の手順5~6を行う代わりに「色を変えたいセルの上で右クリックセルセルプロパティ」の順に操作しても良い。また、手順8で「ff0000」の代わりに別の数値を入れれば、以外の色にすることができる(ex. 00ff00→、0000ff)。

注意点としては、色を定する際はセルひとつひとつに対して行うこと。行や列の色を一括して変更すると、環境によっては設定がうまく反映されないことがある。

お絵カキコを利用した譜面再現系テンプレート

ここでは、お絵カキコの「基にしてお絵カキコする」機を利用するタイプテンプレを紹介する。

使い方

どのテンプレも基本的な使い方は同じなので、ここでまとめて説明する。

  1. 下で紹介しているテンプレのなかで、使いたいものがあったら、まずテンプレ画像をクリックしてみよう。
  2. すると、そのテンプレ画像が描かれた掲示板レスへ飛べる。レスの下のほうに「ほめる」「基にしてお絵カキコする」という2つのボタンがあるので、ここでは「基にしてお絵カキコする」ボタンを押す。
  3. グニャラペイントが起動し、テンプレ画像がはじめから表示された状態でお絵カキコができるようになる。ここから、テンプレ譜面を描き足していこう。グニャラペイントの画面を見ると「レイヤーツール」というウインドウがあり、その中に「背景」「レイヤー1」「レイヤー2」という3つのレイヤーが用意されているはずだ。まず最初に「レイヤー1」をクリックし、これを編集可な状態にしておくこと。これを忘れると、後で修正したい箇所が出てきたときに大変な思いをすることになる。
  4. 次に「ペンツール」というウインドウを見ると、ドと書かれたボタンがあるのがわかる。これはドット絵用のペンが使えるようになるボタンで、これを使わないと勝手にアンチエイリアスがかかって非常に面倒なことになるので、ドボタンを押してドット絵ペンが使えるようにしておこ
  5. 次に「補助ツール」というウインドウでは、「拡大」スライダーでキャンバスの表示倍率を変えられるようになっている。ドット絵ペンを使用した場合は拡大しながらの作業がほぼ必須のため、適当な大きさに拡大すると良い(推奨は600800くらい)。同時に、補助線の部分を左から「4」「ピクセル」「縦横にのみチェック」に設定し、キャンバスに補助線が引かれた状態で作業するとやりやすいだろう。
  6. ここまで準備が整ったら、いよいよ譜面の描き込み開始である。キャンバスの一番下(もしくは一番上)にノートのサンプルがあるので、それを真似しながら1ドットずつポチポチ描き込んでいこう。使用する色は全てペンツールに予め用意してあるので、新しく作る必要はない。
  7. もし描いている途中で間違えた箇所があった場合、ペンツール消ボタンを押すとペン消しゴムになるので、それを使ってグリグリ消そう。消し終わった後は再度ドボタンを押して、ドット絵ペンに戻すのを忘れずに。
  8. 譜面を全て描き終わったら、レイヤーツール」ウインドウにある「レイヤー2」を選択した後、下の削ボタンを押してレイヤー2を削除しよう。これを行わないと、キャンバスの上下にサンプルが残ったままになってしまう。
  9. 最後に「書き込みフォーム」に必要事項を書き込み、「お絵カキコする!」ボタンを押せば完成!作成した譜面を記事の編集時に挿入できるようになる。

beatmaniaIIDX

以下のテンプレは、1小節の縦の長さ=96ドットである。これを念頭に置きながら、ノートの間隔を決めていくことになる。
たとえば16分間隔でノートを配置したい場合は、96÷16=6であるから、ノートの厚さ(2ドット)+ノートの間隔=6ドットになるように、4ドットの間隔をけてノートを配置すればよい。 同様に、8分間隔の場合は96÷8-2=10ドット、4分間隔の場合は96÷4-2=22ドットの間隔をけてノートを配置する。キャンバスの上のほうに座標値が表示されるので、それを頼りにノートを配置していくこと。

IIDX1P側1小節分IIDX1P側2小節分IIDX1P側4小節分IIDX2P側4小節分IIDX2P側2小節分IIDX2P側1小節分

使用例

灼熱Beach Side Bunny[SP ANOTHER] Almagest[SP ANOTHER] quasar[DP ANOTHER]quasar[DP ANOTHER] Go Berzerk[DP ANOTHER]Go Berzerk[DP ANOTHER]
灼熱Beach Side Bunny
[SP ANOTHER]
Almagest
[SP ANOTHER]
quasar
[DP ANOTHER]
Go Berzerk
[DP ANOTHER]

1Pテンプレと2Pテンプレを組み合わせることで、ダブル譜面を再現することもできる。 
チャージノートバックスピンスクラッチは、普通ノートを縦にびよーんと伸ばしておけば多少はそれっぽく見える…かも。 

5鍵beatmania

ノートの形状や、1小節の縦の長さが96ドット分であることはIIDX版のテンプレと同様。そのため、IIDXテンプレとほぼ同じように使用できる。

注意すべき点は、このテンプレクラシックフレームを想定して作られていることである。よって、鍵盤はレーンの界線とノートの中心線が一致するように配置する形となる。

5鍵1小節分5鍵2小節分5鍵4小節分

使用例

FREE KICKER[SP ANOTHER] LIQUID RAIN[SP ANOTHER] JAUNTY BOUNTY[DP]JAUNTY BOUNTY[DP] NORTH[DP]NORTH[DP]
FREE KICKER
[SP ANOTHER]
LIQUID RAIN
[SP ANOTHER
JAUNTY BOUNTY
[DP]
NORTH
[DP

こちらも2つ組み合わせればダブル譜面を再現可。 

pop'n music

1小節の縦の長さは5鍵beatmania版・IIDX版と同じ96ドット分。ただしノートの形状は異なり、厚さが5ドット分あるので、ノート間の間隔を計算する際は注意を要する。たとえば16分間隔で配置したい場合は、96÷16-5=1ドットの間隔をける。

また、実際のゲーム上での表示に合わせ、このテンプレでは前列系のポップ君(赤・緑)の横幅と後列系のポップ君()の横幅とが若干異なっている。

pop'n1小節分pop'n2小節分pop'n4小節分

使用例

サイレント[EX] ドラムンフライ[HYPER] ダージュ[EX]
サイレント[EX] ドラムンフライ[HYPER] ダージュ[EX]

GuitarFreaks

5鍵beatmania版・IIDX版と同様、1小節の縦の長さ=96ドットノートの厚さ=2ドットである。ただしこちらは譜面が上下逆になっているので、特に普段REVERSEをONにしてプレイしている人はノートの配置に注意。また、ワイリングには対応していない。

なお、このテンプレではスペースの都合上、ノートのサンプルを上と下の両方に用意してある。

GF1小節分GF2小節分GF4小節分GFXG4小節分GFXG2小節分GFXG1小節分

使用例

KAISER PHOENIX[GUITAR / MASTER](XG) 一網打尽[GUITAR / MASTER]
KAISER PHOENIX
[GUITAR / MASTER]
一網打尽
[GUITAR / MASTER]

他のテンプレにも言えることだが、上の一網打尽のように、変拍子曲などで小節線を引き直したい場合は、「背景レイヤーロックを外して行う。

関連項目


【スポンサーリンク】

携帯版URL:
http://dic.nicomoba.jp/k/a/%E9%9F%B3%E3%82%B2%E3%83%BC%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E4%B8%80%E8%A6%A7%28%E3%81%9D%E3%81%AE2%3A%E8%AD%9C%E9%9D%A2%E5%86%8D%E7%8F%BE%E7%B3%BB%29
ページ番号: 4621015 リビジョン番号: 2335048
読み:オトゲーカンレンキジデツカエルテンプレートイチランソノニフメンサイゲンケイ
初版作成日: 11/04/29 21:14 ◆ 最終更新日: 16/03/09 18:36
編集内容についての説明/コメント: 関連項目に「SOUND VOLTEXの譜面制作者(エフェクター)一覧」を追加しました
記事編集 / 編集履歴を閲覧
このエントリーをはてなブックマークに追加

この記事の掲示板に最近描かれたお絵カキコ


Spica(SPA)その2

Spica(SPA)その1

Spica(SPH)その2

Spica(SPH)その2

Spica(SPN)その2

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

音ゲー関連記事で使えるテンプレート一覧(その2:譜面再現系)について語るスレ

56 : ななしのよっしん :2015/01/11(日) 22:54:32 ID: QVOANBMOOw
ここは3/4じゃなくて6/8

信頼と安心と実績の逆階段、最近パチモンが現れたとかなんだとか
あと抜け多すぎて適当に押してたらハマるのも頷ける

タイトル:MENDES(SP黒ANOTHER)70~77小節目
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

57 : ななしのよっしん :2015/01/14(水) 19:04:37 ID: ZXIP8o+uVR
CN・BSSを頑ってみた

タイトル:Adularia(SP HYPER 2P側)
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

58 : ななしのよっしん :2015/03/28(土) 02:26:31 ID: ZXIP8o+uVR
高速トリルがどんなふうに見えるかのテスト

タイトル:I can fly,I've got reason [A(7)]
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

59 : ななしのよっしん :2015/09/14(月) 11:58:18 ID: p2PnHrp00c
ごめんなさい、つい魔がさしてしまい

タイトル:L.D.
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

60 : ななしのよっしん :2015/12/21(月) 19:29:51 ID: ZXIP8o+uVR
新しい記事用

タイトル:Spica(SPN)その1
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

61 : ななしのよっしん :2015/12/21(月) 20:06:36 ID: ZXIP8o+uVR
続き

タイトル:Spica(SPN)その2
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

62 : ななしのよっしん :2015/12/27(日) 03:43:03 ID: ZXIP8o+uVR
もうError #2048は勘弁

タイトル:Spica(SPH)その2
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

63 : ななしのよっしん :2015/12/27(日) 04:15:12 ID: ZXIP8o+uVR
さっきのはその1でしたね

タイトル:Spica(SPH)その2
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

64 : ななしのよっしん :2015/12/29(火) 16:35:06 ID: ZXIP8o+uVR
24分が異様に増えている

タイトル:Spica(SPA)その1
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

65 : ななしのよっしん :2015/12/29(火) 17:13:35 ID: ZXIP8o+uVR
wac高難易度アレンジは強

タイトル:Spica(SPA)その2
画像をクリックして再生!!
この絵を基にしています!
  Twitterで紹介する

ニコニコニューストピックス
電ファミwiki
  JASRAC許諾番号: 9013388001Y45123
  NexTone許諾番号: ID000001829