KCC用Scratchでスクロールの手順書

#手順

##1.ステージ作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/68c3d6cc-2e8a-6516-3229-074372d95ea7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/485876ed-ade5-0724-cf2d-f7f1592fa0b6.png)
スクロールX,Yを作ってステージ自体は隠す
##2.ステージのクローンを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/aa0f5397-250c-dabc-c213-4365c7fc82e7.png)
まずはX,Y＝０で原点に作る。
**クローンの位置x,yはこのスプライトのみにチェックを入れる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/2da0bc79-cb1a-d8cb-daf1-06f5252f034d.png)
こんどは2個目のステージも作る。
##3.クローンを動かす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/91fea75c-2c6a-5820-81ee-a859bfca0d18.png)
クローンが作られたら表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/b532872d-d75b-2e9e-a1b5-b45c3b05d249.png)
ずっと座標を（クローンの位置-スクロール）にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/7101b2bf-86ac-6af6-fccc-9101376ac29c.png)
冗長になるので定義を作って引数x,yに計算式を入れる
##スクロールできるようにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/d49a87a9-cad0-ef1a-b3ef-0b406e4e9943.png)
ステージ側と実際に動くプレイヤーは分けたいのでプレイヤーのスプライトにプログラムを書いていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/be5e9e48-bbc8-a4d6-f62c-c7fbb868b435.png)
単純に矢印キーでスクロールxを増減させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/ccbdca8f-dcfa-f8b5-a9ac-3926bc08c89f.png)
上下移動も同じようにスクロールyを増減させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/6993cddc-2415-30ce-d4bc-493e2db8bff5.png)
大体完成
##ステージが引っかかっているのを直す
###方法その1-黒枠で囲って隠す（簡単）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/c157fe05-9f64-c677-ece4-635bec6a6b99.png)
これが一番簡単だと思います。
正直、次に紹介するプログラムは難しいので、あえて次のプログラムを紹介せず、KCCの子どもたちに考えてもらう的な感じにするのもいいかもしれません。

（アクションゲームで地面にめりこむバグの治し方を積極的に発表している子を見てそう思いました）
###方法その２（難しい）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/2b8829a2-1ac2-005c-ac94-0310179b2219.png)
よくみてみると右の方に次のステージが写ってしまっているので隠す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/4b22e737-c18d-f64b-5bd9-9d76a16b45df.png)
これで画面外にステージが引っ掛からなくなる

これ以外にプログラムは思いつきませんでした…というのも、これが一番出来がいいプログラムだからです。
他のプログラムはなんとか子どもでもわかるように説明できるかもしれませんが、こればかりはScratchの性質かつうまく自分が説明できなかったので詳しく書いておきます。
##画面外のステージを隠すプログラムの仕組みを解説
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/aeb39c89-241e-c029-5038-d4691cb9ee0f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/315fa0b7-d987-e58b-d3c9-2e84892d739e.png)
ステージのプログラムを改造してわかりやすくなるようにクローンの計算したX座標、クローンの実際のX座標という変数を追加。
さらにわかりやすくするためにステージは一個だけ生成することにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/b20c89fc-4e3d-366e-cf0b-8cbf75957d41.png)
クローンを隠す処理は外しておきます。外さないと座標がバグります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/05f0b4cb-a0f9-7f7e-c884-1fa495b3fcee.png)
まず最初に旗を押すとこうなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/acafb7ef-4426-73e9-dbf7-bde28b6f33ae.png)
右矢印キーを押すと値が変わって、クローンの実際のX座標とクローンの計算したX座標の値も変わる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/68be2287-9e17-61a7-688c-b869d69802d5.png)
どんどん右矢印キーを押していく。ステージが端までいくまでずっと押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/f8e7014c-65b6-5fdf-b504-f96d8d187067.png)
自分の書いたステージは600*400のサイズでしたが、ここで止まりました。変数をみてみると、クローンの実際のX座標は-527で止まっていて、クローンの計算したX座標は-560まで増えています。

クローンの計算したX座標は（クローンの位置x-スクロールx）で求めており、スクロールxが変化する限りずっと変化しますが、クローンのX座標の範囲には制限があるので差が出ます。なので、二つの値が同じじゃなかったら隠すという処理をすればステージをうまく隠したり表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/964269/36b62444-caee-e7ba-d0be-9136d8542e92.png)
このプログラムで二つの値が同じかどうか評価しています。同じならば表示して、どちらか片方でも違うと隠すようにしています。