トップページ

このブログについて

全記事一覧(新着順)

テーマ別記事案内

短期間ゲーム制作講座


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【超初心者さん向け】人は一日という短期間でゲーム制作ができるのか。【まずは雛型を作ってみる】


<下準備編>
【超初心者さん向け】人は一日という短期間でゲーム制作ができるのか。【まずは雛型を作ってみる】
【超初心者さん向け】短期間で制作するゲーム・準備編1【基本の変数とログ出力と計算とランダム】
【超初心者さん向け】短期間で制作するゲーム・準備編2【図形とラベルとボタンの表示方法】
【超初心者さん向け】短期間で制作するゲーム・準備編3(LAST)【条件分岐と繰り返しと配列とクラス】

<計画編>
もぐらたたき風サークルタッチゲーム

<実践編>
【超初心者さん向け】1日で作るサークルタッチゲーム・1【画面部品の設置とアニメーション】
【超初心者さん向け】1日で作るサークルタッチゲーム・2【残り時間を計る・時間経過でまるを湧かせる】
【超初心者さん向け】1日で作るサークルタッチゲーム・3【リザルト画面を作成する・ツイートボタン】
【超初心者さん向け】1日で作るサークルタッチゲーム・4(LAST)【ハイスコアを記録&読み込んで表示する】

<サンプル>
【第1段】サークルタッチゲームのサンプルができました【スマホでも遊べます】

<その他>
簡易電卓作ってます・とりあえず画面だけ
簡易電卓できました【JavaScript+tmlib】



20140711.png


扇風機だけでは厳しい季節になりました、もうすぐ夏休みですね。
夏休みといえば一念発起して休暇中にゲームを一本作りたくなる季節です。
少なくとも私はそうでした。あの頃はやり方が全く分からなくて
ノートに妄想を描くことしかできませんでしたが……

もっと早くゲームの作り方を知っていたら今頃はもっと何か
できていたかもしれないのにと思うことがあります。
なので同じく夏なのでゲームを作ってみたい!けど良くわからないからできない!
という方の参考になれば幸いと、短時間で作れそうなゲームの計画をいくつか立てて、
実際に作ってみたいと思います。解説も交えて。


※……と思っていたのですが、下準備と解説etcで思ったより文章が長くなったので
今回は計画を立てるまで到達していません、良い子の皆様は雛型を作って次の更新をお待ちください。



1からゲーム制作をするのに必要なものなども併せて紹介します。


<ご注意事項>

※この計画を立てる時間は制作時間に含まれません。読むのは30分もかからないと思います。
※1日は24時間です。刻んで作って合計24時間でもOKということで。
※今回の下準備は2時間かかることとします。なので残り時間は22時間とします。
※これを書いているのも初心者です。こんなものが今まで完成したものです。うーんとっても初心者。
※JavaScriptという言語とtmlibという素敵ライブラリを使用します。
 他言語と違いコードが丸見えになるのでそれが嫌だと思う方にはおすすめしません。
※後日実際に計画の通りに作成してみる予定です。出来が心配な方はそれを待ってから判断してみて下さい。
※CGや文章は特別な事情がない限り制作しない前提です。ゲームのプログラム部分としての制作時間です。


↑上記の設定で作れそうなゲームとその計画表を作っていきたいと思います。
 これでも良いという方は続きをご覧ください。



<必要なもの>

●テキストエディタ
 (メモ帳でもOK。お金があればSublime Text、余裕がなければ無料のサクラエディタがおすすめです)
●ブラウザ(FireFoxかChromeをご利用ください)
 ※追記:IEだと不都合なことがありましたので修正させていただきました
●雛型ファイル(後述します)
●やる気と時間1日分


これだけあれば良いんじゃないかと思います。安心安全の無料で始められます。
グラフィックやシナリオや音楽制作ができる方はお好みで追加して下さい。

で、雛型ファイルですがJavaScriptなのでhtmlファイルが必要です。
まずindex.htmlというファイルを作成して下さい。
.htmlなどのファイルはテキストエディタでそのままファイル名.htmlと入力すれば作れます。

