VRM4 スクリプト -スプライト 天候編-

この章で主に扱うスクリプト

• SetVector       // 座標入力に使用
  SpriteSetData   // テクスチャー上の座標
  SpriteSetPos    // スプライトの表示位置
  SpriteSetSize   // スプライトの表示サイズ
  SpriteSetAlpha  // スプライトの透明度
  SpriteSetDisp   // スプライトの表示状態
  SpriteChangeTex // 使用リソースIDを変更
  

教材

以下のレイアウトをダウンロードして使用します。

• サンプル (2.39MB)
• 素材 (1.75MB)

VRM Onlineではユーザーが画面に任意の画像を表示させることが出来るスプライト機能が実装されました。 今回は「画像を入れ替える」機能を使って雨を表現する方法と「画像を動かす」方法を使って雪を表現する方法を紹介します。 どちらもスプライト機能の基本機能を使っています。

1. 雨を表現してみる

雨の表現には画像を入れ替えるSpriteChangeTexを素早く実行して表現します。 素材にある1～5の画像をレイアウトのリソースに登録してスクリプト編集から以下のスクリプトを記述します。

• InitSprite 1            // リソースを指定
  Var a                   // リソース座標1
  Var b                   // リソース座標2
  Var c                   // 表示座標1
  Var d                   // 表示座標2
  Var id                  // リソースID
  Var ev                  // イベント用
  SetVector a, 0  ,0  ,0  // 座標1に入力
  SetVector b, 512,512,0  // 座標2に入力
  SetVector c, 0,  0,  0  // 表示1に入力
  SetVector d, 1.4,1,  0  // 表示2に入力
  set id, 1               // id = 1
  SpriteSetData  id, a, b // テクスチャー上の座標
  SpriteSetPos   id, c    // スプライトの表示位置
  SpriteSetSize  id, d    // スプライトの表示サイズ
  SpriteSetAlpha id, 0.3  // スプライトの透明度
  SpriteSetDisp  id, 2    // スプライトの表示状態
  
  SetEventTimer this, rain, ev, 30
  
  BeginFunc rain
  if>= id 5
  set id, 1
  else
  add id, 1
  endif
  SpriteChangeTex id      // 使用リソースIDを変更
  EndFunc

2. 雪を表現してみる

雪の表現は雨の表現と違い1枚の絵から生成します。まず素材にあるsnow.bmpは左右で異なる絵が表現されています。 これをSpriteSetDataで切り分け、1枚のスプライト画で使用する領域を指定します。
次に雪の画像は断続的に下へ流れるので、繰返し描画できるよう同じ画像を2枚スプライト側で定義して、一番下まで流れると画面外の上側に移動させることにします。 また奥行き感を出すために大きめ(近く)の雪は早く、小さめ(遠く)の雪は遅く流れるようにします。

• InitSprite 1  // リソースを指定
  Var a  // リソース座標1
  Var b  // リソース座標2
  Var c  // 表示座標1
  Var d  // 表示座標2
  Var p1 // 1枚目座標
  Var p2 // 2枚目座標
  Var p3 // 3枚目座標
  Var p4 // 4枚目座標
  Var ev // イベント用
  
  // 大きめの雪を定義
  SetVector a,   0,  0,0
  SetVector b, 256,512,0
  SpriteSetData 1, a, b
  SpriteSetData 2, a, b
  // 小さめの雪を定義
  SetVector a, 256,  0,0
  SetVector b, 256,512,0    // (再定義)
  SpriteSetData 3, a, b
  SpriteSetData 4, a, b
  // 座標定義
  setf p1, -2.66
  setf p2,  0.0
  setf p3, -2.66
  setf p4,  0.0
  // 透明度定義
  SpriteSetAlpha 1 0.8
  SpriteSetAlpha 2 0.8
  SpriteSetAlpha 3 0.4
  SpriteSetAlpha 4 0.4
  // 表示サイズ定義
  SetVector d, 1.33,2.66,0 
  SpriteSetSize 1, d
  SpriteSetSize 2, d
  SpriteSetSize 3, d
  SpriteSetSize 4, d
  // 表示状態定義
  SpriteSetDisp 1, 2
  SpriteSetDisp 2, 2
  SpriteSetDisp 3, 2
  SpriteSetDisp 4, 2
  
  SetEventTimer this, snow, ev, 33
  
  BeginFunc snow
  // 1枚目
  if> p1, 2.66
  add p1, 0.01
  else
  setf p1, -2.66
  endif
  SetVector c, 0,p1,0
  SpriteSetPos 1, c
  // 2枚目
  if> p2, 2.66
  add p2, 0.01
  else
  setf p2, -2.66
  endif
  SetVector c, 0,p2,0
  SpriteSetPos 2, c
  // 3枚目
  if> p3, 2.66
  add p3, 0.005
  else
  setf p3, -2.66
  endif
  SetVector c, 0,p3,0
  SpriteSetPos 3, c
  // 4枚目
  if> p4, 2.66
  add p4, 0.005
  else
  setf p4, -2.66
  endif
  SetVector c, 0,p4,0
  SpriteSetPos 4, c
  
  EndFunc

謝辞

本スクリプト・及び画像データはUSO800鉄道氏のご協力により使用させて頂いています。
また本サンプルレイアウトにはZio氏の天球テクスチャーを使用させて頂いています。