SmallBasicでプログラミング (1) 簡易アニメーションと発行


  こちらの記事でも紹介させていただいたように、先日 日本語UIを含んだ Small Basic がリリースされました。
  こちらのツールは大変使いやすく親切な作りになっているのですが、残念ながらまだ今日時点では「使い方のドキュメント」が翻訳されていません。申し訳ありません。
  いずれはドキュメントの方も日本語に翻訳されるようにして、皆様に活用していただけるようにしていけたらと思っておりますが、現時点では何月何日までに翻訳ができるかをお伝えできる状態にありません。
 
  そこで、日本語版ドキュメントがリリースされるまでのつなぎとして、少しでも早くこの Small Basic をなるべく多くの方に使っていただくために、このブログでそのドキュメント替わりとなるような記事を積極的に紹介していきたいと思います。
 
 
  というわけで、早速なにかやってみましょう。
  今日は、画面上に円が登場し、左上から右下にかけて移動する、という処理を行ってみたいと思います。
  なお、このブログの中ではゲームプログラミング技術の習得を目的にしようとは思っていませんが、このようなプログラムはあらゆる分野のプログラミングの基礎となるエッセンスが盛り込まれていると思いますので、積極的に取り上げていきたいと思います。


  (完成イメージ)
  
 
  
  
  
  プログラムの流れは非常に簡単です。
  まず変数 x と y を用意します。ボールのX座標とY座標として使用します。
  そしてボールのオブジェクトとして ball を用意ます。
  あとは、変数 x と y を最初は0にして、それを徐々に増やしながら、座標(x , y)の位置に ball を表示する、というループ処理を行うだけです。
  また、いつボールの移動をやめればいいのかわからないので、変数 migihashi を用意し、あらかじめプログラムが実行されたときに表示されるウインドウの右端の座標を入れておきます。そして、ボールのX座標(変数x)が徐々に大きくなって、ついに migihashi と同じ値になったところで(つまりボールが画面の右端に到達したところで)ループを終了するようにします。
 
  これを Small Basic で記述すると、以下のようになります。



  4行目の GraphicsWindow.Width とは、ウインドウの横幅を示しています。 GraphicsWindowクラスには画面描写に関係する非常にたくさんの機能や情報が入っていますが、Widthはその一つです。
  5行目の Shapes.AddEllipse は、GraphicsWindowに対して楕円オブジェクトを追加しています。もちろん、楕円以外にも様々なオブジェクトを追加したり、移動させたりズームさせたりといった機能を Shapesクラスは含んでいます
  9行目の Shapes.Move は、既に作成されたオブジェクト(ここではball)の表示を行っています。X座標とY座標を+1ずつしながら何度も何度も再表示しているので、あたかも動いているように見えます
  11行目の Program.Delay(10) は、処理を遅くするためのものです。これを入れないと、目にも止まらない速さで実行してしまうので必ず必要です。ここでは10ミリ秒遅らせています。
 
  入力が終了したら、一旦画面左上の「保存」ボタンを押してソースファイルを保存し、そして画面右上の「実行(F5)」ボタンを押すか、キーボードのF5キーを押して実行します。
  
  
  
ボールが斜め右下に向かって移動するアニメーションがみられるはずです。 
なお、プログラムが終了してもウインドウは閉じられませんので、自分でXを押して閉じます。
 
  それでは、これをインターネット上に発行してみましょう。
  この発行の簡単さが、Small Basicの特徴のひとつでもあります。
  インターネットに接続されていることを確認して、画面中上の「発行」ボタンを押します。
  しばらくすると、以下のようなダイアログが表示されます。
  
  
  
  ZGZ752 というコードはSmall BasicのWebサイト側が発行したユニークなコードであり、このプログラムがアップロードされた場所にアクセスするのに使用できます。
  このコードがわからないと、次にアクセスするときに困りますので、このダイアログを閉じる前にコピーするかメモする必要があります。
 
  また、このダイアログに表示されているURLにアクセスすれば、Web上でこのプログラムを実行することができます。(実際にはSilverlight ランタイムを使用して実行しています)
  したがって、Small Basicのインストールされていないマシンからであっても、また、私自身は試していませんが当然Macからでも、このURLにアクセスすれば Small Basicで書かれたプログラムを即実行できます。
  この配布の簡単さ(URLを教えるだけ)もまた、Small Basicらしい側面です。
 
  以下の画面は、http://smallbasic.com/program/?ZGZ752 (私がアップロードしたプログラム)にアクセスした際の実行中の様子です。
  
  


  さらに面白いことに、このWeb ページの右端の方に「Embed this in your website」と書かれたテキストボックスが見受けられると思いますが、
  
  
  ここに書かれているHTMLタグをコピーして、自分のWeb サイトなどに張れば、このプログラムが自分のWebサイト上で直接実行されます。
 



  このように、自分のプログラムをアップロードしたり、他人に公開したりするのは極めて簡単です。
  ただあまりに簡単なので、プログラムをちょっと変更するたびに何度も何度も「発行」ボタンを押してしまうこともできてしまうのですが、それは避けた方がいいと思います。なぜなら、「発行」ボタンを押すたびに新しい領域が確保されて、新しいプログラムをアップロードするのと同じ形式で発行されてしまうので、好ましくありません。
  したがって「発行」するのは、プログラムが未完成の段階で実験的に行うことはせずに、とりあえずプログラムが完成してから行うといいと思います。
 
  もしも既に発行したプログラムを修正したり拡張したりする場合には、「インポート」を使うといいと思います。
  例えば、自分が発行したプログラムのIDが ZGZ752 だとして、これを修正したい場合は、Small Basic の「インポート」ボタンをクリックし、以下のようなダイアログが表示されたら 修正したいプログラムのID (ここでは ZGZ752 )を入力してOKをクリックします。
  
  
  
  すると、このプログラムのソースコードがダウンロードされて、編集できる状態になるので、修正や拡張などを行います。
  デバッグなども終えて、完全に発行できるようになったところで、「発行」ボタンを押します。
  この方法を使っても、結局サーバー側では新しい領域が確保されて、再度アップロードされてしまうのですが、少なくともIDが今までのIDの拡張されたものになるので、管理しやすいはずです。
 



  それでは、今回は Small Basic で GraphicsWindow と Shapes を使って動きのあるプログラムを作る方法と、プログラムを発行・インポートする方法を紹介しました。
 
  次回はまた別の内容を紹介したいと思います。

Comments (0)

Skip to main content