そのファイルをそのままダブルクリックするとブラウザが起動してしまうので
編集したいときはエディタにドラッグするか右クリックのプログラムから開くで編集して下さい。
→index.html.txtとかなる方はフォルダーオプションで拡張子の表示をすると.htmlで保存できます。

そして以下をコピペして新規フォルダに保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
    <title>ゲームタイトル</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" href="style.css">	
    <script src= "http://rawgithub.com/phi-jp/tmlib.js/0.2.0/build/tmlib.js"></script>
    <script src="main.js"></script>
</head>
<body>
<div align="center">
	<canvas id="world">
</div>
</body>
</html>


次にcssファイルも一応用意します。
style.cssという名前のファイルを作成し、index.htmlと同じフォルダに保存して下さい。
body {
    background-color:#000000;    
}


最後に肝心のJavaScriptファイルです。
main.jsという名前のファイルを制作して下さい。
//********************************************************
//*
//*    <main.js>
//*
//********************************************************
//定数の定義
var SCREEN_WIDTH    = 320;              // スクリーン幅
var SCREEN_HEIGHT   = 480;              // スクリーン高さ
var SCREEN_CENTER_X = SCREEN_WIDTH/2;   // スクリーン幅の半分
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;  // スクリーン高さの半分

//------------------------------------------
//
//  main
//
//------------------------------------------
tm.main(function() {
    var app = tm.display.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    app.fitWindow();
    
    app.replaceScene(TitleScene());
    
    app.run();
});

//------------------------------------------
//
//  TitleScene
//
//------------------------------------------
tm.define("TitleScene", {
    superClass : "tm.app.TitleScene",   
    init : function() {
        this.superInit({
            title :  "ゲームタイトル",
            width:SCREEN_WIDTH,
            height:SCREEN_HEIGHT,
        });
        //画面をタッチした時の処理
        this.addEventListener("pointingend", function(e) {
            // シーンの遷移
            e.app.replaceScene(GameScene());
        });
    }
});

//------------------------------------------
//
//  GameScene
//
//------------------------------------------
tm.define("GameScene", {
    superClass: "tm.app.Scene",
    
    init: function() {
        this.superInit();
    },
});


フォルダの状況はこんな感じになりました。


20140711_1.png


これでindex.htmlファイルを任意のブラウザで開く
(Windowsの場合、IE以外は右クリック→プログラムから開くで好きなものが選べます)と
こんな画面が表示されるかと思います。


20140711_2.png


それをクリックするとこんな感じに。


20140711_3.png


この何もない真っ黒な画面がゲーム画面になります。
ならなければ状況を教えて下さると何とかできるかと思います。
画面サイズはとりあえずスマホにも合わせて320×480にしています。ゲームごとに変更があるかもしれません。


今後はこのファイル群をフォルダごとコピーして
(右クリックでコピー→適当なところに右クリック→貼りつけ、さらに右クリックで名称変更)
1ゲームごとのファイルとして作成していきます。


index.htmlとmain.jsの『ゲームタイトル』の部分もゲームごとに適宜変更して下さい。



では今回はここで終了です、お疲れさまでした!
まだ真っ黒画面しかないですが、本当に初心者な方はここまででも一苦労するかと思います。
.htmlだとか.jsだとかの見たことのない拡張子を見るだけでちょっとクラクラしますよね。


今回のぶんを2時間として、残り22時間で作れそうなゲームを計画&作っていきましょう!
あ、少しいじってみたい方はmain.jsの35行目title : "ゲームタイトル",の "ゲームタイトル"を
好きな言葉に変えるとそれに変わります、ぜひ試してみて下さい(`・ω・´)


関連記事
このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント


LINEスタンプ

LINEスタンプ承認されました

スポンサーリンク

このブログについて


★全記事一覧★

人気記事

人気ブログランキング



おかげ様で1位なことがあります。
ありがとうございます!

良い感じのペンタブ



Intuoscomicを使用しています 使い易いです。
替え芯やCLIP STUDIO、Pixiaなど絵を描く専用のソフトも数種付属しています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。