Cocos2d JS螢幕適配

2021-07-06 03:32:41 字數 1420 閱讀 6779

有終端開發經驗的讀者應該對螢幕適配問題深感痛惡,因為這個世界實在有太多型別的手機和平板了,各種尺寸

首先,我們來認識三個術語:

cocos2d-js為我們提供的螢幕適配方法有如下幾種:

1.自適應拉伸cc.resolutionpolicy.exact_fit

該方案下,遊戲剛好鋪滿整個螢幕,但畫面的比例會失調。在main.js中:

cc.view

.setdesignresolutionsize(400, 450, cc.resolutionpolicy

.exact_fit);

在該模式下,winsize和visiblesize是相等的,可視起點就是原來設計的原點,即visibleorigin為(0,0)。

2.全顯示cc.resolutionpolicy.show_all

這種方案跟自適應拉伸類似,但遊戲畫面拉伸時會等比例進行。這個方案雖然保持了畫面的比例,但也帶來了缺陷,也就是導致畫面有黑邊。在main.js中設定:

cc.view

.setdesignresolutionsize(400, 450, cc.resolutionpolicy

.show_all);

該模式下,遊戲畫面會全顯示,且可視起點仍然為(0,0)

3.無黑邊cc.resolutionpolicy.no_border

在這個方案下,遊戲畫面會等比例拉伸,但跟全顯示不一樣的是,無黑邊方案會讓遊戲畫面的短邊剛好佔滿螢幕為準,此時相應的長邊將超出螢幕(兩側超出部分的長度一致)。在main.js中設定:

cc.view

.setdesignresolutionsize(400, 450, cc.resolutionpolicy

.no_border);

此種模式下,visiblesize就是螢幕的尺寸,而左下角是可視起點,但座標不是(0,0)。

遊戲畫面的座標起點(0,0)始終是設計尺寸的左下角座標。

注意:前面三個方案在實際應用中都不盡人意,所以cocos團隊後來推出了兩個方案,乙個是固定高度,乙個是固定寬度。

固定高度和固定寬度還做了乙個很大的變化–讓visibleorigin設定為0,也就是說,可視區域不再區中對齊,而是靠左或者下對齊。

4.固定高度cc.resolutionpolicy.fixed_height

固定高度,讓高度這一邊固定,讓另外一邊等比(高度縮放的比例)縮放。如果縮放後寬度大於裝置寬度,則多餘部分會不顯示;如果縮放後寬度小於裝置寬度,可能造成兩側出現黑邊。但是winsize和visiblesize值相同,寬高比例跟framesize一致。

5.固定寬度(與固定高度相似)

cocos2d js環境搭建

一 環境配置 1.安裝python2.7x版本 二 建立工程 mac版本 命令 setup.py 配置當前cocos2dx mac上的環境變數 windows版本 命令 cocos new 工程名 p 包名 l js cpp android d 工程儲存路徑 三 了解引擎或者工程的結構目錄 配置好基...

cocos2d JS 專案結構

初次建立並開啟乙個 cocos creator 專案後,您的專案資料夾將會包括以下結構 projectname 專案資料夾 assets library local settings temp project.json下面我們將會介紹每個資料夾的功能。assets將會用來放置您遊戲中所有本地資源 指...

cocos2d js 控制項 UIRichText

富文字型別 enum class type 建立richelementtext例項 param tag 標識 param color 字型色 param opacity 透明度 param text 文字內容 param fontname 字型 param fontsize 字型大小 return ...