p5.js + オープンデータ = 2Dゲーム

アーバンデータチャレンジ 2018 in 岐阜として開催したゲームを作る勉強会の資料です。p5.jsを使ってプログラミングうがはじめての方もできるようにしています。オリジナルキャラのつくり方もありますよ。ぜひとも参考にしてください。

Transcript

1. 2018.10.14 CODE for GIFU 石井哲治
2. はじめに 2 • プログラミングをやったことのない方でも、はじめの一歩を踏み出せる レベルにしています • javascriptの基本については解説しません • p5.jsのバージョンは0.7.2で資料を作成しています • 開発環境としてGoogle Chromeブラウザを利用しています。事前にインス トールしてください • この資料はCC-BY 4.0にて公開いたします。商用でもご自由に改変・再利 用して活用ください
3. 3 p5.js の基本 オリジナルキャラをつくろう オリジナルキャラを動かそう オープンデータを使ってみよう つくったゲームをみんなで遊ぼう
4. 4 p5.js の基本 オリジナルキャラをつくろう オリジナルキャラを動かそう オープンデータを使ってみよう つくったゲームをみんなで遊ぼう
5. p5.jsをさわってみよう 5 「p5.js」で検索 ここをクリック https://p5js.org/
6. p5.jsの便利なWeb Editor 6 右上のSign up をクリックして ユーザー登録を しよう
7. ユーザー登録しよう 7 ユーザ名 メールアドレス パスワード を入力 登録できると メールアドレス に承認メールが くるので、 をクリック Verify Email
8. まずはhello world ! 8 function setup() { createCanvas(400, 400); } function draw() { background(220); text('hello world !',20,20); } ここを追加 実行ボタンを クリック Ctrl + Enterでもよい (macはCmd + Enter)
9. まずはhello world ! 9 文字が表示され れば大丈夫！
10. p5.jsとは？ 10 p5.js（ピーファイブ・ジェーエス） ビジュアルコーディングツールを使わなくてもwebブラウザ上でJavaScriptによって クリエイティブコーディングができるようになるライブラリです。 「canvas」を利用した描画処理を簡単にプログラミングできるのが「p5.js」の特徴 です。機能を拡張するライブラリがとても優秀で、ゲーム、音楽、Webアプリ、 IoT…など、幅広いジャンルの開発ができます。 Processing（プロセッシング） 2001年にCasey Reas（ケーシー・リース）と Ben Fry（ベン・フライ）の2人がMIT メディアラボで開発をスタート。プログラミングによる視覚的な表現（イメージの 生成、アニメーション、インタラクション）の技法をやさしくするために生まれま した。
11. setup / draw 11 setup() 最初に１回だけ呼び出される処理 function setup() { createCanvas(400, 400); } function draw() { background(220); text('hello world !',20,20); } draw() 描画毎に呼び出される処理 createCanvas(width, height) canvasの横幅と高さを指定する background(color) 背景の塗りつぶしを実行する text(text, x, y) 文字を指定の位置に表示する
12. 座標について 12 (0,0) canvas canvasの左上から０で始まり、右下に向 かってそれぞれ座標の数値が増えます。 x → y ↓ (0,400) (400, 0) (400, 400) width height width canvasの横幅を取得できる変数 height canvasの縦幅を取得できる変数
13. 画面中央に配置する 13 先ほどのコードを修正して、「hello world!」を画面の中央に配置してください。 Ctrl + / を押すとその行をコメントアウトできます function setup() { createCanvas(400, 400); } function draw() { background(220); // text('hello world !', 20, 20); text('hello world !', width/2, height/2); }
14. 画面中央に配置する 14 このままだとズレていますね。 text()の座標はデフォルトだと左下を指定 しています。 実行結果
15. 画面中央に配置する 15 文字列を中央寄せにします。 function setup() { createCanvas(400, 400); } function draw() { background(220); // text('hello world !', 20, 20); textAlign(CENTER, CENTER); text('hello world !', width/2, height/2); } textAlign(horizAlign, [vertAlign]) 文字列の水平方向と垂直方向の寄せを指定 します horizAlign：LEFT, CENTER, RIGHT vertAlign：TOP, BOTTOM, CENTER, BASELINE textSize(pt),textStyle(NOMAL/BOLD/ITALIC) とかもあるので試してみてください。 LEVEL UP
16. つくったsketchを保存する 16 保存する名前を 指定します helloworld Ctrl + S で保存
17. つくったsketchを保存する 17 My Account ＞My sketches 保存したsketchを 開くことができ ます
18. 新しいsketchを開く 18 File > New 新しいsketchを開 くことができま す
19. 図形を描く 19 四角形を描きます。 function setup() { createCanvas(400, 400); background(220); rect(width/2, height/2, 100, 50); } function draw() { } rect(x, y, width, height) 四角形を描きます。引数の意味は描画モー ドによって変わります。
20. 図形を描く 20 描画モードを指定します。 function setup() { createCanvas(400, 400); background(220); rectMode(CENTER); rect(width/2, height/2, 100, 50); } function draw() { } rectMode(mode) 四角形を描くモードを指定できます。 mode: CORNER, CORNERS, CENTER, or RADIUS
21. 図形を描く 21 枠線と塗りつぶしを指定します。 function setup() { createCanvas(400, 400); background(220); stroke('red'); strokeWeight(5); fill('#ffcc00'); rectMode(CENTER); rect(width/2, height/2, 100, 50); } function draw() { } stroke(color) 枠線の色を指定できます。 strokeWeight(pt) 枠線の太さを指定できます。 fill(color) 塗りつぶしの色を指定できます。 colorはRGBやCSSの指定方法が利用できま す
22. 図形を描く 22 楕円を描きます。 function setup() { createCanvas(400, 400); background(220); stroke('red'); strokeWeight(5); fill('#ffcc00'); // rectMode(CENTER); ellipse(width/2, height/2, 100, 50); } function draw() { } ellipse(x, y, width, height) 楕円を描きます。 LEVEL UP line(x1,y1,x2,y2),triangle(x1,y1,x2,y2,x3,y3) とか もあるので試してみてください。
23. 図形を変形させる 23 二つの四角形を描きます。 function setup() { createCanvas(400, 400); background(220); rectMode(CENTER); fill(255,0,0,127);//赤の四角 rect(width/2,height/2,100,100); fill(0,0,255,127);//青の四角 rect(width/2,height/2,100,100); } function draw() { }
24. 図形を変形させる 24 赤の四角形を移動させます。 このままだと両方の四角形が移動してしま います。 function setup() { createCanvas(400, 400); background(220); rectMode(CENTER); translate(20,20); fill(255,0,0,127);//赤の四角 rect(width/2,height/2,100,100); fill(0,0,255,127);//青の四角 rect(width/2,height/2,100,100); } function draw() { } translate(x, y) x座標、y座標方向に移動させます。
25. 図形を変形させる 25 push()とpop()で囲みます。 function setup() { createCanvas(400, 400); background(220); rectMode(CENTER); push(); translate(20,20); fill(255,0,0,127);//赤の四角 rect(width/2,height/2,100,100); pop(); fill(0,0,255,127);//青の四角 rect(width/2,height/2,100,100); } push() 現在の描画状態を保存します。座標だけで なく色などの属性情報も保存できます。 pop() 保存された描画状態を復元します。
26. 図形を変形させる 26 回転や拡大・縮小もできます。 function setup() { createCanvas(400, 400); background(220); rectMode(CENTER); push(); translate(20,20); rotate(radians(30)); scale(0.5); fill(255,0,0,127);//赤の四角 rect(width/2,height/2,100,100); pop(); fill(0,0,255,127);//青の四角 rect(width/2,height/2,100,100); rotate(radian) 指定された角度だけ回転します。 scale(scale) 指定された数値で拡大・縮小します。
27. 乱数を使ってみよう 27 乱数を使って複数の円を描画してみよう。 function setup() { createCanvas(400, 400); background('skyblue'); noStroke(); } var x, y, r; function draw() { x = random(width); y = random(height); r = (random() < 0.9) ? random(50,80) : random(5,30); fill(255,255,255,random(30,250)); ellipse(x, y, r, r, random()); } random(num) 0から指定された数字までの乱数を返しま す。 noStroke() 図形の枠線なしを指定できます。 TOPIC みんな大好き三項演算子 変数 ＝（条件式）？（真の場合）：（偽の場合） https://editor.p5js.org/tetsujiishii/sketches/SkfmJYlFX
28. 「お絵かきアプリ」をつくってみよう 28 マウスやキー操 作の基本を学び ながら、お絵か きアプリをつく ります。 File > New で新しいsketch を開いてくださ い。 https://editor.p5js.org/tetsujiishii/sketches/r18wwnbtX
29. 「お絵かきアプリ」をつくってみよう 29 マウスで線を描けるようにします。 マウスをクリックしている間は白い線が引 かれます。 function setup() { createCanvas(400, 400); noStroke(); background(220); } var r = 20; var cl = 'white'; function draw() { if (mouseIsPressed) { fill(cl); ellipse(mouseX, mouseY, r, r); } } mouseIsPressed マウスがクリックされているときはtrueを 返します mouseX / mouseY マウスの座標が取れる変数 マウス操作 編
30. 「お絵かきアプリ」をつくってみよう 30 マウス操作のイベント処理で記述します。 先ほどと同じように、マウスをクリックし ている間は白い線が引かれます。 var r = 20; var cl = 'white'; var isDraw = false; function draw() { if (isDraw) { fill(cl); ellipse(mouseX, mouseY, r, r); } } function mousePressed() { console.log('mouse pressed'); isDraw = true; } function mouseReleased() { isDraw = false; } mousePressed() マウスが押されたときに1回呼ばれます。 mouseReleased() マウスが離されたときに1回呼ばれます。 console.log() 左下のコンソールにログを出力します。デ バッグ時に有効です。 マウス操作 編
31. 「お絵かきアプリ」をつくってみよう 31 キー操作によって線の太さを変更できるよ うにします。 カーソルの↑で太く、↓で細くします。 ... function keyPressed() { console.log('keycode:'+keyCode); switch (keyCode) { case UP_ARROW: r+=5; break; case DOWN_ARROW: r-=5; break; } } keyPressed() keyが押されたときに1回呼ばれます。 keyCode 押されたkeyのコードがセットされる変数 特殊キーについてはUP_ARROW等の定数が用意され ています キー操作 編
32. 「お絵かきアプリ」をつくってみよう 32 描いた線をクリアするボタンを追加します。 setup()の中に記述を追加してください。 function setup() { createCanvas(400, 400); noStroke(); background(220); var button = createButton('クリア'); button.position(10,height-35); button.mousePressed(function(){ background(220); }); } ... createButton(text) ボタンのオブジェクトを作成します。 button.position(x,y) ボタンの左上の座標を指定します。 button.mousePressed() ボタンでマウスが押されたときのイベント を記述します。 DOMとは「Document Object Model」のことで p5.domライブラリでHTML等の要素を操作でき ます。 DOM 編 TOPIC
33. 「お絵かきアプリ」をつくってみよう 33 カラーパレットを追加します。 サンプルソースの48行目から78行目をコ ピー＆ペーストしてください。 ... ここから //カラーパレット var colors = ['white','pink','skyblue']; ... function isSelectedColor() { return (selectColor() != ""); } ここまでコピペ 関数 編 https://editor.p5js.org/tetsujiishii/sketches/r18wwnbtX
34. 「お絵かきアプリ」をつくってみよう 34 setup()とmousePressed()を修正してくださ い。 colorPallet() カラーパレットを表示します。 isSelectedColor() カラーパレットを選択したかどうか判断し ます。 selectColor() 選択された色を返します。 関数 編 function setup() { ... background(220); colorPallet(); ... button.mousePressed(function(){ background(220); colorPallet(); }); } ... function mousePressed() { cl = (isSelectedColor()) ? selectColor() : cl; isDraw = ! isSelectedColor(); }
35. 「お絵かきアプリ」をつくってみよう 35 3色の色でお絵かきができるアプリの完成 です。 ・カラーパレットの色を増やしてみよう ・スライダーで線の太さがかわるようにし てみよう createSlider() 実行結果 LEVEL UP
36. 36 p5.js の基本 オリジナルキャラをつくろう オリジナルキャラを動かそう オープンデータを使ってみよう つくったゲームをみんなで遊ぼう
37. オリジナルキャラを考えよう 37 岐阜にちなんだキーワードのカードから オリジナルキャラを考えてみよう！ 例 五平餅 ↓ 五平餅ダイスキー 五平餅をこよなく愛する正義の味方 必殺技は「たれアタック」
38. オリジナルキャラを描こう 38 1. 考えたキャラ素材の画像を探す 2. piskelにインポート（32 x 32） する 3. お絵かきする Piskelでドット 絵の描き方講座
39. オリジナルキャラを描こう 39 キャラの参考になりそ うな画像を探します ※Google画像検索の設定で ライセンス項目を使うとよ い 見つけた画像をだいた い正方形に切り抜きま す Mac：Cmd + Shift + 4 Win：Snipping Tool
40. オリジナルキャラを描こう 40 「Piskel」で検索 「Create Sprite」を クリック https://www.piskelapp.com/
41. オリジナルキャラを描こう 41 先ほど切り抜いた画 像を下地にしてドッ ト絵を描きます https://www.piskelapp.com/ IMPORTをクリック
42. オリジナルキャラを描こう 42 画像を取り込みます https://www.piskelapp.com/
43. オリジナルキャラを描こう 43 32 x 32 に変更して、 Importボタンをクリック https://www.piskelapp.com/
44. オリジナルキャラを描こう 44 レイヤーを追加 https://www.piskelapp.com/ ドット絵の下地がで きました
45. オリジナルキャラを描こう 45 https://www.piskelapp.com/ ペン、塗りつ ぶし、消しゴ ムツールを 使ってキャラ をつくろうｃ
46. オリジナルキャラを描こう 46 https://www.piskelapp.com/ PNG形式でダウンロー ドしよう Downloadボタンを クリック
47. Piskelの使い方 47 ペイントツールの使い方はこちらの資料に詳しくのってますので参考にしてください https://www.slideshare.net/takashiohsaka/piskel-chap2-117325271
48. 48 p5.js の基本 オリジナルキャラをつくろう オリジナルキャラを動かそう オープンデータを使ってみよう つくったゲームをみんなで遊ぼう
49. p5.play.jsライブラリを追加します 49 p5.play.jsをダウン ロードします PCの適当なフォ ルダにて解凍して ください http://molleindustria.github.io/p5.play/
50. p5.play.jsライブラリを追加します 50 Web Editorで新 規ファイルを開 きます ここをクリック してフォルダを 表示します
51. p5.play.jsライブラリを追加します 51 下矢印をクリック し、[Add Folder] にてフォルダを追 加します フォルダ名は lib としてください
52. p5.play.jsライブラリを追加します 52 追加したlibフォル ダの下矢印をク リックし、[Add File]にてファイル を追加します
53. p5.play.jsライブラリを追加します 53 先ほど解凍した p5.play-master>lib p5.play.js を ドラッグ＆ドロッ プして追加します
54. p5.play.jsライブラリを追加します 54 index.htmlを選択して、 １行追加します <script src="lib/p5.play.js"></script>
55. ゲームをコピーしよう 55 Examplesをクリック http://molleindustria.github.io/p5.play/
56. ゲームをコピーしよう 56 Examplesをクリックして、 下の方にある 「Game-Pong」を選択 http://molleindustria.github.io/p5.play/examples/
57. ゲームをコピーしよう 57 プログラムを全選択して、 コピーしよう http://molleindustria.github.io/p5.play/examples/
58. ゲームをコピーしよう 58 sketch.jsに貼り付けよう ※最初に書かれているプログ ラムはすべて削除 実行ボタンをクリック Ctrl + Enterでもよい (macはCmd + Enter)
59. ゲームの基本 59 プログラムについて解説します ... function setup() { createCanvas(800, 400); //frameRate(6); paddleA = createSprite(30, height/2, 10, 100); paddleA.immovable = true; ... createSprite(x,y,width,height) スプライトは、p5.playの主な構成要素です。 位置や視認性などのプロパティを持つイ メージやアニメーションを保存できる要素 です。ゲームのキャラや障害物などを定義 できます。 Pongでは５個のスプライトを使います immovableプロパティ trueに設定すると、スプライトは跳ね返っ たり、衝突によって移動したりすることは ありません。ボール以外はtrueにします。
60. ゲームの基本 60 11行目から22行目 wallTopとwallBottomを Canvasの外に配置するこ とによりballが跳ね返る ようにしています。 26行目 paddleとballの色を指定 28行目 ballの速度を指定 MAX_SPEEDは定数 paddleA paddleB wallTop wallBottom ball setup()
61. ゲームの基本 61 34,35行目 constrain関数により paddleがマウスで上下し すぎないように最小値と 最大値の制限を設ける 37行目から38行目 ballの跳ね返りを指定 bounce(target) スプライトが重なってい るかを判定してそれぞれ の軌道に影響を与える draw() ... function draw() { background(0); paddleA.position.y = constrain(mouseY, paddleA.height/2, height-paddleA.height/2); paddleB.position.y = constrain(mouseY, paddleA.height/2, height-paddleA.height/2); ball.bounce(wallTop); ball.bounce(wallBottom); ...
62. ゲームの基本 62 40行目から49行目 ballがpaddleに跳ね返る ときに角度を変える setSpeed(speed, direct) 速度と角度を指定する。 paddleの端の方が跳ね返 る角度を大きくしている draw() ... var swing; if(ball.bounce(paddleA)) { swing = (ball.position.y-paddleA.position.y)/3; ball.setSpeed(MAX_SPEED, ball.getDirection()+swing); } if(ball.bounce(paddleB)) { swing = (ball.position.y-paddleB.position.y)/3; ball.setSpeed(MAX_SPEED, ball.getDirection()-swing); } ...
63. ゲームの基本 63 51行目から61行目 ballがcanvasの端から消 えた場合に中心からやり 直す。消えた側を反対方 向にballが進むように なっている 63行目 drawSprites() パラメータを指定しない 場合、すべてのスプライ トがスケッチに描画され ます draw() ... if(ball.position.x<0) { ball.position.x = width/2; ball.position.y = height/2; ball.setSpeed(MAX_SPEED, 0); } if(ball.position.x>width) { ball.position.x = width/2; ball.position.y = height/2; ball.setSpeed(MAX_SPEED, 180); } drawSprites(); ...
64. カスタマイズしよう 64 assetsフォルダを追加し、自 分でつくったオリジナルキャ ラの画像をアップしよう ball01.png
65. カスタマイズしよう 65 ballをオリジナルキャラ に変更し、回転させます setup() ballに画像を指定する draw() ballを少しずつ回転させ る ... function setup() { ... ball.maxSpeed = MAX_SPEED; ball.addImage(loadImage('assets/ball01.png')); ... function draw() { ball.rotation -= 10; ball.bounce(wallTop); ...
66. カスタマイズしよう 66 背景色やpaddleの色を変 更したりして、オリジナ ルのPongをつくろう タイトルのつけると愛着 がわきます タイトル例； Go Hey ピンポン 他のサンプルやゲームも 試してみよう LEVEL UP
67. 67 p5.js の基本 オリジナルキャラをつくろう オリジナルキャラを動かそう オープンデータを使ってみよう つくったゲームをみんなで遊ぼう
68. オープンデータとは？ 68 • どんな目的のためでも誰もが自由に利用、再配布できるデータのこと • 人手を多くかけずにデータの二次利用を可能とするもの • 政府・自治体・研究機関・企業などが公開する統計資料・文献資料・ 科学的研究資料が多い • 図形や動画や音源などゲームに使えるデジタルコンテンツもある
69. ゲームに使えるオープンデータ 69 繊維の街を象徴する 素材。美しいパター ンはドット絵にも利 用可能です 写真オープンデータ CC BY テキスタイルマテリアルセンター http://133.6.221.19/photo/archives/2402
70. ゲームに使えるオープンデータ 70 経済産業省が運営す る日本の情景写真の オープンデータ とてもクオリティの 高い写真が多数ある FIND47 https://find47.jp
71. ゲームに使えるオープンデータ 71 国立国会図書館デジタルコレクション書誌情報 http://www.ndl.go.jp/jp/dlib/standards/opendataset/index.html 文献だけでなく歴史 的な音源も多数ある 日本的なサウンドに もいいかも
72. オープンデータ以外にも 72 RPGツクールMV コラボ素材ダウンロード http://opgame.jp/creators/material.php RPGツクールの素材 がダウンロードして 利用できます。規約 があるので注意が必 要です。
73. オープンデータ以外にも 73 YuMake Weather API https://www.yumake.jp/ 気象APIです。お天気 と組み合わせると ゲームに深みが増し そう。キックオフに 来てくれた佐藤さん の会社です。
74. 74 p5.js の基本 オリジナルキャラをつくろう オリジナルキャラを動かそう オープンデータを使ってみよう つくったゲームをみんなで遊ぼう
75. シェアしよう 75 保存してから File > Share
76. シェアしよう 76 Fullscreenのリンクを 共有してください ※共有方法は別途教えます
77. 77 参考資料
78. 78 p5.js https://p5js.org/ p5.play.js ライブラリ http://molleindustria.github.io/p5.play/ http://molleindustria.github.io/p5.play/examples/index.html どっとインストールp5.js入門 https://dotinstall.com/lessons/basic_p5js p5.jsで作るゲーム開発超入門！100行以内で「ブロック崩し」に挑戦してみる！ http://webhacck.net/archives/896790.html p5.jsでビジュアルコーディング https://qiita.com/minamooon/items/c2d65a18fd36be693139 Processingとは？ http://www.d-improvement.jp/learning/processing/class/about-processing.html Open Processing https://www.openprocessing.org/