MenuItemLabel

本文介绍了一个使用 Cocos2d-x 游戏引擎创建的示例项目,展示了如何在游戏层中使用不同类型的文本标签,包括标准文本标签、ttf 文本标签和 fnt 文本标签,并通过菜单项触发事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

#ifndef __CocoStudioAllKeyPoint__ThreeLayer__

#define __CocoStudioAllKeyPoint__ThreeLayer__

#include <iostream>

#include "cocos2d.h"

using namespace cocos2d;

class ThreeLayer:public Layer{

protected:

    virtual bool init();

public:

    CREATE_FUNC(ThreeLayer);

    static Scene * createScene();

    void onItemLabel(Ref * sender);

};

#endif /* defined(__CocoStudioAllKeyPoint__ThreeLayer__) */





#include "ThreeLayer.h"

bool ThreeLayer::init(){

    if (!Layer::init()) {

        return false;

    }

    //标准文本标签

    auto menuItemLabel1 = MenuItemLabel::create(Label::createWithSystemFont("wangziye", "Arial", 30), CC_CALLBACK_1(ThreeLayer::onItemLabel, this));

    

    //ttf 文本标签

    MenuItemLabel * menuItemLabel2 = MenuItemLabel::create(Label::createWithTTF("wangziye", "Marker Felt.ttf", 30),CC_CALLBACK_1(ThreeLayer::onItemLabel,this));

    

    //fnt 文本标签 ,字体文件名,要加入对应的 png 文件

    MenuItemLabel * menuItemLabel3 = MenuItemLabel::create(Label::createWithBMFont("bitmapFontTest3.fnt", "wangziye"), CC_CALLBACK_1(ThreeLayer::onItemLabel, this));

    

    Menu * menu = Menu::create(menuItemLabel1,menuItemLabel2,menuItemLabel3,NULL);

    menu->alignItemsHorizontallyWithPadding(200);

    this->addChild(menu);

    

    return true;

}

void ThreeLayer::onItemLabel(Ref * sender){

    

    

}

Scene * ThreeLayer::createScene(){

    auto scene = Scene::create();

    auto layer = ThreeLayer::create();

    scene->addChild(layer);

    return scene;

}


