クォートゲーム、カスタム図形、およびキャンバスの形状DSLチュートリアル

65355 ワード
gamedev gui desktop ruby テキストリンク
私は2週間前に出席したクリスマスパーティーで、私はQuartoと呼ばれる古典的なボードゲームを発見した.実際には、過去の主要なゲーム会社のために働いているパーティーのホストは、私がコンピュータアプリケーションとしてそれを構築する方法を知っているかどうか私に尋ねました.私は非営利の開発者としては、ビジネスアプリケーションを構築するだけではなく、それは、2 Dゲームである場合は、それを構築することは簡単だと言って自分自身を割引した.だから、チャレンジはオン!

パーティー参加者がクリスマスの間に演奏したclassic Quarto black board versionは、ここにあります

私は、computer gameを使って、4 - 5日でGlimmer DSL for SWTとしてクォートを造りました!

こちらはGlimmer Quartoのビデオデモです
ブラウザはビデオタグをサポートしていません.
私が非常に速くそれを完了するのを手伝ったGlimmer DSL for SWTの主要な特徴は、Custom Shape support(例えばビルトイン・シリンダーとキューブ・カスタム形を構築して、モデル・クォーン・ソング・カスタム形に再利用すること)と楽なCanvas Drag and Drop(例えば、ドラッグ源として1つのカスタム形を指定して、OnNoneドロップ・リスナーによる低下目標としてのもう一つ)です.私も、標準的な格子から45度によって板を傾けるアフィンTransformsを使いました.
トップレベルのクォートコードは下に含まれ、クォートピース、シリンダ、キューブのカスタム図形のコードが続き、残りのコードへのリンクが続き、最終的にはGlimmer DSL for SWT Canvas Shape DSLのチュートリアルです.
クォート
# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

# Top-level Quarto board GUI code that visually maps to real GUI
shell(:shell_trim, (:double_buffered unless OS.mac?)) {
  text 'Glimmer Quarto'
  minimum_size BOARD_DIAMETER + AREA_MARGIN + PIECES_AREA_WIDTH + SHELL_MARGIN*2 + (OS.linux? ? 52 : (OS.windows? ? 16 : 0)), BOARD_DIAMETER + 24 + SHELL_MARGIN*2 + (OS.linux? ? 96 : (OS.windows? ? 32 : 0))
  maximum_size BOARD_DIAMETER + AREA_MARGIN + PIECES_AREA_WIDTH + SHELL_MARGIN*2 + (OS.linux? ? 52 : (OS.windows? ? 16 : 0)), BOARD_DIAMETER + 24 + SHELL_MARGIN*2 + (OS.linux? ? 96 : (OS.windows? ? 32 : 0))
  background COLOR_WOOD

  quarto_menu_bar

  @board = board(game: @game, location_x: SHELL_MARGIN, location_y: SHELL_MARGIN)

  @available_pieces_area = available_pieces_area(game: @game, location_x: SHELL_MARGIN + BOARD_DIAMETER + AREA_MARGIN, location_y: SHELL_MARGIN)
  @selected_piece_area = selected_piece_area(game: @game, location_x: SHELL_MARGIN + BOARD_DIAMETER + AREA_MARGIN, location_y: SHELL_MARGIN + AVAILABLE_PIECES_AREA_HEIGHT + AREA_MARGIN)
}
ピース
# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

require_relative 'cylinder'
require_relative 'cube'

class Quarto
  module View
    class Piece
      include Glimmer::UI::CustomShape

      SIZE_SHORT = 28
      SIZE_TALL = 48
      BASIC_SHAPE_WIDTH = 48
      BASIC_SHAPE_HEIGHT = 28
      LINE_THICKNESS = 2

      options :game, :model, :location_x, :location_y

      before_body do
        @background_color = model.light? ? COLOR_LIGHT_WOOD : COLOR_DARK_WOOD
        @size = model.short? ? SIZE_SHORT : SIZE_TALL
        @shape_location_x = 0
        @shape_location_y = model.short? ? 20 : 0
      end

      body {
        shape(location_x, location_y) {
          if model.is_a?(Model::Piece::Cylinder)
            cylinder(location_x: @shape_location_x, location_y: @shape_location_y, cylinder_height: @size, oval_width: BASIC_SHAPE_WIDTH, oval_height: BASIC_SHAPE_HEIGHT, pitted: model.pitted?, background_color: @background_color, line_thickness: LINE_THICKNESS)
          else
            cube(location_x: @shape_location_x, location_y: @shape_location_y, cube_height: @size, rectangle_width: BASIC_SHAPE_WIDTH, rectangle_height: BASIC_SHAPE_HEIGHT, pitted: model.pitted?, background_color: @background_color, line_thickness: LINE_THICKNESS)
          end
        }
      }
    end
  end
end
シリンダ
# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

class Quarto
  module View
    class Cylinder
      include Glimmer::UI::CustomShape

      DEFAULT_SIZE = 28

      options :location_x, :location_y, :oval_width, :oval_height, :cylinder_height, :pitted, :background_color, :line_thickness
      alias pitted? pitted

      before_body do
        self.location_x ||= 0
        self.location_y ||= 0
        self.oval_width ||= oval_height || cylinder_height || DEFAULT_SIZE
        self.oval_height ||= oval_width || cylinder_height || DEFAULT_SIZE
        self.cylinder_height ||= oval_width || oval_height || DEFAULT_SIZE
        self.line_thickness ||= 1
      end

      body {
        shape(location_x, location_y) {
          oval(0, cylinder_height, oval_width, oval_height) {
            background background_color

            oval { # draws with foreground :black and has max size within parent by default
              line_width line_thickness
            }
          }
          rectangle(0, oval_height / 2.0, oval_width, cylinder_height) {
            background background_color
          }
          polyline(0, oval_height / 2.0 + cylinder_height, 0, oval_height / 2.0, oval_width, oval_height / 2.0, oval_width, oval_height / 2.0 + cylinder_height) {
            line_width line_thickness
          }
          oval(0, 0, oval_width, oval_height) {
            background background_color

            oval { # draws with foreground :black and has max size within parent by default
              line_width line_thickness
            }
          }
          if pitted?
            oval(oval_width / 4.0, oval_height / 4.0, oval_width / 2.0, oval_height / 2.0) {
              background :black
            }
          end
        }
      }
    end
  end
end
キューブ
# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#quarto

class Quarto
  module View
    class Cube
      include Glimmer::UI::CustomShape

      DEFAULT_SIZE = 28

      options :location_x, :location_y, :rectangle_width, :rectangle_height, :cube_height, :pitted, :background_color, :line_thickness
      alias pitted? pitted

      before_body do
        self.location_x ||= 0
        self.location_y ||= 0
        self.rectangle_width ||= rectangle_height || cube_height || DEFAULT_SIZE
        self.rectangle_height ||= rectangle_width || cube_height || DEFAULT_SIZE
        self.cube_height ||= rectangle_width || rectangle_height || DEFAULT_SIZE
        self.line_thickness ||= 1
      end

      body {
        shape(location_x, location_y) {
          polygon(0, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height, rectangle_width, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height + rectangle_height) {
            background background_color
          }
          polygon(0, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height, rectangle_width, cube_height + rectangle_height / 2.0, rectangle_width / 2.0, cube_height + rectangle_height) {
            line_width line_thickness
          }
          rectangle(0, rectangle_height / 2.0, rectangle_width, cube_height) {
            background background_color
          }
          polyline(0, rectangle_height / 2.0 + cube_height, 0, rectangle_height / 2.0, rectangle_width, rectangle_height / 2.0, rectangle_width, rectangle_height / 2.0 + cube_height) {
            line_width line_thickness
          }
          polygon(0, rectangle_height / 2.0, rectangle_width / 2.0, 0, rectangle_width, rectangle_height / 2.0, rectangle_width / 2.0, rectangle_height) {
            background background_color
          }
          polygon(0, rectangle_height / 2.0, rectangle_width / 2.0, 0, rectangle_width, rectangle_height / 2.0, rectangle_width / 2.0, rectangle_height) {
            line_width line_thickness
          }
          line(rectangle_width / 2.0, cube_height + rectangle_height, rectangle_width / 2.0, rectangle_height) {
            line_width line_thickness
          }
          if pitted?
            oval(rectangle_width / 4.0, rectangle_height / 4.0, rectangle_width / 2.0, rectangle_height / 2.0) {
              background :black
            }
          end
        }
      }
    end
  end
end
クォートコードの残り:
ビュー
https://github.com/AndyObtiva/glimmer-dsl-swt/tree/master/samples/elaborate/quarto/view
モデル
https://github.com/AndyObtiva/glimmer-dsl-swt/tree/master/samples/elaborate/quarto/model
さて、Canvas Shape DSLチュートリアルに入りましょう.

