Copyright © 2013 / HITOKUSE Inc
Smart Canvasで作るカジュアルゲーム
勉強会
２０１３年７月

Copyright © 2013 / HITOKUSE Inc
株式会社ヒトクセ
ITの力を駆使して、
人々の生活に新しい体験を生み出す。
「体験をデザインする」ことで日常に溶け込み、人々の「癖」になるような
サービスをヒトクセあるメンバーとプランで実現します。

Copyright © 2013 / HITOKUSE Inc
講師紹介
朱 静儀
ゲームクリエイター/
プロデューサー
2008.4 来日
2012.2 株式会社ペーパーボーヤ
2013.1 株式会社ヒトクセ
2013.3 早稲田大学教育学部数学科 卒業
経歴 実績
2012.2 株式会社ペーパーボーヤ
2012.12 AP COMMUNICATIONS サンタソン 優秀賞
2013.1 NTTレゾナントChallengers ハッカソン 優勝
2013.1 株式会社ヒトクセ
2013.3 京都まゆまろ杯 スマホアプリコンテスト
準優勝、ドリコム賞

Copyright © 2013 / HITOKUSE Inc
「プログラミング無しでWebアプリを作成」
スマートフォンWebアプリ
作成ツール
http://smartcanvas.net/

Copyright © 2013 / HITOKUSE Inc
トレモ郎の紹介
トレモ郎のおはなしがスマホで楽しめるよ！
http://smart4me.net/tolemo/
トレモ郎は、ゲームが大好きで、いつもiPhoneで一人で遊んでいます。
青い生き物は にもの といいます。色んな種類（色）の にもの がいます。

Copyright © 2013 / HITOKUSE Inc
今日作るゲームの紹介
http://smartcanvas.net/user/329/expose/773
トラップタップハンティング
∼トレモ郎救出編∼
檻に閉じ込められたトレモ郎を
救出せよ！

勉強会参加者限定素材配布

Copyright © 2013 / HITOKUSE Inc
まずは登録
①ブラウザでhttp://smartcanvas.net
にアクセス
※是非「いいね」してください
②会員登録

Copyright © 2013 / HITOKUSE Inc
新規作成
①マイページの「新規作成」ボタンを押して、
新しいアプリを作る

Copyright © 2013 / HITOKUSE Inc
トレモ郎素材をゲット！①
①コンテストページhttp://cts.sc/to にアクセス
②エントリー！！※エントリーしないと素材もらえませんよ！
③コンテスト限定素材申請
http://bit.ly/19tVws4 にアクセス

Copyright © 2013 / HITOKUSE Inc
トレモ郎素材をゲット！②
①コンテスト事務局からメールを確認
②リンクhttp://smartcanvas.net/items にアクセス
③秘密のパスワードを入力

Copyright © 2013 / HITOKUSE Inc
制作ツールページを更新
① 制作ツールページを更新
②キャンペーンアイテムが追加されることを確認

Copyright © 2013 / HITOKUSE Inc
ページのサイズを変更
① 「サイズ」ボタンを押す
②プリセット「iPhone ~4S Safari 320×416」に変更
※プリセットは必ず設定してください。

Copyright © 2013 / HITOKUSE Inc
画像アップロード
① 「画像アップロード」ボタンをタップ
②title_bg.pngを追加

Copyright © 2013 / HITOKUSE Inc
プロパティを設置
①プロパティを以下のように設定
横幅 320px 高さ 416px
x座標 0px y座標 0px
角度 0.0度

Copyright © 2013 / HITOKUSE Inc
プレビュー
プレビュー！！
画像が表示された！

Copyright © 2013 / HITOKUSE Inc
さらに画像アップロード
①title_tolemorou.pngを追加
②プロパティを以下のように設定

Copyright © 2013 / HITOKUSE Inc
ページ追加
①ページ追加
②プリセット「iPhone ~4S Safari 320×416」に変更
③bg.pngを追加
④プロパティを設定
⑤トレモ郎画像追加

Copyright © 2013 / HITOKUSE Inc
編集ページを変える
①「全体モード」ボタンを押す
②「ページ１」を押す

Copyright © 2013 / HITOKUSE Inc
図形を追加
①基本アイテム→図形を追加
②スタートボタンの上に配置

Copyright © 2013 / HITOKUSE Inc
リンクを設定、透明度を変更
①図形を選択
②リンクをページ２に指定
③透明度を０にする

Copyright © 2013 / HITOKUSE Inc
プレビュー
プレビュー！！
シーン遷移が出来た！

Copyright © 2013 / HITOKUSE Inc
アイテム名前を修正
①アイテムをタップ
②名前を修正

Copyright © 2013 / HITOKUSE Inc
アニメーション①
①「アニメーション」タブをタップ
②「アニメーション作成」ボタンをタップ

Copyright © 2013 / HITOKUSE Inc
アニメーション②
①詳細を以下のように設定、作成ボタンを押す
②title_tolemorouの透明度を０にする

Copyright © 2013 / HITOKUSE Inc
プレビュー
プレビュー！！
アニメーションが出来た！

Copyright © 2013 / HITOKUSE Inc
ページの名前を修正
①ページ２の名前を「level01」に修正

Copyright © 2013 / HITOKUSE Inc
檻を追加
①ori.pngを追加
②「ori」に名前変更
③プロパティを変更

Copyright © 2013 / HITOKUSE Inc
アニメーション作成
①以下のようにアニメーションを作成

Copyright © 2013 / HITOKUSE Inc
プレビュー
プレビュー！！
檻が動いた！！

Copyright © 2013 / HITOKUSE Inc
ゲームクリア画面を作る
①ページ追加
②gameclear画面を作る
③リンクをタイトル画面
に指定

Copyright © 2013 / HITOKUSE Inc
ゲームオーバー画面を作る
①ページ追加
②gameover画面を作る
③リンクをタイトル画面
に指定

Copyright © 2013 / HITOKUSE Inc
リンク先を設定
①檻のリンク先を「gameover」に設定
②トレモ郎のリンク先を「gameclear」に設定

Copyright © 2013 / HITOKUSE Inc
プレビュー
プレビュー！！
ゲームが出来た！！

Copyright © 2013 / HITOKUSE Inc
チャレンジ！！
ステージとアニメーションを増やせば
「トラップタップハンティング」が作れる！
http://smartcanvas.net/user/21/expose/665

Copyright © 2013 / HITOKUSE Inc
公開①
①マイページにアクセス
②公開設定ボタンを押す

Copyright © 2013 / HITOKUSE Inc
公開②
①「全て公開する」に変更

Copyright © 2013 / HITOKUSE Inc
公開③
①アプリのリンクが表示される！
②リンクを友達に教えてたり、シェアしてみよう！

Copyright © 2013 / HITOKUSE Inc
アプリ情報変更①
①設定ボタンを押す

Copyright © 2013 / HITOKUSE Inc
①アプリの情報が変更出来る！
アプリ情報変更②

Copyright © 2013 / HITOKUSE Inc
①アプリの情報が更新された！
アプリ情報変更③

是非面白いアプリをいっぱい作って下さい！
本日はありがとうございました！