HTML5 - HTML5 2D遊戲引擎 Quintus

日期：
最近限量在研究如何寫一套遊戲，但遊戲領域實在太廣泛了，不僅有無數種遊戲類型，還要考慮運行平台，但我只想在最短的時間內快速完成一個遊戲，考慮到手機遊戲的盛行，於是限量決定用HTML5 + Javascript來寫一套遊戲，因為網頁遊戲可以跨Desktop與Phone，是一個不錯的選擇。接著進一步找現成的遊戲引擎，就找到這套Quintus，本篇文章就來介紹一下Quintus。

 Quintus是一套HTML5的遊戲引擎，主要由Javascript Library控制，主要的特點是它有實作繼承的特性，開發人員可以直接繼承Quintus提供的基本模組(角色模組, 2D模組, GameObject模組...等)，而且Quintus提供的基本模組就已經幫你實作了一些特性，譬如只要在initial時加入PlatformerControllers模組就已經幫你實作好馬力歐類型遊戲的移動跳躍的功能；如果繼承MovingSprite模組物件，就有加速度與速度的屬性，透過設定後，物件在一開始就會加速移動。另外，Quintus在撰寫上也非常方便，它可以使用像jQuery串接操作的模式，來快速開發。接著我們來看看Quintus提供的幾個Javascript Library：

  1. quintus.js：Quintus的核心模組，主要定義了Quintus遊戲引擎的架構與核心物件。
  2. quintus_input.js：定義了使用者從鍵盤或觸控螢幕的操作。
  3. quintus_sprites.js：定義了角色相關的基本模組。
  4. quintus_scenes.js：定義了場景相關的模組，在場景模組中可管理多個角色模組的instance。
  5. quintus_anim.js：定義了動畫的支援相關模組。


下面是限量研究Quintus範例與文件的測試程式，先看看Quintus執行後會是怎樣。

範例程式碼：
MyGame.html：
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <title>MyGame</title>

    <script src="~/Scripts/Quintus/lib/quintus.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_sprites.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_scenes.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_2d.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_touch.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_ui.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_anim.js"></script>
    <script src="~/Scripts/Quintus/lib/quintus_input.js"></script>

    <script src="~/Scripts/Quintus/custom/MyGame/mygame.js"></script>
</head>
<body>
</body>
</html>

mygame.js：
window.addEventListener("load", function () {
 var Q = window.Q = new Quintus({
  imagePath: "/Content/Quintus/MyGame2/images/",
  audioPath: "/Content/Quintus/MyGame2/audio/",
  dataPath: "/Content/Quintus/MyGame2/data/"
 }).include("Sprites, Scenes, Input, 2D, Anim, Touch, UI").setup({ maximize: true }).controls().touch();
 
 // 玩家角色
 Q.Sprite.extend("Player", {
  init: function (p) {
   this._super({
    sheet: "player",
    x: 300,
    y: 500
   });

   this.add("2d, platformerControls");
  },

  step: function () {

  }
 });

 // Insert背景與舞台, 角色
 Q.scene("level", function (stage) {
  stage.insert(new Q.Player());
  
  var landspace = new Q.Sprite({ x: 700, y: 700, w: 1000, h: 100 });
  landspace.draw = function (ctx) {
   ctx.fillStyle = '#000000';
   ctx.fillRect(-this.p.cx, -this.p.cy, this.p.w, this.p.h);
  };
  stage.insert(landspace);

  stage.add("viewport").follow(Q("Player").first());
 });

 // 載入圖檔資料
 Q.load("ball.png", function () {
  Q.sheet("player", "ball.png", { tilew: 173, tileh: 174 });
  Q.stageScene("level");
  Q.debug = true;
 });
});


執行結果：

上面的範例只是有點小試身手，如果要看更完整的可以看看這官網上的這個範例遊戲：
Quintus Example - Platformer Full

這篇文章只是簡單的介紹一下Quintus這套遊戲引擎，在往後有時間限量會來講解如何一步一步使用Quintus來開發一套簡單的遊戲。

參考來源：
Quintus JavaScript HTML Game Engine





留言

張貼留言