ビスケットのきほんをマスター! 作品をつくってうごかそう
ビスケットのきほんをマスター! 作品をつくってうごかそう

ビスケットのきほんをマスター! 作品をつくってうごかそう

この記事きじでは、ビスケット(Viscuit)のきほんの使つかい方かたをわかりやすく解説かいせつ!

制作せいさく画面がめんの見方みかたや、部品ぶひんの作つくり方かた、動うごきをつける方法ほうほうまで、楽たのしく学まなべます。

まずはきほんをマスターして、自分じぶんでかいた絵えを動うごかしてみましょう。

タブレット版ばんの画面がめん画像がぞうはベータ版ばんのものを使用しようしています。 正式せいしき版ばんとは一部いちぶデザインや機能きのうが異ことなる場合ばあいがありますが、基本的きほんてきな操作そうさは同おなじです。

 

スポンサーリンク 目次
  1. おもちゃばこ
  2. 制作画面の見かた
  3. ステージの色をかえる
    1. 色のえらび方
  4. 絵をかいて部品を作る
    1. 線の色・太さ・とうめい度を選ぶ
    2. ひとつもどる
    3. 下絵を使ってお絵かきする
    4. 部品を作る
    5. 部品を直す
  5. 「めがね」で動きをつける
    1. ステージに部品を入れる
    2. 「めがね」とは?
  6. 作品をうごかしてあそぼう!
  7. 作品をほぞんして終了する
    1. パソコンの場合
  8. まとめ
  9. 【PR】開発チームが書いたビスケットの入門書

おもちゃばこ

おもちゃばこには、これまで作つくった作品さくひんがならびます。

  • あたらしい作品さくひんを作つくる → 「+」をおす
  • 作品さくひんの続つづきを作つくる   → 作つくった作品さくひんのサムネイルをおす
  • 作品さくひんを消けす      → サムネイルを「ゴミ箱ばこ」にかさねる

 

制作画面の見かた

制作せいさく画面がめんは、タブレットとパソコンで少すこしちがいます。

タブレットの制作せいさく画面がめん

 

パソコンの制作せいさく画面がめん

画面がめん

  • ステージ   … 部品ぶひんをおいて プログラムの動うごきを見みる場所ばしょ
  • 部品ぶひん置おき場ば  … お絵描えかき画面がめんで作つくった部品ぶひんが ならぶ場所ばしょ
  • めがね置おき場ば … 「めがね」を作つくって プログラミングする場所ばしょ

ボタン

  • えんぴつボタン … 絵えをかいて部品ぶひんを作つくる
  • はいけいボタン … ステージの色いろをかえる
  • かさねるボタン … 部品ぶひんのかさなり方かたを調整ちょうせいする
  • 上うえ・下したボタン  … 部品ぶひんの上下じょうげを切きりかえる
  • バツボタン   … 作品さくひんをほぞんして終了しゅうりょうする
  • はぐるまボタン … ループや動うごく速はやさなどを 設定せっていする
  • あそぶボタン  … 作品さくひんを遊あそんだり リンクを発行はっこうしたりする
  • かいてんボタン … 部品ぶひんや音符おんぷマークを回転かいてんさせる

命令めいれい

  • めがね     … 左ひだりの状態じょうたいになったら 右みぎの状態じょうたいにする
  • ゆびマーク   … さわったら
  • おんぷマーク  … 音おとをならす

 

ステージの色をかえる

「はいけいボタン」をおすと、ステージの色いろを自由じゆうにかえられます。

 

「グラデーションボタン」をおすと、色いろがだんだんかわるグラデーションが作つくれます。

ステージの上うえと下したでちがう色いろをえらびましょう。

 

色のえらび方

カラーパレットで色いろの種類しゅるい・明あかるさ・あざやかさを調整ちょうせいして、色いろをえらびます。

① まるくならんだ色いろの種類しゅるいをえらぶ

② 明あかるさ と あざやかさ をえらぶ

  • 明あかるさ(たて)  … 上うえにいくほど明あかるく(白しろに近ちかく)、下したにいくほど暗くらく(黒くろに近ちかく)なります。
  • あざやかさ(よこ)… 右みぎにいくほどあざやかになり、左ひだりにいくほど はい色しょくにちかづきます。

 

色いろには「色相しきそう」「明度めいど」「彩度さいど」の三みっつの性質せいしつがあります。色相しきそうは赤あかや青あおなど色いろの種類しゅるいのことです。明度めいどは色いろの明あかるさを表あらわし、彩度さいどは、色いろのあざやかさを表あらわします。 ビスケットでは、これら3つの性質せいしつを調整ちょうせいし、色いろを自由じゆうに作つくれます。

 

絵をかいて部品を作る

「えんぴつボタン」をおすと、お絵描えかき画面がめんがひらき 部品ぶひんを作つくれます。

線の色・太さ・とうめい度を選ぶ
  1. カラーパレットで色いろをえらぶ
  2. 線せんの太ふとさをえらぶ(左ひだりにいくほど線せんが細ほそくなる)
  3. とうめい度どをえらぶ(左ひだりにいくほど すける)

線せんの色いろが決きまったら、まるの中なかに絵えをかきましょう。

 

