ZKX'S Blogs
  • ZKX'S BLOG
  • action
    • p01-todo-list
    • p2-daily
    • p3-remain-todo
    • road-map
    • temp
  • 游戏技术
    • 物理
    • algorithm
      • obstacle-avoidance
      • path-finding
    • Assets
      • 解包资源
      • Sound
      • text
      • 动画
      • image
        • image-tools
        • maple-story
        • 项目图
        • SD
        • AI
          • ai-model
          • Novel ai
          • transformer
          • ComfyUI
            • start
          • sd
            • four-view
            • image-assets
            • icon
              • working-flow
            • tutorials
              • introduction
              • model-traning
        • ui
          • ui-todo
          • work
          • ui-tutorials
            • 一颗豆Studio
            • image-process
              • 8-minute
              • 1. 现代图形绘制流水导论
            • xiao-long-bao
              • game-ui
              • ps-skill
      • model
        • Houdini
        • Blender
          • animation
          • 配合 Unity 建模流程
          • common-use
          • Blender 配置
          • plugins
          • Words
          • tutorials
            • Imphenzia
            • blender-4.0
              • 建模篇
              • 10. role-anim
              • 11. room-anim
              • 2. lighting
              • 3. material
              • 场景动画
              • 5. item-animation
              • 6. engrave
              • 7. role
              • 8. face
              • 9. bone
      • vfx
        • vfx-assets
        • vfx
      • 视频录制
    • README_冲突文件_zkx_20240828215908
      • 计算机科学
      • 代码写法
        • functional-programming
        • programing-driven
      • data-structure
        • tree
      • multi-threads
        • consistent-hash
        • I/O 多路复用
        • reactor-proactor
        • zero-copy
      • 操作系统
        • cpu-cache_冲突文件_zkx_20240828215908
        • soa_冲突文件_zkx_20240828215908
        • memory
          • memory-allocation
          • memory-recycle_冲突文件_zkx_20240828215908
          • 预读机制
          • virtual-memory_冲突文件_zkx_20240828215908
        • 进程线程
          • base_冲突文件_zkx_20240828215908
          • communicate_冲突文件_zkx_20240828215908
    • 笔记
      • Bevy 引擎研究
      • render-pass
      • usd
      • Interview
      • breaking
        • multi-threads
      • GPU
        • multi-threads
        • DirectX 12 3D 游戏开发实战
        • Analyze
        • vulkan
          • Vulkan 应用
          • Vulkan 坐标系
          • Vulkan 创建 CubeMap
          • 渲染器流程
          • Vulkan 对象
          • vulkan-learn
            • Vulkan tutorials
              • Comparison of graphics apis
              • Official Vulkan Tutorial
              • brendan-galea
                • Vulkan Game Enggine
              • Vulkan-lecture-series
                • Vulkan Essentials
                • Swap chain
                • 03. Resources & Descriptors
                • Commands and Command Buffers
                • pipeline and stages
                • 07-synchronization_冲突文件_zkx_20240828215915
      • projects
        • fbx
        • 动画
          • animation-graphs_冲突文件_zkx_20240828215918
          • animation-programming-basics_冲突文件_zkx_20240828215918
          • README_冲突文件_zkx_20240828215918
            • 1. Intro to Physics-Based Animation_冲突文件_zkx_20240828215918
            • Vector
            • 3. Rigid body dynamic_冲突文件_zkx_20240828215918
            • 4.Rigid Contacts_冲突文件_zkx_20240828215918
            • 5.Cloth Simulation_冲突文件_zkx_20240828215918
          • arm
            • 1. Introduction to Character Animation_冲突文件_zkx_20240828215918
          • 程序动画
            • 程序动画
        • GLTF
          • 皮肤
        • 网格生成
          • Mesh Gen
          • 网格
          • 程序化地形
          • games-202-几何建模和处理
            • 1. 课程介绍
            • 2. 数据拟合
      • 渲染
        • 渲染器
        • 管线和引擎
          • 颜色空间
          • 法线映射
          • Render Graph
          • 渲染管线
        • 游戏引擎
          • font
          • gpu-instance
          • 光照纹理
          • 光线追踪
          • 蒙皮动画
          • Skybox
          • 文字
          • texture-compress
          • UI
          • view-port-mode_冲突文件_zkx_20240828215919
          • 虚拟纹理
        • performance
          • HLOD
          • tools
        • controller
          • 2d 后处理和光照
          • 抗锯齿
          • buffer
          • 延时渲染
          • hclip
          • 后处理
          • 阴影
          • transparency
          • culling
            • Culling
            • hiz
        • 技术美术
          • 艺术表达
            • 各向异性
            • 一些特效
            • 非真实感渲染(卡通渲染)
            • Outline
            • 次表面散射
            • Tone Mapping
          • Filament 渲染器里的算法
            • 2 Overview
            • Notation
            • 4 Material System
            • 5. Lighting
          • 自然模拟
            • BRDF
            • 全局光照 GI
            • 光照
            • 物理真实的渲染
            • Blogs
            • 反射
            • UE 中的物理光照系统
            • 体渲染
            • water
            • 天气系统
        • 渲染教程
          • apex-legends-mobile
          • Shader 入门精要笔记
          • 庄懂-美术向 TA 课程
          • games-202
            • Introduction and Overview
            • Real-Time Physically-Based Materials
            • real-time-physically-based-materials-2
            • 实时光线追踪 1
            • 实时光线追踪 2
            • A Glimpse of Industrial Solusion
            • 2. Recap of CG Basics
            • Real time Shadows 1
            • Real time shadows 2
            • 实时环境光 上
            • 实时环境光 下
            • 实时全局光照 1
            • 实时全局光照 2
            • Realtime global illumination 3
      • 渲染笔记
      • tutorials
        • mobile-optimize
        • modern-mobile-rendering-note
        • README_冲突文件_zkx_20240828215908
          • 7. 游戏循环及实时模拟_冲突文件_zkx_20240828215908
          • multi-threads
          • multi-threads
          • 12. 碰撞和刚体动力学
          • multi-threads
          • cargo-mobile
          • 15. 运行时游戏性基础系统
          • multi-threads
          • C/ C++ 的数据、代码及内存
          • 4. 游戏所需要的三维数学
          • 5. 游戏支持系统_冲突文件_zkx_20240828215908
          • base
          • cargo-mobile
          • projects
          • multi-threads
        • GAMES104-现代游戏引擎: 从入门到实践
          • 第一节：游戏引擎导论
          • 第二节：引擎架构分层
          • 第三节：如何构建游戏世界
          • 第四节：游戏引擎中的渲染实现
          • 第五节：光和材质
          • 第六节：游戏中大气和云的渲染
          • 第七课：游戏中渲染管线、后处理和其他
          • 第八课：引擎中的动画技术基础
          • Advanced Animation Technology
          • Physics System
          • 物理系统应用
          • 粒子系统和音效系统
          • 玩法
          • 基础 AI 上
          • 基础 AI 下
          • 高级 AI 上
          • 高级 AI 下 Machine Learning
          • 网络架构基础 上
          • 网络架构基础 下
          • 网络架构进阶 上
          • 网络架构进阶 下
          • Data-Oriented Programming and Job System 面向数据编程
          • Data Oriented 下
          • 动态全局光照和 Luman
          • 全局光照和 lumen 下
          • GPU-Driven Geometry pipeline - Nanite
          • Nanite - 2
        • games-106
          • multi-threads
          • 2. 图形绘制流水的基本原理和实践 (1)
          • 3. 图形绘制流水的基本原理和实践 (2)
          • 4. 图形绘制流水的基本原理和实践 (3)
          • 绘制管线中的计算频率
          • 6. 性能分析
    • game-ai
      • game-ai-book
      • behaviour
      • base
      • goap
      • sli97
    • 游戏设计
      • battle-system
      • 新手引导
      • character-controller
      • game-designer-books
      • game-theory
      • 关卡策划
      • 模块化设计
      • simple-note
      • player-behaviour
      • skill
      • 缝合怪和肉鸽
      • 顶视角
      • tps-vs-fps
      • 策划实用网站
      • culture
      • 游戏数值
        • battle-numerical
        • 战斗数值
        • 装备数值
      • 游戏设计教程
        • 超简短的独立游戏开发教学第一季
        • 超简短的独立游戏开发教学第二季
        • zelda-phisics-sound
    • 游戏引擎编程语言
      • english
      • CPP
        • cmake-tutorial
        • 编译
        • 包管理
        • cpp 工程结构
        • 智能指针
      • C#
        • GC
        • Web
        • 语言执行原理
        • weak-reference_冲突文件_zkx_20240828215917
      • Rust
        • base
        • cargo
        • macro
        • Rust android
        • rust-async_冲突文件_zkx_20240828215917
        • 跨平台
        • FFI
        • 文件操作
        • Rust Macros
        • Rust 内存管理
        • Rust Option 和 Result 的处理
        • Rust 中的引用
        • Rust 正则表达式
        • 学习 Rust
          • Rust 笔记
        • 使用 Rust 写 Vulkan
          • 开源中间件和项目
          • Rust 光线追踪
    • 数学
      • Fractal
      • 机器学习
      • 元胞自动机
      • 曲线
      • 半球积分
      • 线性代数的本质
      • 低差异序列
      • 噪声
      • 四元数
      • 有向距离场
      • 空间变换
      • 球谐函数
      • physics
        • Games 401
        • soft-body
  • 游戏
    • 赛博朋克 2077
    • 艾尔登法环
    • 密室逃脱
    • 日式
    • 冒险岛国际服
    • no-oxygen
    • oil-game
    • text-game
  • 工具
    • shell
    • 博客搭建
      • 基础
      • 美化
      • 使用 Markdown 做博客
      • my-blogs
    • controller
      • sofunny
    • 游戏引擎使用
      • 虚幻引擎
      • Unity
        • plugins
        • client
          • life-time
          • 网络
          • weixin
          • 3c
            • input
            • animator
              • Reference
            • games-105-计算机角色动画基础
              • Motion
            • golden-rush
              • cargo-mobile
              • 工程技术
            • input
              • input-system
          • 代码
            • 协程
            • 事件系统
            • 游戏框架
            • projects
              • JobSystem
              • unitask
          • DOTS
            • ai_冲突文件_zkx_20240828215923
            • Entity component system
            • errors_冲突文件_zkx_20240828215923
            • SubScene
            • ecs-sample-note
              • advance
              • bake
              • base-practice
              • graphical
              • render
              • resource
          • Unity 编辑器使用技巧
            • 自定义模块
            • 下载
            • android
              • 调试安卓机
              • install-apk
            • Unity 工具
              • Editor UI
              • OnGUI
          • memory
            • 安卓内存
            • Unity 内存分布
            • native-memory
          • performance
            • accelerate
            • game-performance-note
            • performance-optimize
            • plugins
          • Unity UI
            • 设计
            • layout
            • shader-ui
            • Reference
        • others
          • Mod for Unity Game
          • weixin-game
          • xr
          • interview
            • junior-unity-client_冲突文件_zkx_20240828215923
          • 会议笔记
            • Unity 开放日 - 厦门分享总结
          • render-pipeline
            • ET Framework
            • DOTS-training-samples
              • 蚂蚁模拟
            • ECSSample
              • Advanced
              • Boids
              • hellocube_冲突文件_zkx_20240828215923
        • render
          • baking
          • gpu-driven
          • 粒子系统
          • Visual Effect Graph
          • 渲染管线
            • batch-render-group
            • inverse-z
            • platform-shader
            • scriptable-renderer
            • Universal Render Pipeline
            • HDRP
              • HDRP 中的 Anti-Aliasing
              • HDRP 自定义渲染阶段
              • 曝光
              • Lit 光照
              • SimpleLit
            • SRP
              • SRP Batch
              • SRP 概览
          • Unity shader 使用
            • Compute Shader
            • Draw Procedural
            • macro
            • 顶点坐标
            • Shader graph
            • 着色器语法
            • variant
            • Shader 预热
        • 资源管理
          • Addressable
          • config
          • 商业化的资源管理和热更新
          • AssetBundle
            • problems
            • skills
            • tutorials
          • asset
            • asset-live-time
            • Asset 简介
    • Git 进阶使用
      • git 常用方法
      • Git 使用出问题时的解决办法
      • git-submodule
      • basic
        • Git 基础
        • Github
        • Git 同步
    • IDE
      • Rider
      • 主题
    • 语法格式
      • 正则化
    • Windows
      • Windows 应用
