Phaser 環境設定(Asp.Net MVC5 - Typescript - Visual Studio 2015)
建立一個新的 ASP.Net 專案:
選擇空模板:
在根資料夾中新增兩個新資料夾:App
和 Scripts
:
在根資料夾中新增 npm
配置檔案:
{
"version": "1.0.0",
"name": "phaser.js.environment.setup",
"private": true,
"devDependencies": {
"gulp": "3.9.1",
"phaser": "2.6.2"
}
}
在根資料夾中新增 gulp
配置檔案:
在 Scripts
檔案夾中新增 typings
檔案夾:
Gulp 任務:
/// <binding ProjectOpened='install' />
var gulp = require('gulp');
gulp.task('phaser-setup-typings', function () {
gulp.src([
'./node_modules/phaser/typescript/pixi.d.ts',
'./node_modules/phaser/typescript/p2.d.ts',
'./node_modules/phaser/typescript/phaser.d.ts',
])
.pipe(gulp.dest('./Scripts/typings'));
});
gulp.task('phaser-setup', function () {
gulp.src([
'./node_modules/phaser/build/phaser.min.js',
])
.pipe(gulp.dest('./Scripts/'));
});
gulp.task('install', ['phaser-setup-typings', 'phaser-setup']);
執行安裝任務:
在 App
資料夾中新增 typescript 檔案:
using System.Web.Mvc;
namespace PhaserSetUp.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
Install-Package Microsoft.AspNet.Web.Optimization
將 BundleConfig.cs
類新增到 App_Start
資料夾中:
using System.Web.Optimization;
namespace PhaserSetUp.App_Start
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/App/app.js"));
}
}
}
編輯 Global.asax
using System;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Http;
namespace PhaserSetUp
{
public class Global : HttpApplication
{
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
新增檢視:
@using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
<script src="../../Scripts/phaser.min.js"></script>
@Scripts.Render("~/bundles/app")
</body>
</html>