人気コミック『PEANUTS』デザインの“大人カワイ …...2020/06/22 · 人気コミック『PEANUTS』デザインの“大人カワイイ”メガネ 全24アイテム
ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは...
Transcript of ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは...
![Page 1: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/1.jpg)
ビスケットの使い方
旭川高専システム制御情報工学科
大髙 純直
![Page 2: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/2.jpg)
ビスケットとは
ビスケットはプログラミング言語の一種であり、メガネという仕組みひとつだけで単純なプログラムから複雑なプログラムまで作ることができる。 仕組みは単純だが組み合わせ方が様々なので複雑なことができる。
開発者である合同会社デジタルポケットの代表の原田康徳氏は旭川高専電気工学科卒業生であり、ビスケットはPCのブラウザ上で動作するが、スマホ・タブレットでもViscuitをインストールすることで使用することができる。
https://www.viscuit.com/
![Page 3: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/3.jpg)
作品の作り方(みんなでつくる)
ビスケットの初めの画面で「みんなでつくる」を選ぶ
基本となるステージ背景が現れるので、好きな色を選ぶ
鉛筆ボタンを押すと作品を作成することができる
![Page 4: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/4.jpg)
メガネ命令する
作品の作り方(みんなでつくる)
ステージメガネおきば
えんぴつボタン 絵を描く
送るボタンビスケットランドに送る
回転ボタン部品を回転できる
描いた絵にメガネを使って命令することで、いろいろな動きをさせることができる。
ビスケットランドに作品を送って他者が作った作品を見ることができる。
![Page 5: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/5.jpg)
作品の作り方(みんなでつくる)
カラーパレット
太さ
薄さ
絵を消す
完成
お絵かき画面
![Page 6: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/6.jpg)
作品の作り方(みんなでつくる)
ステージに描いた絵を置く
メガネおきばにメガネを置き、左側に動かしたい絵を置く。
右には同じ絵をずらして置くことで、ずらした方向に絵が動く。
![Page 7: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/7.jpg)
作品の作り方(みんなでつくる)
メガネおきば
作品ができたらビスケットランドに送って、ほかの人の作品と一緒に見ることができる。
![Page 8: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/8.jpg)
作品の作り方(ひとりでつくる)
ビスケットの初めの画面で「ひとりでつくる」を選ぶ
基本となるステージ背景が現れるので、好きな色を選ぶ
鉛筆ボタンを押すと作品を作成することができる
![Page 9: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/9.jpg)
作品の作り方(ひとりでつくる)
基本は「みんなでつくる」と同じだが、こちらの方がより複雑な命令ができる
音符マーク音の命令
指マーク「さわると」の命令
設定ボタン
あそぶボタン
![Page 10: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/10.jpg)
作品の作り方(ひとりでつくる)
設定ボタンを押すと設定画面に切り替わる。丸ボタンで決定することができる。
背景の色左で画面上部、右で画面下部の色を変えられる
方眼紙設定
速度設定
ループ設定上:横方向がループする下:縦方向がループする
![Page 11: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/11.jpg)
作品の作り方(ひとりでつくる)
メガネの右側に複数の絵を入れたり、複雑な命令をしていろいろな動きをさせることができる。「みんなであそぶ」より難しいが、命令をたくさん組み合わせて、思った通りの動きをさせるといい。
![Page 12: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/12.jpg)
作品の作り方(ひとりでつくる)
あそぶボタンを押すとあそぶ画面に切り替わり、作品を遊ぶことができる。指マークの命令はこの画面でしか操作できない。
![Page 13: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/13.jpg)
作品の作り方(ひとりでつくる)
投稿された作品がフォルダ形式でまとめられて表示される
作品が完成したらアップロードボタンを押して作品を保存する。
完成した作品をあそぶには最初の画面のこのボタンを押す
![Page 14: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/14.jpg)
作品の作り方(ひとりでつくる)
フォルダをクリックすると、その中にある作品が表示される。この作品を編集したり遊んだりできる
![Page 15: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/15.jpg)
作品の作り方(ひとりでつくる)
えんぴつボタンを押すと作品が読み込まれ、編集できる
指ボタンを押すと作品が遊べる
編集後に作品を保存すると、上書きでなく別の作品として保存される
これによって保存されるフォルダが変わることもあるので、フォルダ番号は忘れないようにメモしておくと良い
![Page 16: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/16.jpg)
ビスケットの使用例
応用例として作成した作品サンプルの解説をする。実際に作品を見てみるとわかりやすい。
以下が作品番号
16720 2020/07/01
16738 2020/07/03
16741 2020/07/03
16781 2020/07/06
16720 2020/07/01
16738 2020/07/03
16741 2020/07/03
16781 2020/07/06
![Page 17: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/17.jpg)
ビスケットの使用例
16720 2020/07/01
この作品は3×3のマス目の中に、黄色、水色、青色のいずれかの玉がランダムに出現し、青色の玉をクリックすると左の黒枠の中に星が保存される。上中下の各段で青色の玉をクリックし、星を縦1列そろえることでゲームクリアとなる。
![Page 18: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/18.jpg)
ビスケットの使用例
マス内に玉を出現させ、その後消すようにする命令。3色分作ることでランダムに出現するようになる。
青色の玉をクリックすると星に変わり、左に移動する命令。一番下の命令は黒枠に星が重なると停止させる命令。 星が3つ黒枠に重なると、マス目
に「good」の文字を表示させる命令。
![Page 19: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/19.jpg)
ビスケットの使用例
16738 2020/07/03
この作品は16720 2020/07/03の改訂版で、問題点をいくつか解決したものである。
16720 2020/07/03の問題点
同じ列で2回以上青玉をクリックしてしまうと2回目以降の星が枠外でループしてしまう。また、クリア後にマス内に残った玉が消えず、画面ではわかりにくいが、「good!」の文字も無限に生成されている。
![Page 20: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/20.jpg)
ビスケットの使用例
「good」を表示する際にマスの色も変える命令に変更。枠の色が変わっているため、クリア後に新しく玉が出現することがなくなった。
すでに黒枠内に星がストックされているときに、接近した星を消す命令。星がループされるのことを防ぐ。
「good」と玉が重なると玉が消える命令。クリア後に枠内に玉が残ることを防ぐ。
![Page 21: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/21.jpg)
ビスケットの使用例
16741 2020/07/03
飛行機を操るシューティングゲームである。飛行機の上下前後をクリックするとその方向に移動し、飛行機をクリックすると光線が飛ぶ仕組みになっている。画面上にいる2体の敵を撃破すると最後の敵が出てくるので、その敵を撃破するとクリアとなる。ただし未完成作品であるので不具合もあり、解説は改訂版の16781 2020/07/06で行う。
![Page 22: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/22.jpg)
ビスケットの使用例
16781 2020/07/06
16741 2020/07/03の完全版。不具合を修正し、ステージを一つ追加した。
命令の数が多く複雑なので大まかに解説する。細かい部分は実際に作品を見てもらいたい。
![Page 23: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/23.jpg)
ビスケットの使用例
敵が光線を出した後、待機モーションに移行する命令。
飛行機の前をクリックすると前に進む命令。上下前後の分4つある。
光線が移動する命令
小さくて見えないが、矢印部分に点を置いて移動の限界を指定している。点に接したら逆方向に移動することで、移動を制限している。
![Page 24: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/24.jpg)
ビスケットの使用例
敵に光線が当たったときフラグ管理用にアイテムを出しながら爆発する命令。この敵には2つのアニメーションがあるので、どちらに光線が当たっても撃破できるように2つ分作っておく。
フラグ管理用のアイテムが上昇していき、黒枠内に入ると別のアイテムに変化する。変化後のアイテムは右に移動し、黄枠に入る。
フラグ管理用のアイテムを作ることで複雑な動きを作ることができる。
![Page 25: ビスケットの使い方asahikawa-nct.ac.jp/ts/wp-content/uploads/2020/09/How-to...ビスケットとは ビスケットはプログラミング言語の一種であり、メガネという仕](https://reader036.fdocument.pub/reader036/viewer/2022071405/60fa390b5db1fa299074a644/html5/thumbnails/25.jpg)
ビスケットの使用例
以上の作品はすべて、ループなし、マス目設定で作っている。マス目の設定を変えると、同じような命令でも少し違う動きをするので、いろいろ試してみると良い。