2018-10-30に更新

cocos2d-jsでccui.Buttonを使う

cocos2d-jsでccui.Buttonを使った。
これは何かというと、Cocos Studioで配置したボタンのために使われるクラス。
それをそのまま使ってしまう方法。

なぜそのような方法を使うかというと、
通常ボタンを使うためにはMenuItemを使うのだが、
タップを有効化することを考えるとScrollViewに入れる際に
どういった処理を書けばいいかわからない(調べるのも面倒)。
そのため、addTouchEventListenerでできてしまう
このクラスを使うと非常にプログラムが簡単になる。

|javascript|
var button = ccui.Button.create();
button.setTouchEnabled(true);
button.setScale9Enabled(true);
button.loadTextures('image.png', null, null);
button.setSize(cc.size(160, 150));
button.addTouchEventListener(this.onClick, this);
this.addChild(button);
||

setScale9EnabledとsetSizeでScale9も勝手にいい感じにしてくれた。

そもそも、本来であればCocos studioで作ったUIをそのまま使えばいいのだが、
なぜ今回ボタンのクラスを直接使おうかと思ったかというと
ボタンのみのUIだったのだがそれだけでも数十個画面上に追加すると
UIの作成の合計時間がかなり増えて画面が一瞬固まったようになってしまった。
(計測したら完全にUI作成の部分だけで時間がかかっていた)

大量に同じUIを配置するところはjsonをそのまま使わず
プログラムで書いた方が良さげ。
(ただし、時間は短縮できるが、やはりそれなりに時間はかかる)

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント