中高生に向けてITとかWebのことについて色々教えてみたその5

こんにちは。なかじまです。

先日、共育プラザ一之江というところで中高生に向けてIT講座を行ってきました。

その講座中に使用したスライドの紹介記事の最終回、第5回目になります。

第1回目はこちら↓
中高生に向けてITとかWebのことについて色々教えてみた　その1
第2回目はこちら↓
中高生に向けてITとかWebのことについて色々教えてみた　その2
第3回目はこちら↓
中高生に向けてITとかWebのことについて色々教えてみた　その3
第4回目はこちら↓
中高生に向けてITとかWebのことについて色々教えてみた　その4

講座で使用したスライドの紹介

第5回目はスプライト画像に関して補足と、もう少し応用的な内容の学習です。

スライドは下記からどうぞ！

■ 第5回 IT講座ゲームを作ってみよう！実践編

第5回 IT講座ゲームを作ってみよう！実践編 from Shunya Komori

スライド内に登場する参考サイト

最終回はほぼパソコンに向かって作業してもらったので、スライドは少なめです。

参考になるWebページを見ながら作業するというのにも慣れてほしかったため、Webの記事に沿って講座を行いました。
わかりやすい記事がたくさんあって、ありがたかったです。

phina.jsのサンプルファイルに色々変更を加えてもらった

最終的にはこんな感じで

歩いているトマピコを飛ぶようにして、障害物を置いてみるというところまで作ってもらいました。

使用したソースコードは以下に。
phina.jsのexamples内05_walk_tomapiko.htmlに対して、追記していく形で作りました。

<!doctype html>

<html>
  <head>
    <meta charset='utf-8' />
    <title>Walk Tomapiko | phina.js</title>
  </head>
  <body>
  </body>
</html>


<script src='../build/phina.js'></script>
<script>

// グローバルに展開
phina.globalize();

// 定数
var ASSETS = {
  image: {
    bg: '../assets/images/flappy/background.png', // 背景画像の指定
    tomapiko: '../assets/images/character/buropiyo.png', // キャラクター画像の指定
  },
  // 画像の細かい動きが定義されているファイルの読み込み
  spritesheet: {
    character: '../assets/tmss/character.tmss',
  },
};
var SCREEN_WIDTH  = 960; // スクリーン幅
var SCREEN_HEIGHT = 640; // スクリーン高さ
var SPEED         = 4; // キャラクターの移動速度

/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',

  // 初期化
  init: function(options) {
    // super init
    this.superInit(options);

    // 背景
    this.bg = Sprite("bg").addChildTo(this); // 背景画像の追加
    this.bg.origin.set(0, 0); // 左上基準に変更

    // プレイヤー
    // this.player = Sprite('tomapiko', 64, 64).addChildTo(this);
    // 飛ぶ動作にあたり変更、プレイヤークラスを作成、読み込み
    this.player = Player().addChildTo(this);
    this.player.setPosition(480, 320); // キャラクターの表示位置
    this.player.frameIndex = 1; // スプライト画像の表示No

    // 図形を描画
    // 当たり判定で使うためグローバル変数にしている
    rect = RectangleShape({
        fill: 'green',
        stroke: '#fff',
        width: 50,
        height: 50
    }).addChildTo(this);
    rect.setPosition(this.gridX.center(5), this.gridY.center());
    // 移動の速度
    rect.speed = 15;

    // 図形を動かす
    rect.update = function() {
      this.y += this.speed;

      // 指定範囲からはみ出さないようにする
      if(this.top <= 0) {
        this.top = 0;
        this.speed *= -1;
      } else if(this.bottom >= 640) {
        this.bottom = 640;
        this.speed *= -1;
      }
    }

    // タッチしたら飛ぶ動作
    this.onpointstart = function() {
      this.player.fly();
    };

    // スコア用カウントアップ
    timer = 0;

  },

  // 更新
  update: function(app) {
    var p = app.pointer;

    if (p.getPointing()) { // クリックした時
      var diff = this.player.x - p.x; // キャラクターとクリックした位置との距離
      if (Math.abs(diff) > SPEED) { // キャラクターより右をクリックした場合
        // 右に移動
        if (diff < 0) {
          this.player.x += SPEED; // SPEED の分、キャラクターの位置に値を加える
          this.player.scaleX = 1; // 画像の向きと同じ向きにする
        }
        // 左に移動
        else { // キャラクターより左をクリックした場合
          // スピードで決めた値ずつ減らしていく
          this.player.x -= SPEED; // SPEED の分、キャラクターの位置から値を引く
          this.player.scaleX = -1; // 画像の向きと逆の向きにする
        }

        // フレームアニメーション
        if (app.frame % 4 === 0) { // 4フレームに一度処理を実行する
          // 2の場合は3を返して、そうでない場合は2を返す
          this.player.frameIndex = (this.player.frameIndex === 2) ? 3:2; // コマNoが2の場合コマNoを3に、そうでない場合コマNoを2にする
        }
      }
    }
    else { // クリックしていない時
      // 待機
      this.player.frameIndex = 1; // 待機状態の画像をコマNoで指定する
    }

    // カウントアップを行う
    timer += app.deltaTime;

    // 当たり判定
    if (this.player.hitTestElement(rect)) {
      rect.fill = 'red';
      // 結果画面へ遷移
      this.exit({
        // スコアを秒数に変更
        score: (Math.floor(timer / 1000)) + "秒",
      });
    } else {
      rect.fill = 'green';
    }
  }
});

// プレイヤークラス
phina.define('Player', {
  superClass: 'Sprite',

  init: function(index) {
    this.superInit('tomapiko');
    // スプライトシートの読み込み
    this.anim = FrameAnimation('character').attachTo(this);
    // スプライトシート内、飛ぶ動作を指定
    this.anim.gotoAndPlay('fly');

    // 自動で動く動作を指定
    // この場合はゆっくり下に落ちていく挙動
    // -をつけると反対に動く
    this.physical.gravity.set(0, 0.5);
  },

  fly: function() {
    // Physicalクラスを適用して移動
    this.physical.force(0, -8);
  },
});

/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    startLabel: 'main',   // MainScene から開始
    width: SCREEN_WIDTH,  // 画面幅
    height: SCREEN_HEIGHT,// 画面高さ
    assets: ASSETS,       // アセット読み込み
  });

  app.enableStats(); // frame 表示を表示する

  // 実行
  app.run();
});

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

<!doctype html>

<html>

<head>

<title>Walk Tomapiko | phina.js</title>

</head>

<body>

</body>

</html>

// グローバルに展開

phina.globalize();

// 定数

var ASSETS = {

image: {

bg: '../assets/images/flappy/background.png', // 背景画像の指定

tomapiko: '../assets/images/character/buropiyo.png', // キャラクター画像の指定

// 画像の細かい動きが定義されているファイルの読み込み

spritesheet: {

character: '../assets/tmss/character.tmss',

};

var SCREEN_WIDTH = 960; // スクリーン幅

var SCREEN_HEIGHT = 640; // スクリーン高さ

var SPEED = 4; // キャラクターの移動速度

* メインシーン

phina.define("MainScene", {

// 継承

superClass: 'DisplayScene',

// 初期化

init: function(options) {

// super init

this.superInit(options);

// 背景

this.bg = Sprite("bg").addChildTo(this); // 背景画像の追加

this.bg.origin.set(0, 0); // 左上基準に変更

// プレイヤー

// this.player = Sprite('tomapiko', 64, 64).addChildTo(this);

// 飛ぶ動作にあたり変更、プレイヤークラスを作成、読み込み

this.player = Player().addChildTo(this);

this.player.setPosition(480, 320); // キャラクターの表示位置

this.player.frameIndex = 1; // スプライト画像の表示No

// 図形を描画

// 当たり判定で使うためグローバル変数にしている

rect = RectangleShape({

fill: 'green',

stroke: '#fff',

width: 50,

height: 50

}).addChildTo(this);

rect.setPosition(this.gridX.center(5), this.gridY.center());

// 移動の速度

rect.speed = 15;

// 図形を動かす

rect.update = function() {

this.y += this.speed;

// 指定範囲からはみ出さないようにする

if(this.top <= 0) {

this.top = 0;

this.speed *= -1;

} else if(this.bottom >= 640) {

this.bottom = 640;

this.speed *= -1;

}

// タッチしたら飛ぶ動作

this.onpointstart = function() {

this.player.fly();

};

// スコア用カウントアップ

timer = 0;

// 更新

update: function(app) {

var p = app.pointer;

if (p.getPointing()) { // クリックした時

var diff = this.player.x - p.x; // キャラクターとクリックした位置との距離

if (Math.abs(diff) > SPEED) { // キャラクターより右をクリックした場合

// 右に移動

if (diff < 0) {

this.player.x += SPEED; // SPEED の分、キャラクターの位置に値を加える

this.player.scaleX = 1; // 画像の向きと同じ向きにする

}

// 左に移動

else { // キャラクターより左をクリックした場合

// スピードで決めた値ずつ減らしていく

this.player.x -= SPEED; // SPEED の分、キャラクターの位置から値を引く

this.player.scaleX = -1; // 画像の向きと逆の向きにする

}

// フレームアニメーション

if (app.frame % 4 === 0) { // 4フレームに一度処理を実行する

// 2の場合は3を返して、そうでない場合は2を返す

this.player.frameIndex = (this.player.frameIndex === 2) ? 3:2; // コマNoが2の場合コマNoを3に、そうでない場合コマNoを2にする

}

else { // クリックしていない時

// 待機

this.player.frameIndex = 1; // 待機状態の画像をコマNoで指定する

}

// カウントアップを行う

timer += app.deltaTime;

// 当たり判定

if (this.player.hitTestElement(rect)) {

rect.fill = 'red';

// 結果画面へ遷移

this.exit({

// スコアを秒数に変更

score: (Math.floor(timer / 1000)) + "秒",

});

} else {

rect.fill = 'green';

}

});

// プレイヤークラス

phina.define('Player', {

superClass: 'Sprite',

init: function(index) {

this.superInit('tomapiko');

// スプライトシートの読み込み

this.anim = FrameAnimation('character').attachTo(this);

// スプライトシート内、飛ぶ動作を指定

this.anim.gotoAndPlay('fly');

// 自動で動く動作を指定

// この場合はゆっくり下に落ちていく挙動

// -をつけると反対に動く

this.physical.gravity.set(0, 0.5);

fly: function() {

// Physicalクラスを適用して移動

this.physical.force(0, -8);

});

* メイン処理

phina.main(function() {

// アプリケーションを生成

var app = GameApp({

startLabel: 'main', // MainScene から開始

width: SCREEN_WIDTH, // 画面幅

height: SCREEN_HEIGHT,// 画面高さ

assets: ASSETS, // アセット読み込み

});

app.enableStats(); // frame 表示を表示する

// 実行

app.run();

});

</script>

「ゲーム」という形までは出来なかったのですが、講座内で学んだことを応用して、今後色々なものを作っていってほしいという気持ちで幕を閉じました。

感動のエンディング

最終回とのことで、参加してくれた子たちには修了証を用意して、お渡ししました！
なんだか卒業式みたいでこみ上げるものがありました……

最後、とある1人の子の課題がなかなか出来ず、居残ってもらって1時間近く格闘するという場面もありました。
デイブレイクの3人全員でウンウン悩み続けたのですが……

原因はちょっとしたスペルミスでした……

……遅くまで残ってもらってごめん……でも、こういうことは仕事でも本当に良くあることだから……
それ含めてのIT講座だったのかもしれない……

おわりに

今回、講師というものを初めてやらせてもらったんですが、
普段オフィスの中でパソコンに向かっているだけでは得られない色々な発見がありました。

「わからない相手に対して、どうやったらわかってもらえるのか、わかりやすく伝える工夫をする」という意識は中高生に対してだけではなく、何に対しても大切なことなのかなと感じました。

参加してくれた中高生をはじめ、共育プラザ一之江のみなさま、本当にありがとうございました！

この記事を書いた人
最新の記事

なかじま

中島宏美

駆け出しのWEBデザイナー/ライター。ジャンクフードをよく食べています。

中高生に向けてITとかWebのことについて色々教えてみた　その5

講座で使用したスライドの紹介

スライド内に登場する参考サイト

phina.jsのサンプルファイルに色々変更を加えてもらった

感動のエンディング

おわりに

なかじま

最新記事 by なかじま (全て見る)

この記事を見た人はこんな記事も見ています

この記事を見た人はこんな記事も見ています

最近の投稿

編集部オススメ記事!!

更新情報

講座で使用したスライドの紹介

スライド内に登場する参考サイト

phina.jsのサンプルファイルに色々変更を加えてもらった

感動のエンディング

おわりに

なかじま

最新記事 by なかじま (全て見る)

この記事を見た人はこんな記事も見ています

この記事を見た人はこんな記事も見ています

今月の人気記事

最近の投稿

タグクラウド

編集部オススメ記事!!

デイブレイク会社説明会のお知らせ

デイブレイクの研修制度をご紹介

【就活生向け】デイブレイクの会社紹介をしてみたいと思います！

更新情報