SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「全自動4コマ」で4コママンガを作る

「全自動4コマ」で4コママンガを作る1~スクリプトで自作4コマ~

Web上のスクリプトエディタを使った4コママンガ作成


スクリプトによる出力4コマの操作

 スクリプトエディタでは、各コマに対して、スクリプトを記述していくことで、出力内容を変更できます。また、$keyの入力欄に書き込んだ言葉が、タイトルの部分に表示されます。

 各コマの切り替えは、以下の場所で行えます。[1]~[4]のボタンをクリックすることで、テキストエリアにそのコマのスクリプトが表示されます。

コマの切り替え
コマの切り替え

 下記の位置の各ボタンをクリックすることで、テキストエリアの末尾にスクリプトが挿入されていきます。

スクリプトの挿入
スクリプトの挿入

 以下、よく使う命令のリストを示します。ここではすべての命令や引数は示さず簡単な説明にとどめますが、詳細な命令や引数を知りたい場合は「全自動4コマ」付属のスクリプト・マニュアルを参照してください。

よく使う命令
命令 説明
bg(r,g,b); 背景色の設定
bs(v,h); 画像描画基準位置の変更
p(f,x,y); 画像の描画
s(s); 台詞の格納
f(x1,y1,x2,tp); フキダシの描画
fl(x,y); 集中線の描画

 「全自動4コマ」ではこのように、4コママンガのコマ内の情報をいくつかの命令としてまとめています。4コママンガは、定型処理しやすいマンガ表現のため、このような簡単な命令群で表すことが可能です。

 では、それぞれの命令の解説を行っていきます。

bg(r,g,b);-背景色の設定

 コマの背景色を設定します。0~255の数値をrgbのそれぞれに記述することで、背景色のRGBを設定します。この命令を実行すると、背景色の設定が指定した色に変更されます。また、命令の実行とともに背景をその色で塗り潰します。以降、すべてのコマの色が設定した色になります。

 以下が、記述例となります。

bg(r,g,b) 記述例
bg(255,240,240);

bs(v,h);-画像描画基準位置の変更

 画像の貼り付け基準位置を変更します。これは、画像を左右どちらの端に吸着させるか、また上下どちらの端に吸着させるかを指定するものです。ノベルゲームのキャラクター画像が、下寄せ(画面の下端に吸着するように描画される)になっているのを想像すると分かりやすいと思います。

 vには、縦位置の吸着位置を下にするか上にするかを指定します。下にする場合はbを、上にする場合はtを指定します。

 hには、横位置の吸着位置を右にするか左にするかを指定します。右にする場合はrを、左にする場合はlを指定します。

 以下が、記述例となります。

bs(v,h) 記述例
bs(b,r);

 画像で説明すると、次のようになります。

右下を基準位置に
右下を基準位置に

p(f,x,y);-画像の描画

 画像を描画します。fが、画像のファイル名、xyが、画像の描画位置になります。この命令では、先ほどのbs(v,h);で指定された位置を基準として描画が行われます。また、xyに指定する数値は、ドット数ではなく、コマ内の何%の位置かになります。

 少し分かりにくいと思うので、bs(v,h);と合わせて例を示したうえで、解説を行います。

p(f,x,y) 記述例1
bs(b,r);
p(km_nya0.gif,0,0);

 この記述例1の場合、「km_nya0.gif」という画像を、コマの下の枠線と右の枠線に吸着させて描画します。

 上記の例では、次のような表示になります。

p(km_nya0.gif,0,0);で描画
p(km_nya0.gif,0,0);で描画
p(f,x,y) 記述例2
bs(b,r);
p(km_nya0.gif,10,5);

 この記述例2の場合、「km_nya0.gif」という画像を、コマの下の枠線から10%上に移動した位置、コマの右の枠線から5%右に移動させた位置に描画します。

 上記の例では、次のような表示になります。

p(km_nya0.gif,10,5);で描画
p(km_nya0.gif,10,5);で描画

 4コママンガに出てくる画像は、大体バストアップで、コマの下に吸着しているので、上記のような指定方法にしています。

s(s);-台詞の格納

 フキダシ内に描画する台詞を設定します。以下に記述例を示します。

s(s) 記述例
s(ねえ $keyって\n何?);

f(x1,y1,x2,tp);-フキダシの描画

 フキダシを描画します。x1にフキダシの左位置、y1に上位置、x2に右位置を指定します。下位置は、台詞の長さによって自動的に計算されるので記述する必要はありません。位置の指定は、左上を基準としたコマ内の%位置になります。

 tpには、フキダシの種類を指定します。フキダシの種類には以下のものがあります。何も指定しない場合は自動的に通常のフキダシになります。

フキダシの種類
説明
b 通常のフキダシ
r 四角のフキダシ
t 透明のフキダシ
n ぎざぎざのフキダシ
c 雲(独白)のフキダシ

 以下、s(s);と合わせて記述例を示し、説明を行います。

f(x1,y1,x2,tp) 記述例
s(ねえ $keyって\n何?);
f(7,10,45);

 上記例では、s(s);で格納した文章をコマの左上を基準として横方向に7%を左端、縦方向に10%を上端、横方向に45%を右端としてフキダシの描画を行います。

 図で示した方が分かりやすいと思うので、図で示します。

f(7,10,45);
f(7,10,45);

fl(x,y);-集中線の描画

 最後に説明するのは集中線です。xyで指定した位置を中心にして集中線を描画します。他の命令と同じで、指定位置はコマ内の%位置となります。値を何も指定しなかった場合はコマの中央に集中線を描画します。

 以下、記述例です。

fl(x,y) 記述例
fl(25,60);

 上記例では、コマの左上を基準として横に25%、縦に60%の位置に集中線を描画します。

 以下、出力例です。

fl(25,60);
fl(25,60);

 次ページでは、スクリプトを書き換えた作成例を示します。

次のページ
作成例

この記事は参考になりましたか?

「全自動4コマ」で4コママンガを作る連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/2064 2008/09/04 17:53

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー