2021-06-24に更新

Rust/Pistonに再挑戦(^~^)

ぺぶーっ(^~^) Rust Piston 公開下書き

Rust/Pistonに再挑戦(^~^)

📖 前回の記事

20210124shogi2a2b1.png
「 Widget ってどうやって使うんだぜ?」

kifuwarabe-futsu.png
「 C# でいいのに……」

ohkina-hiyoko-futsu.png
「 ゲーム案件の求人は C# より Unity のスキルが重要なんで 足りないから諦めたのよ」

ramen-tabero-futsu2.png
「 競争率の少ない方へ行ったろ」

kifuwarabe-futsu.png
「 行って どうすんだぜ」

📖 Piston overview

ramen-tabero-futsu2.png
「 👆 どれが Widget か分からないんだよな」

ohkina-hiyoko-futsu.png
「 Piston じゃないのでは?」

📖 Conrod

ramen-tabero-futsu2.png
「 👆 崑崙(こんろん)?」

📖 What is Conrod?

ramen-tabero-futsu2.png
「 👆 これだな。
かなり骨が折れそうだが 技術文書を読む練習をするかだぜ」

A Brief Summary

ramen-tabero-futsu2.png
「 Builder パターンを使っているから 設定しやすいし、修正が楽だし、読みやすいですよ、という話しだな」

ramen-tabero-futsu2.png
「 ビルダーパターンは使ったことある。次」

Screenshots and Videos

GUI Widget Framework Written In Rust - Conrod Demo

ramen-tabero-futsu2.png
「 👆 動画がある。 2014年から大きな進展がないほど流行ってないんだろうけど」

Feature Overview

ramen-tabero-futsu2.png
「 Widget というトレイトがあるのか。
.scroll_kids(true) を呼び出すと 子要素がスクロールするみたいだが、なんのこっちゃ」

Placement

ramen-tabero-futsu2.png
「 中央揃えは多分 - .middle()、 右上に合わせるには多分 .top_left_of(CANVAS)
マージン付きで中段右揃えは多分 .mid_right_with_margin(20.0)、などなどがあると」

ramen-tabero-futsu2.png
「 Alignment(整列)は 多分左揃えが .align_left()、 上端揃えが .align_top_of(LABEL) などなど」

ramen-tabero-futsu2.png
「 Relative(相対座標指定)は 下へ .down(20.0)、 どこから右へ .right_from(BUTTON, 40.0)
相対的に .x_y_relative(20.0, 42.0) などなど」

ramen-tabero-futsu2.png
「 Absolute(絶対座標指定)は .x_y(6.0, 7.0)

ramen-tabero-futsu2.png
「 ドラッグしたり、ポップアップしたりするフローティング・キャンバスにするには .floating(true)

ramen-tabero-futsu2.png
「 互換性のある技術は Glutinsdl2glfwgfxgliumopengl

kifuwarabe-futsu.png
「 さっさと 1個 サンプルを作ってくれだぜ」

📖 Getting Started

ramen-tabero-futsu2.png
「 👆 環境を作る所から始めるか~」

git clone https://github.com/PistonDevelopers/conrod.git
cd conrod

ramen-tabero-futsu2.png
「 👆 git を使うのは 基本スキルだぜ。これで ソースをダウンロードするぜ」

cargo run --release --example all_winit_glium

20210623blog19.png

ramen-tabero-futsu2.png
「 👆 ワーニングいっぱいだな。Rust言語のバージョン更新をキャッチアップしてないのか。なんか でてきた」

20210623blog19a1.png

ramen-tabero-futsu2.png
「 👆 マウスのホイールで 上下スクロールできるぜ」

20210623blog19a2.png

ramen-tabero-futsu2.png
「 👆 マウスクリックして 動かして試せるな」

20210623blog20a1.png

ramen-tabero-futsu2.png
「 👆 あれっ、110個も更新来てるぜ。
git clone って最新版じゃないのかだぜ?」

ramen-tabero-futsu2.png
「 そして プル・リクエストできね」

kifuwarabe-futsu.png
「 お父んは git コマンドの練習をしろだぜ」

📖 プルリクエストのメリット

kifuwarabe-futsu.png
「 👆 読めだぜ」

exampleの一覧

cargo run --example

ramen-tabero-futsu2.png
「 👆 なんか こう書くと サンプルの一覧が出てくるらしいぜ」

error: "--example" takes one argument.
Available examples:
    all_piston_window
    all_winit_gfx
    all_winit_glium
    all_winit_glium_threaded
    all_winit_rendy
    all_winit_vulkano
    all_winit_wgpu
    canvas
    counter
    custom_widget
    file_navigator
    graph
    hello_world
    image
    image_button
    list
    list_select
    list_select_vulkano
    old_demo
    plot_path
    primitives
    range_slider
    text
    text_edit
    triangles

ramen-tabero-futsu2.png
「 👆 出た。
じゃあ 全部 見ていくか」

all_piston_window

cargo run --release --example all_piston_window

