スクラッチでマリオのゲームを作る特大レッスン#01 横スクロールを制覇せよ

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

マリオのゲームっぽい横よこスクロールの仕掛しかけを作つくる 今回こんかいはマリオのゲームみたいに、プレイヤーに合あわせてシーンを横よこスクロールさせていく予定よていです。 そのため、たんにプレイヤーを横よこに歩あるかせたりX座標ざひょうを変化へんかさせるだけではシーンをずらすことが出来できません。 横よこスクロールを実現じつげんする方法ほうほうはいくつもあります。今回こんかいの方法ほうほうはその1つです。他ほかにも方法ほうほうを見みつけたら、それもまた1つの正解せいかいです。あくまで一いち例れいとして参考さんこうにしてください。 スクラッチプロジェクトの新規しんき作成さくせいする プロジェクトを新規しんき作成さくせいしてください。名前なまえはマリオプロジェクトにしておきます。 とりあえずスクラッチキャットはそのまま使つかうことにしましょう。スプライトの名前なまえはプレイヤーとしておきます。 スプライトの追加ついか ステージのスプライトを追加ついかします。 コスチュームは適当てきとうな大おおきさの長ちょう方形ほうけいで構かまいません。あとで横よこスクロールしていることが分わかりやすいように、できるだけ派手はでな色いろにしておきましょう。縦線たてせんや数字すうじなどを横よこ方向ほうこうに書かいておいても分わかりやすいでしょう。 変数へんすう「★カメラのX座標ざひょうを作つくる」 そして「すべてのスプライト用よう」の変数へんすう「★カメラのX座標ざひょう」を作つくります。 今回こんかいは、「すべてのスプライト用よう」の変数へんすうには接頭せっとう語ごとして★をつけます。 変数へんすうを初期しょき化かする ★カメラのX座標ざひょうは旗はたを押おすと０に初期しょき化かされるようにしておきます。ステージのスプライトにブロックを追加ついかすればOKです。 横よこスクロールの基本きほん的てきな動うごきを作つくる プレイヤーにブロックを追加ついかして、右みぎを押おしたら★カメラのX座標ざひょうを−10するようにします。 プレイヤーのスプライト ステージのスプライトを変数へんすう「★カメラのX座標ざひょう」に合あわせて動うごかす そして、ステージのスプライトでは旗はたを押おしたら「ずっと」ループを回まわして、そこでX座標ざひょうに★カメラのX座標ざひょうを割り当わ　あてます。 ステージのスプライト これが基本きほん的てきな動うごきです。 あとはこれを応用おうようしていきます。 ゆっくり理解りかいを深ふかめたい方かたはこのまま読み進よ　すすめてください。 結果けっかだけ知しりたい方かたは少すこし飛とばして「ステージのクローンを作つくる」から読よんでください。 ステージ2のスプライトを追加ついかする 横よこスクロールをより深ふかく理解りかいするために、１つスプライトを追加ついかします。ステージのスプライトを右みぎクリックして複製ふくせいします。 ループ内ないのブロックを少すこし変かえます。X座標ざひょうに★カメラのX座標ざひょうにシーンの横幅よこはばをプラスします。 ※「0 - ★カメラのX座標ざひょう + 540」になっていますが、「★カメラのX座標ざひょう + 540」でOKです こうしてからまた右みぎを押おしてみてください。横よこスクロールが実現じつげんできましたか？ もし思おもったとおりに動うごかなかったら、★カメラのX座標ざひょうが0に初期しょき化かされているか確認かくにんしましょう。 この方法ほうほうでどんどんシーンのスプライトを追加ついかして、追加ついかした分ぶんだけX座標ざひょうに★カメラのX座標ざひょう＋シーンの横幅よこはば*○していきます。○をどんどん増ふやせば、横よこにシーンが伸のびていきます。 しかし、これだとあまりにもスプライトの数かずが増ふえてしまって、管理かんりしづらいですね。 管理かんりしづらいこと自体じたいは悪わるいことではありません。しかし、管理かんりしづらいと「これを作つくりたい！」という何なんかを実現じつげんするまでに必要ひつよう以上いじょうに時間じかんがかかります。時間じかんがかかると、「作つくりたい！」という熱ねつが冷さめてしまうことがあります。だから管理かんりしやすいコーディングを心こころがけることは、クリエイティブな力ちからを伸のばす際さいに重要じゅうようです。一番いちばん重要じゅうよう、ではないですが、管理かんりしやすいに越こしたことはありません。 クローンを使つかう作戦さくせんに切り替き　かえるので、いったんステージ2のスプライトは消けしておきましょう。 ステージのクローンを作成さくせいする ステージのスプライトに、ブロックを追加ついかしていく前まえにコスチュームを追加ついかします。 その後あとにクローンを作つくってステージを管理かんりしていきます。 コスチュームを追加ついかする コスチュームを2つ複製ふくせいしてください。コスチュームの名前なまえはシーン1とシーン2とシーン3にしておきます。 クローンの処理しょりを用意よういする 「クローンされたとき」ブロックを追加ついかして、そこに「旗はたが押おされたとき」についていた「ずっと」ブロックを移動いどうします。 ※「0 - ★カメラのX座標ざひょう」になっていますが、「★カメラのX座標ざひょう」でOKです 自分じぶん自身じしんのクローンを作つくる 旗はたを押おされたときに自分じぶん自身じしんのクローンを作つくるように書かきます。 シーンの横幅よこはばも加算かさんする クローンされたときの処理しょりで、X座標ざひょうに★カメラのX座標ざひょうだけではなく、シーンの横幅よこはばもプラスします。 ※「0 - ★カメラのX座標ざひょう + 540」になっていますが、「★カメラのX座標ざひょう + 540」でOKです シーンの数かずが増ふえれば増ふえるほど横よこにずらす シーン1とシーン2を同おなじX座標ざひょうにしても意味いみがないので、1シーンずつズラしたいと思おもいます。ズラす値あたいはシーンの横幅よこはばの分ぶんだけズラしたいです。 シーンの横幅よこはばが仮かりに540だとしましょう。（540じゃなくてもOK） 1シーン目めはズラす必要ひつようないですよね。なので★カメラのX座標ざひょうに何なんもプラス必要ひつようはないので「★カメラのX座標ざひょう+540*0」をX座標ざひょうに入いれます。ゼロを掛かけているので、実際じっさいは「★カメラのX座標ざひょう + 0」ですね。これで1シーン目めはズレなくなります。 シーン2であれば、「★カメラのX座標ざひょう+540*1」をX座標ざひょうに入いれます。540座標ざひょうだけシーン1よりも右側みぎがわ（プラス側がわ）にずれているので、横よこスクロールしたときに2番ばん目めに現あらわれるシーンとなります。シーン3であれば「★カメラのX座標ざひょう+540*2」として更さらに右側みぎがわにずらしておきます。 これが今回こんかいの横よこスクロールを実現じつげんする仕掛しかけです。1シーンずつズラして配置はいちすることで、まるで横よこスクロールしているかのような錯覚さっかくを起おこすのです。 変数へんすう「シーンの順番じゅんばん」を作つくる シーンの順番じゅんばんごとに1ずつ掛かける数字すうじを増ふやしたいので、「シーンの順番じゅんばん」を作つくります。 初期しょき化かする また、シーンの順番じゅんばんは「旗はたがおされたとき」にゼロになるように初期しょき化かしておきましょう。これを忘わすれると旗はたを押おす度たびにシーンがずれてしまいます。 変数へんすう「シーンの順番じゅんばん」を1ずつ変かえる 　クローンを作つくる度たびに変数へんすう「シーンの順番じゅんばん」を1ずつ変かえていきます。 こうすることで、各かくクローンが持もつ変数へんすう「シーンの順番じゅんばん」の値あたいは1ずつ違ちがっていくことになります。 シーン1の変数へんすう「シーンの順番じゅんばん」はゼロです。 シーン2の変数へんすう「シーンの順番じゅんばん」は1です。 コスチュームを変更へんこうする さらにコスチュームもクローンごとに変かえます。 理解りかいのために繰り返く　かえし書かいてみる いかにも冗長じょうちょうですが、理解りかいのためにこの調子ちょうしで次つぎのクローンの部分ぶぶんも書かくと下図かずのようになります。 コスチュームの数かずだけこのように繰り返く　かえし書かけばOKですが、もっとスマートにします。 ループを作つくる 「旗はたがおされたとき」ブロックに新あたらしく「○回かい繰り返く　かえす」ブロックを追加ついかして、○には3を指定していしてください。これはコスチューム（シーン）の数かずです。 そして中なかに「自分じぶん自身じしんのクローンを作つくる」ブロックを置おきます。 これでクローン（分身ぶんしん）が3つできることになります。 コスチュームを変かえる ループの最後さいごで、「次つぎのコスチュームにする」ブロックを置おいておきましょう。こうすることでシーン1の次つぎはシーン2の、シーン2の次つぎはシーン3のコスチュームが割り当わ　あてられます。 このとき、コスチュームの順番じゅんばんが自分じぶんが意図いとしたとおりに並ならんでいることを確認かくにんしましょう。（つまりコスチュームのページで、シーン1の下したにシーン2があるか、シーン2の下したにシーン3があるか確認かくにんする） コスチュームを初期しょき化かする すでにコードが書かいてありますが、毎回まいかい必かならず「シーン1」から始はじまってほしいので、3回かい繰り返く　かえすブロックの前まえに「コスチュームをシーン1にする」ブロックを追加ついかしてあるか、確認かくにんしておいてください。 プログラムの動作どうさ確認かくにんをする ここまでうまくいったか、右みぎキーを押おして確たしかめてみましょう。この段階だんかいで動うごきがおかしいなら、どこがおかしかったかチェックしてください。 おもに「変数へんすうの初期しょき化かを行おこなっているか」「X座標ざひょうに入いれる式しきは正ただしいか」「ステージスプライトのコスチュームの順番じゅんばんは正ただしいか」などを確認かくにんしましょう。 本体ほんたいを隠かくし、クローンのみを表示ひょうじする パッと見みだと上手うまくいっているように見みえますが、マウスを使つかってシーンを少すこしずらしてみてください。3つしかクローンしてないはずが、4つのシーンがあるはずです。 この余分よぶんな1シーンの正体しょうたいはもともとのスプライト本体ほんたいです。 ここでは本体ほんたいは使つかいませんので、「旗はたがおされたとき」の最初さいしょに「隠かくす」ブロックを配置はいちしておきましょう。 また、念ねんの為ため「y座標ざひょうを○にする」ブロックも配置はいちして、シーンをマウスでずらしてしまっても旗はたを押おせば戻もどるようにしておきましょう。 クローンされたときに「表示ひょうじする」ブロックも追加ついかしておけばOKです。 奥おくの順番じゅんばんを変かえる スクラッチでは横よこ（X）と縦たて（Y）以外いがいにも奥おくという概念がいねんがあります。これは「重かさなっている順番じゅんばん」のことです。デフォルトではシーン1はシーン2の下したにあるので、次つぎのシーンが画面がめん右端みぎはしにチラッと見みえていて少すこしかっこ悪わるいですね。 これを改善かいぜんするには、重かさなる順番じゅんばんを変かえればOKです。 クローンされたときに「最さい背面はいめんへ移動いどうする」ブロックを置おいておきましょう。これでシーン1の次つぎにクローンされるシーン2が下したに重かさなります。シーン3はさらに下したに重かさなります。 ここまでできましたか？ すばらしい！まだまだ実装じっそうすることはありますが、これが横よこスクロールの基本きほん的てきな仕掛しかけです。あとはプレイヤーに歩あるくアニメーションを付つけたりジャンプさせたりすれば、ますますプロっぽい動うごきになりますよ。今いまからシェアするのが楽たのしみですね。 ゲームをより面白おもしろくするプレイヤー動作どうさを作り込つく　こむ プレイヤーのアニメーションなどは「まぁなくても動うごく、うん」というプラスアルファなものですが、なめらかに動うごくとそれだけで「おお！完成かんせい度ど高たかい！」と感動かんどうしてもらえる点てんでもあります。 一方いっぽう、こだわればこだわるだけ泥沼どろぬまのようなチューニング作業さぎょうに陥おちいる罠わなもあります。ある一定いっていのクオリティまで作り込つく　こんだら「とりあえずOK」と納得なっとくして、もっとクリエイティブな機能きのうの実現じつげんに時間じかんを使つかうのが、私わたくしのオススメです。 とはいえ今回こんかいは練習れんしゅうなので、一般いっぱん的てきな「とりあえずOK」よりも少すこしだけ高こう水準すいじゅんのアニメーション作つくりを目指めざします。 まずはさきほど「やっつけ仕事しごと」で作つくっておいた右みぎキーを押おしたら変数へんすうを加算かさんする処理しょりを改善かいぜんします。 変数へんすう「スピードX」を作つくる スピードXという変数へんすうを作つくります。これは「このスプライトのみ」の変数へんすうです。 この変数へんすうは後のちほど使つかい方かたを変かえます。理解りかいのために少すこし遠回とおまわりします。 変数へんすう「スピードX」を初期しょき化かする 旗はたがおされたときに10で初期しょき化かします。もともとは-10を入力にゅうりょくしていましたが、「スピードが-10」というのは直感ちょっかん的てきにわかりにくいので、ここはプラスの値あたいを入いれておきます。 右みぎキーの処理しょりを変更へんこうする ★カメラのX座標ざひょうを直接ちょくせつ-10ずつ変かえるのではなく、-10をスピードXで置き換お　かえます。そのままではプラスになってしまうので、「0 - スピードX」という演算えんざんブロックを使つかいます。 左ひだりキーの処理しょりも書かいておく 左ひだりも合あわせて作つくっておきましょう。 向むきを変かえる 動うごかしてください。動うごきましたか？ しかし、左ひだりキーを押おすと後うしろに下さがるようで不ふ自然しぜんですね。 キーに合あわせて向むきを変かえましょう。 回転かいてん方向ほうこうを限定げんていする これで動うごかしてみると、左ひだりキーを押おしたらひっくり返かえってしまいました！回転かいてんを左右さゆうのみに限定げんていしましょう。 これで大丈夫だいじょうぶそうですね。 キーを押おしっぱなしにしても動うごくようにする 今いまは右みぎキーを何なん回かいも押おさないと前まえに進すすんでいきません。 ずっと押おしっぱなしにすると、つっかかるような前進ぜんしんになります。 これをスムーズにします。 右みぎキーを押おしている間あいだずっと処理しょりする まずはブロックの組み合く　あわせを見みてください。 これでスムーズに右側みぎがわに動うごきます。考かんがえ方かたは、「右みぎキーを離はなすまで」ずっと★カメラのX座標ざひょうを−10する、という方法ほうほうです。 「○を離はなすまで」というブロックはスクラッチに存在そんざいしないので「ではない」と「右みぎキーが押おされた」を組み合く　あわせること「右みぎキーを離はなした」という解釈かいしゃくを作つくっています。 そこに「○まで繰り返く　かえす」ブロックを組み合く　あわせることで「右みぎキーを押おしている間あいだずっと」という意味いみのループブロックを実現じつげんしています。 これは汎用はんよう性せいの高たかいループブロックなので、覚おぼえておいて損そんはないでしょう。 左ひだりキーを押おしている間あいだずっと処理しょりする 左側ひだりがわも同おなじように作つくってみましょう。 もっと滑なめらかな歩行ほこうにする 改善かいぜんはできましたが、まだまだ滑なめらかとは言いえません。もっとスムーズな歩行ほこうを目指めざします。 変数へんすう「加速力かそくりょく」を作つくる いまはスピードXに10を割り当わ　あててますが、滑なめらかな動うごきのために少すこしずつスピードXを増ふやしていく作戦さくせんに変かえます。 そこで加速かそく力りょくという新あたらしい変数へんすうを作つくります。 変数へんすう「加速かそく力りょく」と「スピードX」を初期しょき化かする 旗はたがおされたときに、加速かそく力りょくを2にするように初期しょき化かします。（2じゃなくてもOK） また、スピードXはゼロで初期しょき化かするように直なおします。 変数へんすう「★カメラのX座標ざひょう」にスピードXを加算かさんする処理しょりを「ずっと」行おこなう 今いままでは右みぎキーが押おされたら★カメラのX座標ざひょうにスピードXを加算かさんしてましたが、これからは変かえます。右みぎキーが押おされたらスピードXを加速かそく力りょくずつ増ふやし、★カメラのX座標ざひょうは「ずっと」スピードXの値あたいずつ変かえる作戦さくせんに変更へんこうします。 まず旗はたがおされたときに「ずっと」ブロックを追加ついかして、その中なかに今いままでキーを押おしたときに行いっていた★カメラのX座標ざひょうへの加算かさん処理しょりを入いれます。 キーを押おしたときはスピードXを加算かさんする その代かわりに、右みぎキーと左ひだりキーが押おされたときには、スピードXの値あたいを少すこしずつ変かえます。その値あたいに加速かそく力りょくを使つかいます。 右みぎキーが押おされたとき 左ひだりキーが押おされたとき 変数へんすう「スピードX」を減衰げんすいさせる 動うごかしてみてください。するとスムーズに動うごくは動うごきますが、どこまでも止とまらずに突き進つ　すすんでしまいます……。ゴハンを目前もくぜんにした猫ねこのように、猫ねこまっしぐらです。 これでは困こまりますので、少すこしずつスピードXの値あたいを減へらすブレーキ処理しょりを追加ついかします。 歩行ほこうアニメーションを作つくる かなりスムーズな歩行ほこうが完成かんせいしたのではないでしょうか。 でもまだスクラッチキャットの絵えが行いったり来きたりしているだけです。 もっと生き生い　いきと歩あるいてほしいですよね。 つまりはそう、アニメーションですね！ 今回こんかいはコスチュームづくりから挑戦ちょうせんしたいと思おもいます。 コスチュームを作つくるのに苦手にがて意識いしきがある人ひと、絵心えごころがないから避さけてきた人ひと、いると思おもいます。 私わたくしも絵えは苦手にがてです。 でも大丈夫だいじょうぶ！今回こんかいのレッスンではカンタンなマウス操作そうさだけでスクラッチキャットの新あたらしいコスチュームを作つくれます。一緒いっしょに見みてみましょう。 アニメーションとコマについて ノートのページの端はしっこを使つかって、1ページごとに絵えを書かいてパラパラっとめくってアニメっぽい動うごきを作つくるパラパラ漫画まんがという遊あそびをしたことがありますか？ アニメーションは基本きほん的てきにパラパラ漫画まんがの作つくり方かたと同おなじです。 そして今回こんかいはコマという専門せんもん用語ようごが出でてきます。 よく映画えいがやドラマやアニメなどでコマという言葉ことばは遣つかわれます。または家いえのテレビのリモコンに「コマ送こまおくり」というボタンがある人ひともいるかもしれません。 コマはパラパラ漫画まんがにおけるページと同おなじ意味いみです。1コマは1ページです。 今回こんかいは移動いどうするスピードに合あわせてコスチュームを変かえるギミックに、この「コマ」の考かんがえを応用おうようしていきます。 まずはコスチューム作つくりから始はじめます。そのあとにコーディングです。 コスチューム作つくり コスチュームを複製ふくせいする スクラッチキャットのコスチュームはデフォルトで2つあるので、コスチューム1を複製ふくせいして、それぞれのコスチューム名めいを歩あるく1、歩あるく2、歩あるく3に変更へんこうしてください。 手ての振ふり方かたを逆ぎゃくにします コスチュームの「選択せんたく」（矢印やじるしマーク）をクリックしてから、手てをクリックしてください。手てが選択せんたく状態じょうたいになると青あおい線せんで囲かこわれます。 この状態じょうたいでマウスで掴つかんで動うごかすと、手てをずらすことが出来できます。 青あおい線せんの下側したがわに「ちょびひげ」みたいな両りょう方向ほうこうを指さす矢印やじるしがあると思おもいます。これを掴つかんで動うごかすと角度かくどを変かえることが出来できます。 「掴つかんで動うごかす」と「角度かくどを変かえる」を駆使くしして手ての振ふり方かたを左右さゆう逆転ぎゃくてんさせます。 （ちょっと粗あらいので後日ごじつきれいにします！ファイルサイズを小ちいさくしすぎました……） 足あしも逆ぎゃくにします つぎに足あしも左右さゆう逆転ぎゃくてんさせます。ここではブラシを使つかいます。 ブラシで太ふとももあたりの線せんを消けします。 つぎに線せんツールを使つかって、足あしとお腹なかを線せんで繋つなげば完成かんせいです。 （こちらも粗あらいので後日ごじつきれいにします！） 歩あるく2を複製ふくせいして歩あるく4を作つくる 次つぎに歩あるく2の動作どうさを複製ふくせいして、歩あるく4に改名かいめいします。番号ばんごう順じゅんにコスチュームを並べ替なら　かえてください。 これで最低さいてい限げんのアニメーションは完成かんせいです。 どうでしたか？コスチューム作つくりは面白おもしろかったですか？それともやっぱり苦手にがてでしたか？ 面白おもしろかった方ほう もし面白おもしろかった！コスチューム作つくるの好すきかも！と思おもえたなら、歩あるく動作どうさをもっとなめらかにするために、歩あるく6くらいまでコスチュームを増ふやしてみてください。 苦手にがてだった方かた 難むずかしい！やっぱり苦手にがて！という方かたはコスチュームはこれで終おわりでOKです。 もしくは「難むずかしそうすぎてやってない！」という方かたはこちらに各かくコスチュームのファイルを用意よういしておいたので、無理むりせずこちらを使つかってください。 コスチュームファイルをダウンロードできます • 歩あるく3 • 歩あるく4 • 歩あるく5 • 歩あるく6 使つかい方かたは次つぎのとおりです。 • まずは上うえのリンクから「歩あるく3」をダウンロードする • スクラッチのエディタを開ひらいて、コスチュームのタブを押おして、左下ひだりしたに出でてくるネコのマークにマウスを乗のせます。※ • コスチュームをアップロードから、歩あるく3.svgをアップロードします。 • この手順てじゅんをすべてのコスチュームファイルで繰り返く　かえします。 一気いっきにすべてのファイルをダウンロードしておいて、一気いっきにすべてのファイルをアップロードすることも可能かのうです。 アニメーションのコーディングに使つかうブロックを確認かくにんする ここからはコーディングに戻もどります。 なお、ここではコスチュームが歩あるく1から歩あるく6までの6種類しゅるいあるという前提ぜんていで解説かいせつしていきます。 りんごとバナナ まず「コスチュームを○にする」ブロックと「りんごとバナナ」という演算えんざんブロックを用意よういしてください。 そしてりんごを「歩あるく」に、バナナを「1」に変かえてください。 この1の部分ぶぶんを1,2,3……と変かえていくのが今回こんかいの作戦さくせんです。 剰余じょうよ演算えんざん子し 次つぎに剰余じょうよ演算えんざん子しを使つかいます……って言ゆうと固かたいですね。プログラマーでもピンとこないかもしれません、この単語たんご。これは「○を○で割わった余あまり」ブロックのことです。 割わった余あまりの数字すうじを使つかうのはプログラミングではごくごく一般いっぱん的てきな作法さほうです。よく使つかいます。でも言葉ことばにすると聞き慣なれません。 0を6で割われるか6を6で割われると余あまりはゼロになります。コスチューム名めいは歩あるく1から始はじまり歩あるく6で終おわるので、剰余じょうよ演算えんざんの回答かいとうにはプラス1するようにします。こうすることでコスチューム数すう（6）で割わっていけば、1から6の数字すうじを余あまりとして取得しゅとくすることが出来できます。 これらブロックを合体がったいさせるとこうなります。 あとはこの演算えんざんを変数へんすう「コマ」と「コマのスピード」という2つを駆使くしして実行じっこうしていきます。 変数へんすう「コマ」と「コマのスピード」を作つくる コマを変かえる速度そくどを、コマのスピード変数へんすうがコントロールしていきます。 コマのスピード変数へんすうの値あたいを調整ちょうせいすることで、移動いどう速度そくどと歩あるくコスチュームが連動れんどうしているように見みえます。 コマのスピードをスピードXにします コマのスピードをどのように設定せっていするかでアニメーションの速度そくどが決きまります。ここを決きめるポイントは「アニメーションの速度そくどを何なんと同おなじにしたいか」です。 アニメーションの速度そくどと同おなじにしたいのは、横よこに移動いどうする速度そくどでしたね。なのでコマのスピードを決きめるのに「スピードX」変数へんすうを利用りようします。スピードX変数へんすうはその名前なまえ通とおり、X軸じくに移動いどうするスピードを持もっています。 X軸じくの移動いどうに合あわせてコスチュームを変かえたいので、バッチリな存在そんざいですね。 変数へんすう「コマ」の値あたいを変かえる コマにコマのスピードを追加ついかしていきます。 変数へんすう「コマ」をコスチュームの演算えんざんに組み込く　こむ さきほど作つくったコスチュームの演算えんざんに変数へんすうコマを適用てきようします。しかしコマは整数せいすうである必要ひつようがあるのに、スピードXの値あたいは常つねに0.8を掛かけている関係かんけいで小数しょうすうを含ふくむ数値すうちになっています。 そこで、「切り上き　あげ」演算えんざんブロックで整数せいすうにしてから適用てきようします。 変数へんすう「コマ」を初期しょき化かする コマはゼロで初期しょき化かします。 変数へんすう「コマのスピード」を調整ちょうせいする 左ひだりに動うごかしてみてください。どうですか？動うごくのは動うごきますが、おそらくアニメーションのスピードが早はやすぎると感かんじたのではないでしょうか。 コスチュームは目めまぐるしい速度そくどで変かわり、X軸じくが10移動いどうする間あいだに数百すうひゃく歩ほも歩あるいているような見みた目めになります。まるでギャグ漫画まんがのダッシュみたいなコミカルな動うごきになります。これはこれで何なんか使つかえそうですが、ここではスピードと合あわせた速度そくどでコスチュームに変かわってほしいですよね。 そこで、コマのスピードを割り算わ　ざんを使つかって減へらすことで調整ちょうせいします。どのくらいの値あたいがちょうどいいか、目めで見みながら数字すうじを整ととのえてください。 ここでは25で割わるくらいがちょうどいいかなと判断はんだんしていますが、みなさんはどうですか？ 変数へんすう「コマのスピード」の最低さいてい値ちを設定せっていする コマのスピードが0に近ちかづきすぎると、アニメーションがほんのすこしだけ不ふ自然しぜんに見みえてしまいます。そこで、最低さいてい値ちを設定せっていします。 動うごいてないときのコスチュームを固定こていする これで左ひだりに歩あるく動作どうさは自然しぜんになりましたが、スピードXがゼロのときはどうでしょうか。 動うごいてないはずなのに、その場ばで足踏あしぶみしているかのようにアニメーションが作用さようしてしまいます。 今回こんかいはスピードXがある程度ていど小ちいさくなったら、つまり止とまっているときは歩あるく1のコスチュームを割り当わ　あてます。 ここではスピードXが1未満みまんのときはコスチュームを固定こていするようにしました。自分じぶんで数字すうじを調整ちょうせいして、より最適さいてきに感かんじる値あたいを見みつけてもいいでしょう。 右みぎに動うごいてもアニメーションが正ただしく動うごくよう調整ちょうせいする さて、今いままでは左ひだりに動うごかして調整ちょうせいしてましたが、そろそろ右みぎにもしっかり動うごくようにします。 右みぎに動うごかしてみましたか？動うごきませんよね。 そもそもナゼ右みぎだとアニメーションが動うごかないのでしょうか。 答こたえはスピードXの値あたいがマイナスだからです。 マイナスなので、いろいろ計算けいさんがうまくいってないのです。 そこで「絶対ぜったい値ち」というブロックを使つかいます。 絶対ぜったい値ちブロックとは、値あたいがプラスでもマイナスでも関係かんけいなく、必かならずプラスの値あたいを返かえしてくれるブロックのことです。プラス5ならそのままプラス5を返かえしてくれます。マイナス4.34ならプラス4.34を返かえしてくれます。 置き換お　かえる場所ばしょは2箇所かしょあります。 置き換お　かえてみましょう。 いかがでしょうか？かなりスムーズにアニメーションが動うごくようになったのではないですか？ この段階だんかいで動うごかない方ほうは、コスチュームの計算けいさんが正ただしいか、変数へんすう「コマ」がゼロで初期しょき化かされているか、絶対ぜったい値ちを使つかっているか、などを再さい確認かくにんしてください。 ひとまず歩あるくアニメーションはこのクオリティで十分じゅうぶんです！さらに滑なめらかなアニメーションを追求ついきゅうしたい場合ばあいは、コスチュームでもっと念入ねんいりに正確せいかくに歩あるくモーションを実現じつげんしてみてください。コスチュームの数かずが多おおくなっても構かまいません。コスチュームの数かずを変かえたら、「6で割わった余あまり」という部分ぶぶんの6も変かえておきましょう。 リファクタリングする プログラミングはダーッと書かいたあと、いったん立ち止た　どまって処理しょりを美うつくしく書き直か　なおす作業さぎょうを行おこなうことが推奨すいしょうされています。この作業さぎょうを「リファクタリング」と呼よんでいます。 リファクタリングという言葉ことば自体じたいは重要じゅうようではありませんが、リファクタリングというある種しゅの「お片付かたづけ」「整理せいり整頓せいとん」「最適さいてき化か」を行おこなっておくことは大切たいせつです。プログラムを後日ごじつ直なおそうと思おもったとき、誰だれかがリミックするとき、コードが美うつくしく整ととのっていれば、より少すくない力ちからでクリエイティブを発揮はっきできるものです。 アニメーション処理しょりをブロック定義ていぎにしておく ループの中なかが散ちらかってきたのでブロック定義ていぎにまとめます。強つよく関連かんれんする処理しょりを1つのブロック定義ていぎにまとめます。 X軸じくに移動いどうする処理しょりもブロック定義ていぎにする こちらもブロック定義ていぎにまとめておきます。このあとY軸じくに移動いどうする処理しょりが始はじまるので、できるだけ整理せいり整頓せいとんしておきます。 ブロック定義ていぎにしたあとは、必かならず動作どうさ確認かくにんをして意図いとしたとおりに動うごくか確たしかめましょう。 旗はたがおされたときの「ずっと」ループ内ないがシンプルになりましたね。スッキリしました。 ジャンプの作つくり方かたへ！ 次つぎはいよいよマリオ最大さいだいの魅力みりょくと言いっても過言かごんではない、ジャンプを作つくります！ 数すう日じつ以内いないに更新こうしんする予定よていです！更新こうしんしたらこの記事きじにもリンクを追加ついかするので、ブックマークなどなんでもいいので分わかるようにしておいてください。