キャンバスシェイプDSL
以下はCanvas Shape DSLにGlimmer DSL for SWTを使用した例である.lineの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    line(30, 30, 170, 170) {
      foreground :red
      line_width 3
    }
  }
}.open
rectangleの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    rectangle(30, 50, 140, 100) {
      background :yellow
    }

    rectangle(30, 50, 140, 100) {
      foreground :red
      line_width 3
    }
  }
}.open

デフォルトで60度の角度を持つ角を持つrectangleの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    rectangle(30, 50, 140, 100, round: true) {
      background :yellow
    }

    rectangle(30, 50, 140, 100, round: true) {
      foreground :red
      line_width 3
    }
  }
}.open

異なる水平および垂直角度を有する丸い角を有するrectangleの例( girb にコピー／ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    rectangle(30, 50, 140, 100, 40, 80) {
      background :yellow
    }

    rectangle(30, 50, 140, 100, 40, 80) {
      foreground :red
      line_width 3
    }
  }
}.open
ovalの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 50, 140, 100) {
      background :yellow
    }

    oval(30, 50, 140, 100) {
      foreground :red
      line_width 3
    }
  }
}.open
arcの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    arc(30, 30, 140, 140, 0, 270) {
      background :yellow
    }

    arc(30, 30, 140, 140, 0, 270) {
      foreground :red
      line_width 3
    }
  }
}.open
polylineの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 3
    }
  }
}.open
polygonの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polygon(30, 90, 80, 20, 130, 40, 170, 90, 130, 140, 80, 170, 40, 160) {
      background :yellow
    }

    polygon(30, 90, 80, 20, 130, 40, 170, 90, 130, 140, 80, 170, 40, 160) {
      foreground :red
      line_width 3
    }
  }
}.open
textの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    text(" This is \n rendered text ", 30, 50) {
      background :yellow
      foreground :red
      font height: 25, style: :italic

      rectangle { # automatically scales to match text extent
        foreground :red
        line_width 3
      }
    }
  }
}.open
imageの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 512, 542

  canvas {
    background :white

    image(File.expand_path('icons/scaffold_app.png', __dir__), 0, 5)
  }
}.open

より高い高さで予め建設されたimageの例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

@image_object = image(File.expand_path('icons/scaffold_app.png', __dir__), height: 200)

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 230

  canvas {
    background :white

    image(@image_object, 0, 5)
  }
}.open
background_pattern属性を水平方向のグラデーションに設定する例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 30, 140, 140) {
      background_pattern 0, 0, 200, 0, rgb(255, 255, 0), rgb(255, 0, 0)
    }
  }
}.open
foreground_pattern属性を垂直グラデーションに設定する例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 30, 140, 140) {
      foreground_pattern 0, 0, 0, 200, :blue, :green
      line_width 10
    }
  }
}.open
line_styleに:dashdot属性を設定する例( girb にコピー/ペーストすることができます)
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    oval(30, 50, 140, 100) {
      background :yellow
    }

    oval(30, 50, 140, 100) {
      foreground :red
      line_width 3
      line_style :dashdot
    }
  }
}.open
line_widthへの10属性、line_join(既定値)および:miter属性(line_cap(デフォルト))に:flat属性を設定する例を示します.
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 10
      line_join :miter
      line_cap :flat
    }
  }
}.open
girb line_widthに242479142、10属性にline_joinに属性を設定する例(にコピー/貼り付けてもよい).
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 10
      line_join :round
      line_cap :round
    }
  }
}.open
:round line_capに242479142、:round属性にgirbに属性を設定する例(にコピー/貼り付けてもよい).
require 'glimmer-dsl-swt'

include Glimmer

shell {
  text 'Canvas Shape DSL'
  minimum_size 200, 220

  canvas {
    background :white

    polyline(30, 50, 50, 170, 70, 120, 90, 150, 110, 30, 130, 100, 150, 50, 170, 135) {
      foreground :red
      line_width 10
      line_join :bevel
      line_cap :square
    }
  }
}.open
line_width
ハッピー!
ジャンゴレストフレームワークの クイックスタートプロジェクト を ドッカー構成ランで作って 上で動かす
IPCメカニズムのAIDLはクライアントコールバックを実現する(四)