20210623blog35.png

ramen-tabero-futsu2.png
「 👆 これはサンプルで見たやつだな」

all_winit_gfx

cargo run --release --example all_winit_gfx

20210623blog35a1.png

ramen-tabero-futsu2.png
「 👆 さっきのと何が違うのか分からん」

all_winit_glium

cargo run --release --example all_winit_glium

20210623blog35a2.png

ramen-tabero-futsu2.png
「 👆 画像ライブラリを変えてみたが、同じように表示される、ということが言いたいのかも知れん」

all_winit_glium_threaded

cargo run --release --example all_winit_glium_threaded

20210623blog35a3.png

kifuwarabe-futsu.png
「 👆 あと何回 同じ画面を見せられるのか」

all_winit_rendy

cargo run --release --example all_winit_rendy --features="init-winit"

20210623blog35a4.png

ramen-tabero-futsu2.png
「 👆 エラーの量が多すぎる。スキップ」

all_winit_vulkano

cargo run --release --example all_winit_vulkano

20210623blog35a5.png

ramen-tabero-futsu2.png
「 👆 これもエラーの量が多すぎる。スキップ」

all_winit_wgpu

cargo run --release --example all_winit_wgpu

20210623blog35a6.png

ramen-tabero-futsu2.png
「 👆 GPUでも使ってんのかな? 無いけど」

canvas

cargo run --release --example canvas

20210623blog35a7.png

ramen-tabero-futsu2.png
「 👆 ボタンが動いている様子を確認でけたぜ」

counter

cargo run --release --example counter

20210623blog35a8.png

ramen-tabero-futsu2.png
「 👆 クリックすると数が増えてくぜ」

custom_widget

cargo run --release --example custom_widget

20210623blog35a9.png

ramen-tabero-futsu2.png
「 👆 なんだか知らんが、ただのボタンだと思う。 丸いぐらいで」

file_navigator

cargo run --release --example file_navigator

20210623blog35a10.png

ramen-tabero-futsu2.png
「 👆 ディレクトリーやファイル名が一覧されて、ファイルパスを取得できたぜ」

graph

cargo run --release --example graph

20210623blog35a11.png

20210623blog35a12.png

ramen-tabero-futsu2.png
「 👆 マウスで ドラッグできるけど 使い勝手は サンプルなんで そこまではないな」

warning: unused variable: `start`

ramen-tabero-futsu2.png
「 👆 こういう警告、解消していくか」

hello_world

cargo run --release --example hello_world

20210623blog35a13.png

ramen-tabero-futsu2.png
「 👆 文字出るだけ」

image

cargo run --release --example image

20210623blog35a14.png

ramen-tabero-futsu2.png
「 👆 画像出るだけ」

image_button

cargo run --release --example image_button

20210623blog35a15.png

ramen-tabero-futsu2.png
「 👆 背景色がランダムで変わる画像ボタン」

list

cargo run --release --example list

20210623blog35a16.png

ramen-tabero-futsu2.png
「 👆 トグル・ボタンが並んでいるリスト」

list_select

cargo run --release --example list_select

20210623blog35a17.png

ramen-tabero-futsu2.png
「 👆 リストボックスで、インデックスが取れる感じ」

list_select_vulkano

cargo run --release --example list_select_vulkano

20210623blog35a18.png

ramen-tabero-futsu2.png
「 👆 ボルケーノと書いてるやつは エラーばっかだな」

old_demo

cargo run --release --example old_demo

20210623blog35a19.png

ramen-tabero-futsu2.png
「 👆 旧いデモが一番面白いかも」

plot_path

cargo run --release --example plot_path

20210623blog35a20.png

ramen-tabero-futsu2.png
「 👆 波線が出るだけ」

primitives

cargo run --release --example primitives

20210623blog35a21.png

ramen-tabero-futsu2.png
「 👆 図形が出るだけ」

range_slider

cargo run --release --example range_slider

20210623blog35a22.png

ramen-tabero-futsu2.png
「 👆 スライダー・バーの練習ができるぜ」

text

cargo run --release --example text

20210623blog35a23.png

ramen-tabero-futsu2.png
「 👆 テキストの右寄せとか 中段揃えの例だろうか」

text_edit

cargo run --release --example text_edit

20210623blog35a24.png

ramen-tabero-futsu2.png
「 👆 テキストエリアだな」

triangles

cargo run --release --example triangles

20210623blog35a25.png

ramen-tabero-futsu2.png
「 👆 なんか グラデーションを見るだけ」

(^q^)

ramen-tabero-futsu2.png
「 👆 ビジュアル・エディターが無いから、プログラムを書いていく感じになるのな」

kifuwarabe-futsu.png
「 ゲーム系って そんな感じだろ」

ohkina-hiyoko-futsu.png
「 オフィス・ソフトは 実行速度気にしないからいいけど、ゲームは実行速度を気にしますからね」

何度でもクリック!→

むずでょ

光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

むずでょ の最近の記事