找回密码
 立即注册
查看: 6658|回复: 75

[实例] Unity3d中制作一个非方形的按钮详细教程第一节

  [复制链接]
发表于 2012-12-19 20:34 | 显示全部楼层 |阅读模式
资源信息 Tutorial Information
教程名称: Unity3d中制作一个非方形的按钮详细教程第一节(发帖教程)
适用引擎:   (适用引擎,为空默认为Unity)
教程语种: English
教程等级: 1
教程格式: 图文(请用IE9以上浏览器访问本版块)
教程作者: 转载自互联网 (如有问题请短消息联系作者或发表回复)
下载地址: (兑换积分)
点击查看原图
美丽分割线

不错的教程,讲解的非常详细,如何制作一个非方形的按钮的具体步骤!比较基础实用的知识,推荐阅读!教程最后有项目源文件!此为第一节,一共三节!
Unity3D is a great tool to make games, but sometimes we encounter some  limitations like the hit test area of the GUI buttons: they all have to be rectangular. This post series shows how to overcome this limitation letting you create GUI buttons that can have any shape.


It will cover it all, since the initial operations required to export the button’sPNG file from the image editing software, to the code at Unity3D. So, the post series will be divided into 3 parts, that will cover all the necessary steps.

In this first post, everything that must be done outside Unity3D will be explained. You will need a image editing software (like Photoshop or GIMP) and a 3D modeling software such as 3D Studiomax or Blender.

We will need these 2 types of software because, instead of using Unity3D’s standard GUI rectangle hit test, the Raycast class will be used, and it only works with 3D models.

The first step is to create your button at your image editing software (like Photoshop or GIMP), as you would normally do. When you have finished your button, save it as PNG file. Like this one, that will be used as an example throughout the series:

Simple Speech Balloon/Bubble

If you want the button to change its appearance in case the mouse cursor is hovering over it, create another image with the same size, but different colors and/or shadows. Like the first image, also save it as a PNG file.

Then, create a vector path around the image. This vector path will be used to create the hit test area for the button. It is possible to create a hit test area different from the shape of the button: just make it different from the button image. Although, for this tutorial, the hit test area will be exactly the same as the shape of the speech bubble. To make a vector path in Photoshop, the pen tool can be used, or simply select the layer’s pixels, right click it and choose the ‘Make Work Path‘ option to create a vector path from the selection.

Click in that option to create a Vector Path from the selection.

We are only going to need the vector path, after all, the PNG have already been saved in the previous step. To do so, we will need to save it as a .ai or .eps file, or whatever vector graphics file format your 3D modeling software can read. To do this using Photoshop, go to File -> Export -> Paths to Illustrator. Choose the vector path to be exported and a location to save the .ai file.

Use this dialog to select the vector path to be exported.

Now, open your 3D modeling program and import the vector shape you have just created in your image editing software. Then, make a 3D object out of the imported vector path, by giving it volume and polygons, like this:

3D Model of the Speech Balloon/Bubble.

To easily achieve that with 3D Studiomax, import the shape into the scene and apply the Extrudemodifier to it. Just collapse the modifier into the spline. After that, right click the object and selectConvert to Editable Poly. And it’s done, just save it.

Extrude Modifier Applied to the spline.

That’s was all that is necessary to be done outside Unity3D to make non-rectangular buttons in the aforementioned game engine. As the other post series, the source code, files and Unity3D project will be available for download in the last post.

Part 2 of the series describes how to set up the Unit3D scene to accommodate the non-rectangular hit test code:Part 2 – Setting up the scene and cameras.
本文转自:http://www.41post.com/2405/progr ... -gui-buttons-part-1


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
发表于 2017-2-17 15:51 | 显示全部楼层
好帖就是要顶
发表于 2017-2-17 15:36 | 显示全部楼层
顶顶多好
发表于 2017-2-17 15:40 | 显示全部楼层
说的非常好
发表于 2017-2-17 15:22 | 显示全部楼层
很好哦
发表于 2017-2-17 15:32 | 显示全部楼层
不错不错
发表于 2017-3-8 15:00 | 显示全部楼层
很不错
发表于 2017-3-8 15:06 | 显示全部楼层
好帖就是要顶
发表于 2017-3-8 14:48 | 显示全部楼层
真心顶
发表于 2017-3-8 15:32 | 显示全部楼层
很好哦
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-11-22 06:26 , Processed in 0.130708 second(s), 31 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表