LimeJS指南3

# 形状与填充

## Sprites

前几章我们学习了关于node的类。虽然node是LimeJS中最重要的类,但是你几乎从不创建一
个node。我们可以创建sprite,sprite是矩形的显示对象。它的外观可以通过方法

*setFill(fill)*来添加,所有node的函数在sprite和其它形状都可以使用。这也包括添加

子sprite。

#!JavaScript
var redsquare = new lime.Sprite().setSize(50,50).setFill

(‘#c00‘).setAnchorPoint(0,0);
layer.appendChild(redsquare);

## 其他普通形状

### Circle

用circle能很容易的建立圆形或椭圆,所有方法与sprite相同。注意你不是定义半径而是定

义它的宽和高。

#!JavaScript
var circle = new lime.Circle().setSize(40,40);
// circle with radius 20

### RoundedRect

圆角矩形(roundedRect)除了有sprite的方法,还有一个额外方法*setRadius(radius)*,

radius就是角的半径。

#!JavaScript
var shape = new lime.RoundedRect().setSize(100,40).
setRadius(10);

### Label

label可以放入文本内容,文字可以通过*setText(str)*的方法来定义。你也可以设置字体

属性和alignment。如果你如果你不定义label的大小,label会自动以文字的长度和字体的

大小来计算label的大小。

#!JavaScript
var lbl = new lime.Label().setText(‘Your Score: 10‘).setFontFamily

(‘Verdana‘).setFontColor(‘#c00‘).setFontSize(26).setFontWeight(‘bold‘).setSize

(150,30);

### Polygon

polygon是LimeJS中最抽象的形状,你需要定义点来做出polygon,其他的都为你做好了。你

不能改变polygon的锚点和大小因为this are also taken from the point values。这种灵

活的方式允许你创造几乎所有形状,但也提示你较少的点将达到较好的效果

#!JavaScript
var triangle = new lime.Polygon().
addPoints(0,-1, .5,.5, -.5,.5);

## Fills

简单的创建一个形状将不会在屏幕上显示,只会在两只之间精力联系。为了添加一些可视的

外观,你通过*setFill(fill)*方法设置填充属性。传递给*setFill*的属性可以是执行

*lime.fill.Fill*中的对象,或者对于一些更简单的填充你可以直接传递 符合

*lime.fill.Fill.parse()*函数语法的值。

### Colors

颜色是你可以加到形状上的最简单的填充,你可以以不同形式加入值,如十六进制的字符串

,rgb(a)的字符串或者直接rgb(a)值

#!JavaScript
shape.setFill(100,0,0); //dark red
shape.setFill(0,0,0,.5); // 50% transparent gray

shape.setFill(‘#ffffff‘); //white
shape.setFill(‘rgb(100,0,0)‘); //same dark red as first

一旦你创建了你的颜色填充对象,你可以使用自建的函数改变它的值。更特殊的是,你可以

通过方法*addBrightness(factor)*改变颜色的明暗度,通过*addSaturation(factor)*的方

法改变颜色的饱和度。因子的范围必须是-1到+1之间。

#!JavaScript
var green = new lime.fill.Color(0,100,0); // neutral green
var darker_green = green.addBrightness(-.2);
var intensive_green = green.addSaturation(.3);

### 图片

顾名思义,图片填充允许你设置外部的图片作为形状的背景。图片适应元素的大小。

#!JavaScript
sprite.setFill(‘assets/image.png‘);

### Gradients

现在只有*lime.fill.LinearGradient*支持渐变,它允许创建一个从一种颜色朝一个方向变

为另一种颜色的背景,而辐射状的渐变现在不支持。渐变的角度可以通过的*setDirection

(x0,y0,x1,y1)*方法定义,点P(x0,y0)和P(x1,y1)定义了1x1方块中开始和结束的位置。渐

变的颜色可以使用addColorStop(offset,var_args)来定义,offset必须好似0-1之间。

#!JavaScript
var gradient = new lime.fill.LinearGradient().
setDirection(0,0,1,1). // 45‘ angle
addColorStop(0,100,0,0,1). // start from red color
addColorStop(1,0,0,100,.5); // end with transparent blue
sprite.setFill(gradient);

## 遮罩

为形状添加遮罩就意味着你仅仅显示你的元素的某些部位。在LimeJS中遮罩就像在flash中

一样简单 - 你创建两个对象,将其中一个座位另一个的遮罩,只就意味着只有相交的部分

才会被显示,而其他部分从原始的元素上被裁去。现在只支持矩形遮罩。在遮罩设置以后你

仍能修改两个元素的属性变化。

#!JavaScript
var mask = new lime.Sprite().setSize(100,100).setPosition(100,100);
parent.addChild(mask);
var image = new lime.Sprite().setSize(300,200).setFill

(‘assets/myimage.png‘);
parent.addChild(image);

image.setMask(mask);

时间: 2024-10-10 17:20:53

LimeJS指南3的相关文章

LimeJS指南5

# 动画 动画提供一个随着时间改变元素属性方法.典型的用处就是自然而然地使对象变大或改变它 的位置.要做一个动画,你得新建一个动画对象,然后在目标对象上运行它.不要忘了你得 用‘goog.require()’,因为没有什么动画是自动载入的.默认情况下所有动画运行时长为 1秒钟,你可以用‘setDuration()’的方法来改变它. #!JavaScript var fadehalf = new lime.animation.FadeTo(.5).setDuration(2); ball.runA

LimeJS指南2

# Layout和nodes ## 调整大小和方位变化 在LimeJs中,支持不同的屏幕大小和视口大小的变化很容易,都是自动调好的.在Director的构造中(或在*setSize*方法中),但是这不需要与实际的屏幕大小相适应.你的游戏的实际大小是从你游戏所在的容器DOM元素中得到的.如果容器对象的大小改变,你的游戏也会调整大小以填充容器.注意虽然你的游戏的比例改变,你的游戏的坐标将仍然反应你的做出的舞台大小所以你可以完全忽略它. ## 全屏游戏 默认的工程样板直接在body元素内部初始化Dir

LimeJS指南1

# 时间轴 ## director 一切从director开始.director是一个每个游戏所需要的基本对象,它连接所有网页上的Limejs逻辑到单个地方.如果你来自flash世界你可以把它当做一个舞台,Cocos2d用户可以当做Cocos2d-s自己的director.所有其他人可以把它当做一个前部的控制者. 每一个游戏只有一个director的例图.它操控游戏的全程视口,控制屏幕上的可见物.在你的逻辑涌现之初你得创建一个director的例图.构造函数的方法的参数是container DO

LimeJS指南0

开始 安装 windows用户:请按照README文件的安装向导安装 limeJS的开发需要[Python 2.6+](http://www.python.org/), [Git](http://git-scm.com/download) and [Subversion](http://subversion.apache.org/) or Git-SVN.如果你想使用Closure Compiler,还需要[Java](http://www.java.com/en/) .一旦你有了建好的游戏,就

LimeJS指南6

# 绘图引擎 LimeJS的一个最重要的特性就是支持不同的渲染引擎.也许不应该叫LimeJS一个Canvas 游戏框架,因为Canvas只是它所支持的一个较低的技术.有画图能力的较低的方法集中在在命名空间*lime.Renderer*.不同的渲染可以在任何时候通过方法*setRenderer(renderer)*在任何Node之间切换.现在LimeJS中支持的渲染有*lime.Renderer.DOM*和*lime.Renderer.CANVAS*. ## 为什么需要许多渲染 也许你的第一个想法

LimeJS指南4

# Events 在Lime中,事件的处理与Closure程序库中的差不多,你可以用‘goog.events.listen(src, type, listener, opt_capt, opt_handler)’添加事件监听,用‘goog.events.unlisten (src, type, listener, opt_capt, opt_handler)’取消监听,目标对象(src)就是你经 常用的node元素.事件类型(tpye)是就是你一般情况下添加到你的DOM元素上的东西:通 常有*m

LimeJS指南7

# Building 如果你已经完成之前的例子你可能会想在[Firebug](http://getfirebug.com/)或Webkit开发者工具看看内部是怎样的.在结果表格中看到的也许不能够使你满意.甚至Hello World的例子需要许多不同的Javascript文件加载,而且它们的总大小很大.不像[YSlow](http://developer.yahoo.com/yslow/)或者[Google Page Speed](http://code.google.com/speed/page

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

微信Android接入指南

注:本文为微信Android终端开发工具的新手使用教程,只涉及教授SDK的使用方法,默认读者已经熟悉IDE的基本使用方法(本文以Eclipse为例),以及具有一定的编程知识基础等. 1.申请你的AppID 请到 开发者应用登记页面 进行登记,登记并选择移动应用进行设置后,将该应用提交审核,只有审核通过的应用才能进行开发. 2.下载微信终端开发工具包 开发工具包主要包含3部分内容:(其中,只有libammsdk.jar是必须的) - libammsdk.jar(每个第三方应用必须要导入该sdk库,