ウィーチャットゲームランキング
8518 ワード
おすすめ: 私のCSDN 私のブログ園 QQ群:704621321 一.デフォルトのランキングを呼び出す
まず、次のことを理解する必要があります.
1.シラサギ開発文書(オープンデータドメイン):http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html 2.微信小游戏开発ドキュメント(関系チェーンデータ):https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html 実装の核心機能はmain.tsにコードを追加することである(1)グローバル変数
(2)を追加してランキングボタンを定義し、ランキングリソース
(3)をロードしてボタンにリスニングイベント
main.tsのすべてのコードを追加します.
微信開発ツールでプレビュー効果:
この時、携帯電話でプレビューすると、key、name、scroesが表示するフォントがなくなったことがわかります.(携帯電話でフォントがデフォルトで白いのかもしれません)この場合、index.jsでフォントの色を変更する必要があります:
上記の手順では、基本的な呼び出しオープンデータドメインのランキング、ランキングの具体的なスタイルのみを実現し、実際の状況に応じて開発者ツールのindex.jsで修正調整することができます.最後に、公式ランキングdemoを添付し、参考にして勉強します.https://github.com/egret-labs/egret-target-wxgame
二.カスタムランキングの実装
もちろん、上のコードはデフォルトのランキングを簡単に呼び出しただけです.では、どのようにカスタマイズしたランキングを作りますか.この問題を研究するために、私はまた1週間の時間を費やして研究しました.その間、多くのランキングのコードを見て、やっと、間違いの中で飛び出しました.楽しかったです.私が直面した最大の問題:
という間違いを共有します.私はいくつかの人に聞いて、私に答えたのは資源の経路の問題あるいは存在しない原因で、しかしブロガーは数十回検査して問題がないことを発見して、ついに今日、私は自分がどんなに愚かであることを発見して、もとはloadコマンドを送っていないので、資源がロードしていないことを招いて、それによって現れた誤り、demoの実例を必要とする友达は左側をクリックして群を加えてダウンロードすることができます
まず、次のことを理解する必要があります.
1.シラサギ開発文書(オープンデータドメイン):http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/openDataContext/index.html 2.微信小游戏开発ドキュメント(関系チェーンデータ):https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html 実装の核心機能はmain.tsにコードを追加することである(1)グローバル変数
(2)を追加してランキングボタンを定義し、ランキングリソース(3)をロードしてボタンにリスニングイベント main.tsのすべてのコードを追加します.class Main extends eui.UILayer {
private bitmap: egret.Bitmap;
private isdisplay = false;
private rankBtn: eui.Button;
private rankingListMask: egret.Shape;
protected createChildren(): void {
super.createChildren();
egret.lifecycle.addLifecycleListener((context) => {
// custom lifecycle plugin
context.onUpdate = () => {
}
})
egret.lifecycle.onPause = () => {
egret.ticker.pause();
}
egret.lifecycle.onResume = () => {
egret.ticker.resume();
}
//inject the custom material parser
//
let assetAdapter = new AssetAdapter();
egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
this.runGame().catch(e => {
console.log(e);
})
}
private async runGame() {
await this.loadResource()
this.createGameScene();
// const result = await RES.getResAsync("description_json")
// this.startAnimation(result);
await platform.login();
await platform.showShareMenu();
const userInfo = await platform.getUserInfo();
console.log(userInfo);
// await platform.showShareMenu();
}
private async loadResource() {
try {
const loadingView = new LoadingUI();
this.stage.addChild(loadingView);
await RES.loadConfig("resource/default.res.json", "resource/");
await this.loadTheme();
await RES.loadGroup("preload", 0, loadingView);
this.stage.removeChild(loadingView);
}
catch (e) {
console.error(e);
}
}
private loadTheme() {
return new Promise((resolve, reject) => {
// load skin theme configuration file, you can manually modify the file. And replace the default skin.
// , 。 。
let theme = new eui.Theme("resource/default.thm.json", this.stage);
theme.addEventListener(eui.UIEvent.COMPLETE, () => {
resolve();
}, this);
})
}
/**
* name Bitmap 。name resources/resource.json 。
* Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
*/
private createBitmapByName(name: string): egret.Bitmap {
let result = new egret.Bitmap();
let texture: egret.Texture = RES.getRes(name);
result.texture = texture;
return result;
}
/**
* ，
* Description file loading is successful, start to play the animation
*/
private startAnimation(result: Array): void {
// let parser = new egret.HtmlTextParser();
// let textflowArr = result.map(text => parser.parse(text));
// let textfield = this.textfield;
// let count = -1;
// let change = () => {
// count++;
// if (count >= textflowArr.length) {
// count = 0;
// }
// let textFlow = textflowArr[count];
// //
// // Switch to described content
// textfield.textFlow = textFlow;
// let tw = egret.Tween.get(textfield);
// tw.to({ "alpha": 1 }, 200);
// tw.wait(2000);
// tw.to({ "alpha": 0 }, 200);
// tw.call(change, this);
// };
// change();
}
private textfield: egret.TextField;
/**
*
* Create scene interface
*/
protected createGameScene(): void {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
//
this.rankBtn = new eui.Button();
this.rankBtn.label = " ";
this.rankBtn.x = 260;
this.rankBtn.y = 750;
this.addChild(this.rankBtn);
this.rankBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickRankBtn, this);
//
const platform: any = window.platform;
platform.openDataContext.postMessage({
command: 'loadRes'
});
}
private onClickRankBtn() {
console.log(' btnClose ');
let platform: any = window.platform;
if (this.isdisplay) {
this.bitmap.parent && this.bitmap.parent.removeChild(this.bitmap);
this.rankingListMask.parent && this.rankingListMask.parent.removeChild(this.rankingListMask);
this.isdisplay = false;
platform.openDataContext.postMessage({
isDisplay: this.isdisplay,
text: 'hello',
year: (new Date()).getFullYear(),
command: "close"
});
} else {
// ， 。
this.rankingListMask = new egret.Shape();
this.rankingListMask.graphics.beginFill(0x000000, 1);
this.rankingListMask.graphics.drawRect(0, 0, this.stage.width, this.stage.height);
this.rankingListMask.graphics.endFill();
this.rankingListMask.alpha = 0.5;
this.rankingListMask.touchEnabled = true;
this.addChild(this.rankingListMask);
// ， 。
this.addChild(this.rankBtn);
//
this.bitmap = platform.openDataContext.createDisplayObject(null, this.stage.stageWidth, this.stage.stageHeight);
this.addChild(this.bitmap);
//
platform.openDataContext.postMessage({
isDisplay: this.isdisplay,
text: 'hello',
year: (new Date()).getFullYear(),
command: "open"
});
//
this.isdisplay = true;
}
}
}
微信開発ツールでプレビュー効果:
この時、携帯電話でプレビューすると、key、name、scroesが表示するフォントがなくなったことがわかります.(携帯電話でフォントがデフォルトで白いのかもしれません)この場合、index.jsでフォントの色を変更する必要があります:context.fillStyle="#FF0000";
上記の手順では、基本的な呼び出しオープンデータドメインのランキング、ランキングの具体的なスタイルのみを実現し、実際の状況に応じて開発者ツールのindex.jsで修正調整することができます.最後に、公式ランキングdemoを添付し、参考にして勉強します.https://github.com/egret-labs/egret-target-wxgame
二.カスタムランキングの実装
もちろん、上のコードはデフォルトのランキングを簡単に呼び出しただけです.では、どのようにカスタマイズしたランキングを作りますか.この問題を研究するために、私はまた1週間の時間を費やして研究しました.その間、多くのランキングのコードを見て、やっと、間違いの中で飛び出しました.楽しかったです.私が直面した最大の問題:
という間違いを共有します.私はいくつかの人に聞いて、私に答えたのは資源の経路の問題あるいは存在しない原因で、しかしブロガーは数十回検査して問題がないことを発見して、ついに今日、私は自分がどんなに愚かであることを発見して、もとはloadコマンドを送っていないので、資源がロードしていないことを招いて、それによって現れた誤り、demoの実例を必要とする友达は左側をクリックして群を加えてダウンロードすることができます