%include "default.mgp" %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %nodefault %size 7, font "standard", fore "white", vgap 20, back "black" %bquality 10 %center バックグラウンド グラデーションの使い方 (暫定版) %size 4 宇夫 陽次朗 yuo@Nui.org %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 利用法 コマンド "bgrad" で背景グラデーション描画 デフォルトの挙動は 全画面 上から下 青から黒に変化 引数を与えないときはデフォルト描画 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad グラデーション描画原理 背景グラデーションは グラデーション用の画像を生成 してから 画面に合成 することで描画されます。 引数は5つあり、それぞれの引数は 生成する画像のための引数 画面に合成するための引数 に分類できます。 引数のあとには、グラデーションを構成する色のリストが続きます。 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 50 50 生成する画像のための引数 画面に対する生成領域の大きさを指定する引数 第1引数: X方向に対する相対的な大きさをパーセンテージで指定 第2引数: Y方向に対する相対的な大きさをパーセンテージで指定 生成画面の性質を指定する引数 第3引数: 生成画像の最大色数を指定 第4引数: 生成画像の回転角を指定 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 50 50 画面に合成するための引数 合成方法を指定する引数 第5引数: 拡大指示フラグ 0: 生成画像をタイリングする 1: 生成画像を画面全体を満たすように拡大する %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad bgrad文法(まとめ) 第1引数: 画面に対するX方向の相対サイズ 値域: 1-100 (0は100%を示す)/デフォルト: 100% 第2引数: 画面に対するY方向の相対サイズ 値域: 1-100 (0は100%を示す)/デフォルト: 100% 第3引数: 利用する色数 デフォルト: 128色 第4引数: 回転角度 値域:-360 - 360/デフォルト: 0度(画面に平行) 第5引数: 拡大フラグ 1:拡大,0:画面を満たすまで繰り返し/デフォルト: 1 それ以降は色指定 デフォルト blue,black %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 背景ギャラリー(基本編) それではいくつかの背景パターンについて順に見ていきましょう。 ここでは、 縦方向グラデーション 横方向グラデーション(1) 横方向グラデーション(2) 回転効果 拡大効果 オートサイズアジャスト を見ていきます。 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 0 0 128 90 1 "black" "red" "black" "red" "black" "red" "black" 縦方向グラデーション %size 4 bgrad 0 0 128 90 1 "black" "red" "black" "red" "black" "red" "black" %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 0 0 128 0 1 "black" "red" "black" 横方向グラデーション(1) %size 4 bgrad 0 0 128 0 1 "black" "red" "black" %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 0 0 128 0 1 "blue2" "black" "black" "black" "blue4" "blue3" "blue4" 横方向グラデーション(2) %size 4 bgrad 0 0 128 0 1 "blue2" "black" "black" "black" "blue4" "blue3" "blue4" %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 25 25 128 45 1 "black" "red2" "black" 任意角度の回転 %size 4 bgrad 25 25 128 45 1 "black" "red2" "black" 回転させると遅い %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 100 100 128 90 1 "black" "red" "black" 拡大効果 %size 4 bgrad 100 100 128 90 0 "black" "red" "black" %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 0 0 128 0 1 "blue" "cyan" "black" "black" "black" "black" "black" "green" "black" オートサイズアジャスト %size 3 bgrad 0 0 128 0 1 "blue" "cyan" "black" "black" "black" "black" "black" "green" "black" 大きさは全画面(0 0)で自動アジャスト zoomflagが必要 青/シアン/黒…黒/緑/黒 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 背景ギャラリー(応用編) さらにいくつかの背景パターンを見ていきましょう。 こんなこともできるという例としてご利用ください。 カラフルな例 とらでぃしょなる日本風 小さい画像を拡大して効果を作る ちいさな画像で大きな画面(1) 小さな画面で大きな効果(2) こんなのも…(1) こんなのも…(2) 円形グラデーション(1) 円形グラデーション(2) 円形グラデーション(3) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %fore "white" %bgrad 0 0 128 180 1 "black" "white" "black" "red" "orange" "green3" "black" "blue" カラフルな例 %size 3 bgrad 0 0 128 180 1 "black" "white" "black" "red" "orange" "green3" "black" "blue" こんなこともできる。 180度回転しているので、色リストは前後逆転 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 10 0 128 90 0 "black" "orange" "black" "black" "black" "black" "black" "green" "black" とらでぃしょなる日本風 %size 3 bgrad 10 0 128 90 0 "black" "orange" "black" "black" "black" "black" "black" "green" "black" 描画サイズにたいして10%x100%の画像を90度回転してから 画面分リピート (描画サイズ=画面サイズ*クオリティ) 黒/オレンジ/黒…黒/緑/黒 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 10 10 128 0 1 "black" "blue" "red" "black" "black" "black" "black" "black" "green" "black" 小さい画像を拡大して効果を作る %size 3 bgrad 10 10 128 0 1 "black" "blue" "red" "black" "black" "black" "black" "black" "green" "black" 描画サイズに対して10%x10%の画像を全画面化 黒/青/赤/黒……黒/緑/黒 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 10 10 128 45 1 "black" "orange" "black" "black" "black" "black" "black" "green" "black" ちいさな画像で大きな画面(1) %size 3 bgrad 10 10 128 45 1 "black" "orange" "black" "black" "black" "black" "black" "green" "black" 描画サイズに対して10%x10%の画像を45度回転してから全画面化 黒/オレンジ/黒……黒/緑/黒 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 5 5 128 60 1 "black" "orange" "black" "black" "black" "black" "black" "green" "black" 小さな画面で大きな効果(2) %size 3 bgrad 5 5 128 60 1 "black" "orange" "black" "black" "black" "black" "black" "green" "black" 描画サイズに対して5%x5%の画像を60度回転してから全画面化 黒/オレンジ/黒……黒/緑/黒 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 25 25 128 45 1 "blue" "blue2" "black" "black" "black" "black" "blue" こんなのも…(1) %size 3 bgrad 25 25 128 45 1 "blue" "blue2" "black" "black" "black" "black" "blue" 描画サイズに対して25%x25%の画像を45度回転してから全画面化 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 12 0 128 45 0 "blue" "blue2" "black" "black" "black" "black" "blue" こんなのも…(2) %size 3 bgrad 12 0 128 45 0 "blue" "blue2" "black" "black" "black" "black" "blue" 12%x100%の画像を45度回転してから、繰り返し %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 25 25 128 -45 1 "black" "red" "black" 円形グラデーション(1) %size 4 bgrad 25 25 128 -45 1 "black" "red" "black" だれもしらない機能その1 角度が負の値だとひそかに非線形になる %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 25 25 128 -45 1 "red2" "black" "red2" 円形グラデーション(2) %size 4 bgrad 25 25 128 -45 1 "red2" "black" "red2" その逆 色のリストを前後対称に置くのがこつらしい %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 25 25 128 -45 0 "blue" "blue2" "black" "black" "black" "black" "blue" 円形グラデーション(3) %size 3 bgrad 25 25 128 -45 1 "blue" "blue2" "black" "black" "black" "black" "blue" 25%x25%の画像を45度回転して拡大してから繰り返し %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %page %bgrad 25 25 128 -45 1 "white" "blue" "black" "black" "orange" "black" "black" "orange" "black" "black" "blue" "white" おしまい