ひとつもどる

「もどるボタン」で、ひとつ前まえの絵えにもどれます。

「もどるボタン」を絵えが消きえるまで何度なんどもおしてから「まるボタン」をおすと、部品ぶひん置おき場ばから部品ぶひんが消きえます。

 

下絵を使ってお絵かきする

お絵描えかき画面がめんの右みぎにある部品ぶひんをおすと、その絵えが下絵したえとして表示ひょうじされます。

下絵したえに使つかわれている色いろもえらべるので、同おなじ色いろを使つかってかくことができます。

もう一回かい、右みぎにある部品ぶひんをおすと、下した絵えが消きえます。

ちょっとだけちがう絵えを作つくりたいときにべんりですよ!

 

部品を作る

絵えができたら、「まるボタン」をおしましょう。

かいた絵えが部品ぶひん置おき場ばにならびます。

 

部品を直す

部品ぶひん置おき場ばの部品ぶひんを長ながおしすると、部品ぶひんを直なおせます。

 

「めがね」で動きをつける

部品ぶひんを作つくったら、「めがね」を使つかって動うごかしてみましょう。

  1. めがねを めがね置おき場ばに出だす
  2. 部品ぶひん置おき場ばの部品ぶひんを、左右さゆうのレンズにならべる

いらなくなった部品ぶひんは、部品ぶひん置おき場ばにもどすと消きえます。

めがねを消けしたいときは、中なかの部品ぶひんをすべて消けしてから部品ぶひん置おき場ばにもどしましょう。

 

タブレットの画面がめん

 

パソコンの画面がめん

 

ステージに部品を入れる

ステージに部品ぶひんを入いれてみましょう。部品ぶひんの動うごきを確認かくにんできます。

ステージの部品ぶひんも、部品ぶひん置おき場ばにもどすと消きえます。

 

タブレットの画面がめん

 

パソコンの画面がめん

 

「めがね」とは?

めがねは「左ひだりのレンズの絵えのとおりになったら、右みぎのレンズの絵えのとおりにかわる」という命令めいれい(ルール)です。

たとえば…

  • 同おなじ部品ぶひんを左右さゆうのレンズに入いれて、右みぎの部品ぶひんを少すこしズラす → ズラした方向ほうこうに動うごく
  • 左右さゆうのレンズにちがう部品ぶひんを入いれる → 左ひだりの部品ぶひんが、右みぎの部品ぶひんにかわる
  • レンズに2つ以上いじょうの部品ぶひんを入いれる → ならべ方かたしだいで動うごきをかえられる

 

作品をうごかしてあそぼう!

「あそぶボタン」をおすと、ステージが大おおきく表示ひょうじされます。

  • 「もどるボタン」  … はじめからやり直なおす
  • 「バツボタン」   … 制作せいさく画面がめんにもどる
  • 「リンク発行はっこうボタン」… リンクを発行はっこうする

 

作品をほぞんして終了する

制作せいさく画面がめんの「バツボタン」をおすと、作品さくひんが保存ほぞんされ さいしょの画面がめんにもどります。

作品さくひんは使つかっているタブレットやパソコンに保存ほぞんされるので、つづきを作つくるときは同おなじものを使つかいましょう。

パソコンの場合

同おなじブラウザで開ひらく必要ひつようがあります。たとえば、Chromeで作つくった作品さくひんは Edgeで開あけません。

ブラウザの閲覧えつらんデータ(Cookieやサイトデータ)を削除さくじょすると、作品さくひんもすべて消きえてしまうので注意ちゅういしてください。

 

まとめ

ビスケットのきほんの使つかい方かたを紹介しょうかいしました。

まずはためしに自分じぶんでかいた絵えを動うごかしてみましょう!

 

ビスケットをもっと楽たのしみたい人ひとは、ほかの記事きじもチェック!

  1. ビスケットのきほんをマスター! 作品さくひんをつくってうごかそう
  2. ビスケットをもっと使つかいこなそう!べんりな機能きのうで作品さくひんをレベルアップ
  3. ビスケットに音おととタッチで楽たのしいしかけをプラス!
  4. ビスケットの「めがね」テクニック! もっとじょうずにうごかそう

 

【PR】開発チームが書いたビスケットの入門書

『ビスケットであそぼう: 園児えんじ・小学生しょうがくせいからはじめるプログラミング』は、園児えんじから小学生しょうがくせい、大人おとなまで「プログラミングの楽たのしさ」を体験たいけんできる知育ちいく・学習書がくしゅうしょです。

\【PR】4歳からはじめられるプログラミング!/ リンク

2017年ねんに発行はっこうされたため、解説かいせつに使つかわれているのは前まえのバージョンのビスケットです。

そのため、あたらしいビスケットでは、一部いちぶの操作そうさが変かわっていたり、実践じっせんできない内容ないようが含ふくまれる可能性かのうせいがあります。

ですが、プログラミングの考かんがえ方かたや基本的きほんてきな使つかい方かたを学まなぶのには、とても参考さんこうになる本ほんです。

興味きょうみのある人ひとは、ぜひチェックしてみてください!

📎📎📎📎📎📎📎📎📎📎