由 GitBook 提供支持
在本页

这有帮助吗？

在GitHub上编辑
  1. 游戏技术
  2. Assets
  3. image
  4. ui
  5. ui-tutorials
  6. xiao-long-bao

game-ui

上一页xiao-long-bao下一页ps-skill

最后更新于12天前

这有帮助吗？

游戏UI教程01期｜十步画出卡通开始游戏按钮_哔哩哔哩_bilibili

0~7 按钮游戏UI教程07期｜五步画出欧美卡通按钮_哔哩哔哩_bilibili

多个图层放在一个组里，可以给整个组添加图层样式

  1. 基础造型，钢笔添加锚点修改

  2. 增加按钮体积 ：复制基础造型变暗，作为下底面，或者添加内阴影

  3. 光影效果 ： 图层样式，内外发光，描边，

  4. 按钮表面 ： 再做个矩形作为按钮表面， 内部透明渐变，叠加在原本按钮上

  5. 纹理效果，细节表现， 按钮底板

游戏UI教程41期｜零基础卡通休闲界面设计01_哔哩哔哩_bilibili

任务弹窗 UE 布局

元素

  • 底板

  • 主体

    • 大形 ：矩形工具，钢笔调整

    • 光影 ：高光，阴影，反光 ：图层内外阴影 / 内外发光，剪切蒙版正片叠底

    • 花纹 / 细节

    • 凹槽 ： 描边 / 浮雕

  • 条目 ： 子主体 / 智能对象

  • 按钮 ： 子主体

游戏UI教程46期｜零基础绘制生命值图标01_哔哩哔哩_bilibili 合并形状组件 ：可以把形状合并

游戏UI教程49期｜从零开始绘制金币图标01_哔哩哔哩_bilibili

游戏UI教程51期｜欧美卡通界面设计教程01_哔哩哔哩_bilibili