Tutorial A - spoolkitamura/nyle-doc-jp GitHub Wiki
チュートリアル
基本的なコーディング
Nyleを使った基本的なコーディングスタイルについて、具体的な例を挙げながら説明します。
(1)白紙の画面
まずは、何も描かれていない真っ白な画面を作ってみます。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
end
end
Screen.new.show_all
Nyle.main
少し長く感じるかもしれませんが、これが Nyleのプログラムの雛形になるコードです。
Nyle::Screenクラスから派生させた Screenクラスを定義して、
そのインスタンを生成してから Nyleのメインループを実行します。
(2)円の描画
つぎに、この画面の中央に円を描いてみます。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
end
def draw # 追加
Nyle.draw_circle(320, 240, 50) # 追加
end # 追加
end
Screen.new.show_all
Nyle.main
Screenクラスにdrawというメソッドを追加して、
そこに Nyleのメソッドを使って図形などを描画します。
(3)顔の描画
円が１つだけではさびしいので、円を組み合わせて顔を描いてみます。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
end
def draw
Nyle.draw_circle(320, 240, 50)
Nyle.draw_circle(320 - 20, 240 - 10, 8, {fill: true}) # 追加
Nyle.draw_circle(320 + 20, 240 - 10, 8, {fill: true}) # 追加
Nyle.draw_circle(320 - 18, 240 - 10, 2, {fill: true, color: :WHITE}) # 追加
Nyle.draw_circle(320 + 18, 240 - 10, 2, {fill: true, color: :WHITE}) # 追加
Nyle.draw_circle(320, 240 + 25, 5) # 追加
end
end
Screen.new.show_all
Nyle.main
円を描くメソッドの引数やオプションを調整して、大小さまざまな円を描くことができます。
(4)顔の描画(続)
顔に少し色をつけてみましょう。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
end
def draw
Nyle.draw_circle(320, 240, 50)
Nyle.draw_circle(320, 240, 50, {fill: true, color: :PEACH_YELLOW}) # 追加
Nyle.draw_circle(320 - 20, 240 - 10, 8, {fill: true})
Nyle.draw_circle(320 + 20, 240 - 10, 8, {fill: true})
Nyle.draw_circle(320 - 18, 240 - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(320 + 18, 240 - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(320, 240 + 25, 5)
end
end
Screen.new.show_all
Nyle.main
色の指定は、あらかじめ定義されている代表的な色の名前か、
RGBの各要素の値を直接書いて指定することができます。
色の一覧については、Appendix3を参照してください。
(5)顔の移動(下準備)
同じ位置に表示されているだけではつまらないので、
カーソルキーで上下左右に動くようにしてみます。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
@x = 320 # 追加
@y = 240 # 追加
end
def draw
Nyle.draw_circle(@x, @y, 50) # 変更
Nyle.draw_circle(@x, @y, 50, {fill: true, color: :PEACH_YELLOW}) # 変更
Nyle.draw_circle(@x - 20, @y - 10, 8, {fill: true}) # 変更
Nyle.draw_circle(@x + 20, @y - 10, 8, {fill: true}) # 変更
Nyle.draw_circle(@x - 18, @y - 10, 2, {fill: true, color: :WHITE}) # 変更
Nyle.draw_circle(@x + 18, @y - 10, 2, {fill: true, color: :WHITE}) # 変更
Nyle.draw_circle(@x, @y + 25, 5) # 変更
end
end
Screen.new.show_all
Nyle.main
これを実行しても、先ほどの(4)のプログラムと同じで止まったままですが、
つぎのステップで動かしやすいように座標の値を変数に置き換えてあります。
(6)顔の移動
つぎに、カールキーの押下と連動して実際に顔が移動するようにしてみましょう。
Screenクラスに新たに updateメソッドを追加して、そこで座標の値を変化させます。
drawメソッドにすべてひとまとめに書いても問題ありませんが、
「描画」と「値の更新」は別々のメソッドにしておいた方がわかりやすく
拡張しやすいプログラムになると思います。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
@x = 320
@y = 240
end
def draw
Nyle.draw_circle(@x, @y, 50)
Nyle.draw_circle(@x, @y, 50, {fill: true, color: :PEACH_YELLOW})
Nyle.draw_circle(@x - 20, @y - 10, 8, {fill: true})
Nyle.draw_circle(@x + 20, @y - 10, 8, {fill: true})
Nyle.draw_circle(@x - 18, @y - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(@x + 18, @y - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(@x, @y + 25, 5)
end
def update # 追加
@x += Nyle.cursor_x # 追加
@y += Nyle.cursor_y # 追加
end # 追加
end
Screen.new.show_all
Nyle.main
これで、カーソルキーを押すと上下左右に顔が移動するようになります。
(7)顔の移動(高速)
移動スピードが遅いかもしないので、[shift]キーを押しながらカーソルキーを押すと
５倍のスピードで移動するようにしてみます。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
@x = 320
@y = 240
end
def draw
Nyle.draw_circle(@x, @y, 50)
Nyle.draw_circle(@x, @y, 50, {fill: true, color: :PEACH_YELLOW})
Nyle.draw_circle(@x - 20, @y - 10, 8, {fill: true})
Nyle.draw_circle(@x + 20, @y - 10, 8, {fill: true})
Nyle.draw_circle(@x - 18, @y - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(@x + 18, @y - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(@x, @y + 25, 5)
end
def update
if Nyle.mask_shift? # 追加
@x += Nyle.cursor_x * 5 # 追加
@y += Nyle.cursor_y * 5 # 追加
else # 追加
@x += Nyle.cursor_x
@y += Nyle.cursor_y
end # 追加
end
end
Screen.new.show_all
Nyle.main
(8)顔の移動(循環)
いまのままでは画面の端まで移動すると顔が見えなくなってしまうので、
反対側の端から出てくるようにしてみます。
require 'nyle'
class Screen < Nyle::Screen
def initialize
super
@x = 320
@y = 240
end
def draw
Nyle.draw_circle(@x, @y, 50)
Nyle.draw_circle(@x, @y, 50, {fill: true, color: :PEACH_YELLOW})
Nyle.draw_circle(@x - 20, @y - 10, 8, {fill: true})
Nyle.draw_circle(@x + 20, @y - 10, 8, {fill: true})
Nyle.draw_circle(@x - 18, @y - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(@x + 18, @y - 10, 2, {fill: true, color: :WHITE})
Nyle.draw_circle(@x, @y + 25, 5)
end
def update
if Nyle.mask_shift?
@x += Nyle.cursor_x * 5
@y += Nyle.cursor_y * 5
else
@x += Nyle.cursor_x
@y += Nyle.cursor_y
end
@x = Nyle.screen_width + 50 if @x < 0 - 50 # 追加
@x = 0 - 50 if @x > Nyle.screen_width + 50 # 追加
@y = Nyle.screen_height + 50 if @y < 0 - 50 # 追加
@y = 0 - 50 if @y > Nyle.screen_height + 50 # 追加
end
end
Screen.new.show_all
Nyle.main
顔の大きさ(円の半径)が 50ピクセルあるので、それを考慮しているところがポイントです。
まずは Nyleでのごく簡単なコーディング方法について記載しました。
提供されるメソッドなどの詳細はAPI一覧および
リンク先の各メソッドの説明を参照してください。
また、ヒント集(Tips)やサンプルプログラム紹介なども参考にしてください。