将设置页面美化成游玩扣分项目界面风格。设置项目主要是设置默认项目。项目过多时上下滑动。设置页面代码为:<template> <view class="setting"> <view class="section-title">设置</view> <view class="section"> <text class="subtitle">游玩项目:</text> <scroll-view scroll-y class="project-scroll"> <view class="project-list"> <view v-for="(item, index) in projects" :key="index" class="project-item"> <text class="project-name">{{ item.name }}</text> <text class="project-price">{{ item.price }}币</text> </view> </view> </scroll-view> </view> <button class="confirm-btn" @click="saveSettings">确认</button> </view> </template> <script> export default { data() { return { projects: [ { id: 1, name: '漫游巴黎', price: 58 }, { id: 2, name: '摇摇乐', price: 58 }, { id: 3, name: '牛仔很忙', price: 38 }, { id: 4, name: '风车蹦床', price: 58 }, { id: 5, name: '无动力乐园', price: 58 }, { id: 6, name: '太空探险', price: 68 }, { id: 7, name: '水上乐园', price: 78 } ] } }, methods: { saveSettings() { uni.showToast({ title: '设置已保存', icon: 'success' }); uni.navigateBack(); } } } </script> <style scoped> .setting { padding: 30rpx; } .section-title { font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; } .section { margin-bottom: 60rpx; } .subtitle { font-size: 32rpx; margin-bottom: 20rpx; display: block; } .project-scroll { height: 800rpx; } .project-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30rpx; } .project-item { background-color: #f0f0f0; border-radius: 16rpx; padding: 30rpx; text-align: center; } .project-name { display: block; font-size: 32rpx; margin-bottom: 10rpx; } .project-price { font-size: 28rpx; color: #ff3b30; } .confirm-btn { position: fixed; bottom: 80rpx; left: 40rpx; right: 40rpx; height: 90rpx; background-color: #007AFF; color: white; font-size: 36rpx; border-radius: 10rpx; } </style>游玩扣分界面代码为:<template> <view class="play-fee"> <view class="header"> <text class="title">游玩扣费</text> <uni-icons type="help" size="22" color="#999" /> </view> <view class="card"> <text class="card-title">选择游玩项目</text> <scroll-view scroll-x class="project-scroll"> <view class="project-list"> <view v-for="(item, index) in projects" :key="index" :class="['project-item', { 'active': item.id === selectedProject.id }]" @click="selectProject(item)"> <text class="project-name">{{ item.name }}</text> <text class="project-price">{{ item.price }}币</text> </view> </view> </scroll-view> </view> <view class="card"> <view class="default-section"> <checkbox-group @change="toggleDefault"> <label class="checkbox-label"> <checkbox :checked="isDefault" color="#007AFF" /> <text>游玩项目设为默认扣费项目</text> </label> </checkbox-group> </view> <view class="count-section"> <text class="section-title">扣费次数:</text> <view class="count-selector"> <button v-for="count in countOptions" :key="count.value" :class="['count-btn', { 'active': count.value === selectedCount }]" @click="selectCount(count.value)"> {{ count.label }} </button> </view> </view> </view> <view class="total-card"> <text class="total-text">扣值数量:</text> <text class="total-amount">{{ selectedProject.price }} × {{ selectedCount }} = {{ selectedProject.price * selectedCount }} 币</text> </view> <view class="card"> <view class="input-section"> <uni-icons type="search" size="22" color="#999" class="search-icon" /> <input class="member-input" placeholder="请输入卡号/手机号/会员号" /> <button class="fee-btn" @click="handleFee">扣费</button> </view> <view class="action-buttons"> <button class="action-btn scan-btn" @click="handleScan"> <uni-icons type="scan" size="22" color="#007AFF" /> <text>扫描会员码</text> </button> <button class="action-btn read-card-btn" @click="handleReadCard"> <uni-icons type="card" size="22" color="#007AFF" /> <text>读卡</text> </button> </view> </view> </view> </template> <script> export default { data() { return { projects: [{ id: 1, name: '牛仔很忙', price: 38 }, { id: 2, name: '漫游巴黎', price: 58 }, { id: 3, name: '摇摇乐', price: 58 }, { id: 4, name: '风车蹦床', price: 58 }, { id: 5, name: '风车蹦床', price: 60 }, { id: 6, name: '风车蹦床', price: 61 }, { id: 7, name: '风车蹦床', price: 77 } ], selectedProject: { id: 1, name: '牛仔很忙', price: 38 }, countOptions: [{ label: '1次', value: 1 }, { label: '2次', value: 2 }, { label: '3次', value: 3 }, { label: '自定义', value: 'custom' } ], selectedCount: 1, isDefault: false } }, methods: { selectProject(project) { this.selectedProject = project; }, selectCount(count) { this.selectedCount = count; }, toggleDefault(e) { this.isDefault = e.detail.value.length > 0; }, handleFee() { uni.showToast({ title: '扣费成功', icon: 'success' }); }, handleScan() { uni.scanCode({ success: (res) => { console.log('扫描结果:', res.result); } }); }, handleReadCard() { uni.showToast({ title: '读卡功能', icon: 'none' }); } } } </script> <style scoped> .play-fee { padding: 30rpx; background: #f8fcff; min-height: 100vh; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40rpx; } .title { font-size: 46rpx; font-weight: bold; color: #333; } .card { background: #fff; border-radius: 24rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03); } .card-title { font-size: 34rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; display: block; } .project-scroll { height: 180rpx; } .project-list { display: flex; } .project-item { width: 240rpx; height: 160rpx; background: #f8f9ff; border-radius: 20rpx; text-align: center; margin-right: 25rpx; border: 2rpx solid #f0f0f0; transition: all 0.3s; } .project-item.active { width: 200rpx; background: linear-gradient(to right, #e6f7ff, #d1eeff); border-color: #b3e0ff; transform: translateY(-5rpx); box-shadow: 0 10rpx 20rpx rgba(0, 122, 255, 0.1); } .project-name { margin-top: 20rpx; width: 200rpx; display: block; font-size: 32rpx; margin-bottom: 15rpx; color: #333; } .project-price { font-size: 30rpx; font-weight: bold; color: #ff6b6b; } .default-section { margin-bottom: 40rpx; font-size: 32rpx; } .checkbox-label { display: flex; align-items: center; } .count-section { margin-top: 20rpx; } .section-title { font-size: 34rpx; font-weight: 500; margin-bottom: 30rpx; display: block; color: #333; } .count-selector { display: flex; gap: 20rpx; } .count-btn { flex: 1; height: 80rpx; font-size: 25rpx; background: #f8f9ff; border-radius: 12rpx; display: flex; justify-content: center; align-items: center; border: 2rpx solid #f0f0f0; color: #666; } .count-btn.active { background: linear-gradient(to right, #007AFF, #00a8ff); color: white; border-color: #007AFF; box-shadow: 0 6rpx 12rpx rgba(0, 122, 255, 0.2); } .total-card { background: linear-gradient(to right, #007AFF, #00a8ff); border-radius: 24rpx; padding: 40rpx 30rpx; margin-bottom: 30rpx; box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.2); } .total-text { font-size: 34rpx; color: rgba(255, 255, 255, 0.9); display: block; margin-bottom: 15rpx; } .total-amount { font-size: 46rpx; font-weight: bold; color: white; } .input-section { display: flex; align-items: center; position: relative; margin-bottom: 40rpx; } .search-icon { position: absolute; left: 25rpx; z-index: 2; } .member-input { flex: 1; height: 100rpx; background: #f8f9ff; border-radius: 16rpx; padding: 0 30rpx 0 70rpx; font-size: 32rpx; border: 2rpx solid #f0f0f0; } .fee-btn { width: 180rpx; height: 100rpx; background: linear-gradient(to right, #ff6b6b, #ff8e8e); color: white; font-size: 34rpx; border-radius: 16rpx; margin-left: 20rpx; box-shadow: 0 6rpx 12rpx rgba(255, 107, 107, 0.2); border: none; } .action-buttons { display: flex; gap: 30rpx; } .action-btn { flex: 1; height: 100rpx; background: #f8f9ff; color: #007AFF; font-size: 32rpx; border-radius: 16rpx; display: flex; justify-content: center; align-items: center; border: 2rpx solid #e6f7ff; } .action-btn text { margin-left: 15rpx; } </style>
最新发布
07-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值