近期由於工作需要，開發了一系列H5小遊戲，最早以前使用原生的canvas開發了，但是開發效率比較低，雖然好多西可以靈活定義，比如濾鏡處理，漸變等。但是整體而言開發速度慢，很多時候滿足不了實際開發需要。後來逐漸接觸到國產的Layabox和國外的PIXI以及Phaser等框架，當然3d方面的有three.js 還有babylon這些都是比較常用的H5遊戲框架。而且這幾款框架都是比較容易上手的。鑑於跨平臺和手機的相容性問題，我一般使用Phaser和layabox，他們的相容性不錯。phaser的遊戲聲音模組做的不錯，相容大部分手機，而且遊戲結構方面許多東西都封裝的不錯，支援js與Ts，而且比較容易上手。Layabox內容涉及較廣2d和3d都支援，效能也不錯。phaser只能目前自支援2d遊戲，尚無3d支援。順便說一下，我是用的是PhaserCe,phaser3目前不斷更新完善中，有很多地方會出現相容性問題。但以後肯定會不錯的。當然了使用這兩個框架的原因是，用他們做的遊戲可以很方便的轉化為微信小遊戲。Laya可以直接開發微信小遊戲，phaser的話需要許多東西準備。推薦大家一個網站：“phaser小站”，很不錯的一個網站，大家有時間看看。之後一有時間我就會把遊戲開發中的心得寫出來，使之成為系列教程。

每個遊戲都會為大家使用LayaBox和Phaser兩個框架演示。使用語言是typescript。為何會使用typescript，而不直接使用js呢？原因是typescript開發效率會很高，除錯也簡單，結構清晰。最主要的是它自動轉換的js比我們自己寫的js不知優秀多少倍。所以配置一下開發環境，果斷用typescript吧！

作為第一篇先講一下螢幕適配問題。phaser使用的是裝置畫素，layabox使用的是物理畫素，簡單的說就是phaser遊戲中的圖片尺寸不能太大，否則需要縮放，但layabox的圖片使用大小取決於裝置的物理畫素。舉個例子

同樣的圖片寬度的圖片，在phaser和在layabox的區別如下。具體的畫素概念大家自己看吧！