この記事は、 Jasmine Tea アドベントカレンダー 2023 の第17日目です。
Jasmine Tea (ジャスミンティー) にデザイナーとして開発に参加しているSisioです。
プログラム経験がないほぼないデザイナーが、Jasmine Teaではじめてのプログラミング学習に挑戦しようと思います！
この記事は、「Jasmine ってなに？どんなことができるの」と思っているプログラミング初心者さんや「プログラミングを始めてみたいけど、何からはじめたら良いかわからない」という方に向けて書いていこうと思います。
早速Jasmine Teaを始めていきましょう。
Jasmine Teaについて
まずは、Jasmine Tea のことを説明させてください。
Jasmine Teaはプログラミングの楽しさを多くの人に知ってもらうために作られたプログラミング言語です。WEB上でプログラミング環境を実現していて、極端に言えばネットに接続されていればどこでも勉強ができます。
インターネットに接続されているPCまたはiPadが必要です
現在公開されている機能は全て無料で使用でき、年齢制限もなく誰でも自由に使えます。
初心者用のプログラミング学習と聞くと、ビジュアルプログラミング言語で有名な「Scratch」というものがあります。画面上にあるブロックをつなぎ合わせてプログラムを作っていきます。視覚的にわかりやすいため、プログラミングに苦手意識を持っている方でもとっつき易くプログラミング入門には良い方法です。
ただ、「Scratch」のようなビジュアルプログラミングは、実際にプロが使っているようなテキストプログラミングとは、見た目から大きく違っており、本格的なプログラミングに進む際スムーズな移行は難しいというデメリットがあります。
テキストプログラミング言語とは互換性がなく、一般的なプログラミング言語の勉強は、一から学習する必要があります。また、大人にとっての最初のプログラミング学習としては、ビジュアルプログラムは難易度が低すぎるかもしれません。
Jasmine Teaはプログラミング初心者の学習用に開発されたテキストプログラミング言語
冒頭に記載したように、Jasmine Teaはプログラミング初心者の学習用に開発されたテキストプログラミング言語です。インターネットが繋がるパソコンがあればいつでもプログラミングがはじめられます！
一般的に社会でよく使用されているプログラミング言語から学ぶのは理想的ではありますが、学習を始める前の環境構築、事前準備が大変で始める前に挫折してしまったり、1文字でも間違えればエラーが発生するため、エラーの原因を見つけられずに学習が止まってしまうことも多いです。また標準の状態では、楽しめるような要素がないため、アニメーションやゲームなどで、楽しみながら学ぶのは難しいでしょう。
Jasmine Teaは既存言語の課題を解決し、プログラミング初心者が、テキストプログラミング言語で、楽しみながら基礎からしっかりと学べるように設計されています。スプライト機能を用い、アニメーションやゲーム制作を通じての学習も可能です。
デバッグ（エラーやバグを見つけて修正するプロセス）などのスキル習得も可能です。
Jasmine Teaで基礎的なプログラミングを学んだ後には、本格的なプログラミングへの移行を想定しているため他言語への移行ガイド も用意されています。
Jasmine Teaでまずは何をする？
Jasmine Teaの学習の進め方は自由で、決まりはありません。
あなたが楽しそうだと思ったところから始めてみてください！
今回、私は下記のような画面をJasmine Teaで作ってみます。
実際にJasmine Teaを触ってみよう
Jasmine Tea のサイトにアクセスして「ためしてみる」をクリックしてください。
クリックするとスタジオ画面が開きます！
今回は「ゲーム制作」の「【準備体操】キャラクターを動かせるようになろう」を参考にしながら、簡単なプログラミングを書いてみます。
やることの全体像
雪原でたくさんのキャラが配置されている絵をJasmine Teaで作る
- オリジナルの背景を作って、背景をスタジオで表示する
- 表示した背景にスプライトで作ったキャラクターをたくさん表示する
たったこれだけですが、人によって全然ちがう絵ができるとおもいます。
個性的なイラストをつくってみてください！
背景を作って配置する
エディターの背景ボタンをクリックしてください。
次にプラスボタンをおして０番の背景を追加します。
最初から何かが入っている人はそのまま0番を使用してください。
※①参照
背景をいじっていくためには、②をいじっていく必要があります。
なにもないところから作っても良いのですが、テンプレートも用意されているので自由に好きな背景を作ってみてください。
私はテンプレートで雪山を選択し、いじっていくことにしました。
背景色をミントグリーンに変更し、他のオブジェクトを消しゴムで消したり、パーツを配置したりして自分のオリジナル背景をつくりました。
Jasmine Teaはデフォルトで背景やイラストが用意されているので、簡単にかわいいイメージを作ることができます。
では、作った背景をさっそく表示してみましょう。
エディターに「background 命令」を書き、実行を押してください。
background 0
これでオリジナルの背景が表示されたと思います。
オリジナルの画像が表示がされない場合は、自分の設定した数字やエディターの文字が間違っていないか確認してくださいね。
背景にキャラクターをたくさん表示する
次にキャラクターを用意します。
エディターのスプライトボタンをクリックしてください。
ここでは表示したいキャラクター分、スプライトを用意します。
難しいことは考えずに右から左へドラッグしていきます。
私はスプライト10までしっかりキャラクターで埋めてみました。
まずはキャラクターを一体だけ表示させてみましょう。
エディターに「show 命令」を書いていきます。
先ほど書いた「background 命令」の下に、下記のプログラミングをかいてみてください。
show 0,(300,150)
この時、「background 命令」を消してしまうと、背景が消えてしまうのでご注意ください！
「show 命令」を追加して実行を押すと、オリジナルの背景の上にキャラクターが表示されたでしょうか。
今のままだとキャラクターの位置が微妙ですよね？
数値をいじって適切な位置にキャラクターを移動しましょう。
この時に便利なのは実行画面の下にみえるめもりです。
めもりからグラフィックスを表示させると、キャラクターを移動したい場所が分かりやすくなりますので使ってみてくださいね。
では表示されているキャラクターを移動させましょう。
show 0,(260,260)
先ほどの数値をいじってみました。
スプライト0に設定しているキャラクターをX軸（横）260、Y軸（縦）260に設定して実行すると、先ほどは空中にいたキャラクターが床に設定している部分に表示されました。
表示させたいスプライト分（キャラクター）、これらを繰り返しましょう。
めもりを消すと、キャラクターがたくさん並んだ絵ができています！
ここからアニメーションをつけたり、もっと色々なプログラミングをすることもできます。
今回は簡単に背景作りとキャラクターの配置をして、絵を作ってみました。
超入門編ではありますがいかがでしたでしょう？
Jasmine Teaではこのように簡単にプログラムで絵を描くことができます。
皆さんも自分オリジナルの絵をつくってみてください。
