ディズニー・プログラミング学習教材「テクノロジア魔法学校」の2章の、
身につくスキルと関数一覧のまとめです。
目次
第2章の感想
登場人物が増え、レッスンのボリュームも一気に上がりました。
難易度に関しては、2章でレッスンの流れをつかめた人であれば、困ることも少ないと思います。
WEBデザインのレッスンは?
2章ではWEBデザインの内容が特に濃いですね。
ブックレッスンも真っ白の画面からWEBサイトを手順に沿って作っていくので、
自分でWEBサイトを作るという感覚が、初学者の人でも掴みやすいのではないでしょうか。
ゲームのレッスンは?
ジェムレッスンは大満足だったのですが、
ブックレッスンの方は少しあっさりしていた気がします笑
ステージ、キャラクターは既に画面上に表示されていて、
そこからゲームを完成させるために手を加えていくという形のため、
1から作っていく形ではありませんでした。
これに関しては、1から作ろうとすると、
他のレッスンと比べて膨大に時間が掛かってしまうため、
まずはユーザーに「いずれはこんなゲームも1から作れるようになるんだぜ?」と
期待させるためのレッスンだったのかなぁと思っております。
ちなみにジェムレッスンは1から作りますよ!
ゲームで次章に備えて復習する場合は、ジェムレッスンの5番目が良いかもしれません。
メディアのレッスンは?
WEBデザイン、ゲームと触れたので、最後にメディアの感想を。
メディアはゲームと同じ p5.js (processing)でのコーディングのため、
ゲームと内容が被る部分もありますね。
テクノロジア魔法学校ではメディア、WEBデザイン、ゲームと3つにカテゴライズされていますが、
僕の中では
・WEBデザイン
・メディア、ゲーム
という風にメディアとゲームは二つで一つのイメージがあります。
新しく覚えた関数も両方で使ったりしますからね。
2章ではゲーム、メディアの両方でrandom()という関数を使うのですが、
メディアはこのrandam()関数を使う楽しさが特に際立っています。
ブックレッスンで画面いっぱいにrandam()関数を使ってあるものを表示するのですが・・・
これがすごく綺麗なんです。
何を表示するか自分の目で確かめてください笑
2章の身につくスキル
WEBデザイン
- 余白の設定の仕方がわかります。
- 画像を横並びで表示する方法がわかります。
- classの使い方がわかります。レイアウトの変更を、
全体ではなく1部分だけに適用することができるようになります。 - ヘッダーやフッターの設定の仕方がわかります。
特にclassは重要ですね。
ゲーム
- キャラクターにアニメーションを付ける方法を学びます。
- ランダムに画像(アイテム)を表示できるようになります。
- 衝突判定が学べます。Aの画像(キャラクター)とBの画像(障害物)が重ね合わさったとき、どういった動きをさせたいか指定することができるようになります。
メディア
- 四角形を画面に表示できるようになります。
- 繰り返し処理と配列の使い方について学びます。同じ画像や図形をたくさん表示したり、
それぞれに同じ動きをさせたりすることが、少ないコーディングで行えるようになります。
ゲームで書いたことは省略しています。
2章関数一覧
for文やif文、配列の初期化方法などは載せません。
一覧にしなくても、嫌でも毎回使うことになると思うので省いておきます笑
また1章よりは説明を簡略化しています。(1章も簡素でしたが・・・)
ここで中途半端に説明するより詳しい使い方はリファレンスで見た方が誤解がないと思うので。
それではどうぞ。
リファレンスサイトはこちら
HTML / CSS
・http://www.htmq.com/
p5.js
・https://p5js.org/reference/
HTML
タグ |
説明 |
<body> |
文書全体を示すタグです。 |
<header> |
ヘッダーであることは示すタグです。 |
<footer> |
フッターであることは示すタグです。 |
<section> |
タグで括った箇所を一つのセクションであると示すタグです。 |
<タグ class = 'クラス名'> |
<div class='hoge1'>のように使います。 |
CSS
プロパティ |
説明 |
padding[ - left, right, top, bottom] |
内側の空白のサイズをpx(ピクセル)で指定します。 padding-left とすることで左側のみ空白のサイズを指定することも可能です。 |
margin[ - left, right, top, bottom] |
外側の空白のサイズをpxで指定します。 |
background-color |
背景の色を指定します。 |
background-image |
背景の画像を指定します。 |
border[-left, right, top, bottom-]style |
1章で学んだ枠線のstyle, width, colorを、 |
width |
幅を指定します。 |
height |
高さを指定します。 |
float |
指定した要素を左または右に横並びにして配置します。 |
clear |
floatで横並びにした状態を解除します。 |
box-shadow |
要素に影を付けます。 |
p5.js
関数 |
説明 |
rect(x, y, w, h) |
四角形を描写します。xとyが四角形の左上の座標、wが幅、hが高さです。 |
createSprite ( x, y, width, height ) |
Sprite(キャラクターやアイテムなどの2Dのグラフィックスオブジェクト)を作ります。 |
drawSprite(sprite) |
createSpriteで作成したspriteを画面に表示します。 |
loadAnimation(sprite) |
preLoad関数内に書きます。 |
addAnimation ( label, animation ) |
spriteにアニメーションを追加します。 |
position.x
|
chara.position.x = 数値 |
position.y |
chara.position.y = 数値 |
random(n) |
括弧内の数値の範囲でランダムな値を返します。 |
floor(n) |
n以下の最も近い整数を返します。 |
addImage ( label, img ) |
Spriteに画像を追加します。 |
createGroup() |
Spriteのグループを作成します。 |
drawSprites(group)
|
グループ単位でSpriteを画面に表示します。引数未指定の場合はSpriteすべてを画面に表示します。 |
add(sprite) |
spriteGroupというグループ変数を定義した場合 |
collide(target, [callback]) |
SpriteGroup.collide(blockSprite)のように使います。 |
overlap(target, [callback]) |
collideとほぼ同じですが、重ならない位置に移動はしません。 |