有意思的休闲小游戏 My Brute

上个月发现这个游戏的,有些意思.据说是一周内红遍全球 -_-! 也许你已经知道这款游戏了
搜索了些资料,貌似属于自动产生角色对战网页游戏的范畴.
人物属性是随机创建的,武器,宠物,技能也是随机给予的,有很大的运气跟着,与别人对战的胜负也是如此,人物属性数值高只能增加胜利的可能性.
最开始的一天可以进行6场战斗,之后每天只能打3场.每次都是意犹未尽.做为休闲游戏,我觉得这种设计很不错,每天只玩几分钟即可,不像”泡菜”游戏那般浪费时间.
战斗是回合制的,其过程却不需要玩家的控制,当你看到战斗场面时,服务器已经将此场战斗全部过程及结果”生成”了,此时的战斗只是”回放”而已.不足的是这些战斗会”过期”,过了一定的时间战斗地址就失效了.如果提供一个战斗
记录列表,可以观看以前的战斗场面,很不错的说.
再有,若在战斗中玩家能够进行有限次数的控制,例如强制要求角色更换武器,或者使用某些技能,可以增加游戏的粘性,但这样做的话,也同时大大增加了整个游戏的复杂度,或许开发者也慎重的考虑过吧
看看游戏的截图:
男孩:

女孩:

武器:

技能:

战斗:

比赛结果:

武林大会:

偶的地址,欢迎来挑战:
http://auzn.mybrute.com
http://kingnare.mybrute.com
P.S. 山寨版也是有的,地址就不写了,怕有做广告的嫌疑,网上一查便知
再次补充,原来此游戏当人物创建时,所有的技能,武器及宠物全部都生成了,并不是随机配送的.这会让人失去一些乐趣
kingnare1000级:

auzn1000级:

为水平和垂直滚动条交汇处的白块添加样式

aihanzi提了很多建议,非常感谢
对于容器中出现水平和垂直滚动条时,两条滚动条交汇处会生成一个纯白色的矩形,目前并无样式支持。
对FLEX theme的编写多少有些影响。
综合aihanzi的建议和网上的资料,修改了mx.core.Container类,添加了三个基本的样式属性:
whiteBoxColor – 颜色(明明是white box,还要设置颜色 -_-!!!)
whiteBoxAlpha – 透明度
whiteBoxVisible – 是否可见
先看示例: Demo
接下来正式开工:
我们首先进入到FLEX SDK(本文适用sdk 3.2.0版)中:
sdks/3.2.0/frameworks/projects/framework/src/mx/core
将Container.as,Version.as复制到当前项目中,包路径也要相同,就是说复制到项目中mx/core文件夹下。
然后再用相同的方法将SDK中的mx.styles.metadata下面的:
BarColorStyle.as
BorderStyles.as
PaddingStyles.as
TextStyles.as
复制到项目中。最后结构如图:

然后打开Container.as,找到createOrDestroyScrollbars方法(4401行),然后定位到4540行,
可以看到下面几行代码是设置whiteBox的。
我们修改生成whiteBox的代码部分,加入支持的样式,最后代码如下:
if (!whiteBox)
{
whiteBox = new FlexShape();
whiteBox.name = “whiteBox”;
var g:Graphics = whiteBox.graphics;
var wbc:Number = StyleManager.getColorName(getStyle(“whiteBoxColor”));
var wba:Number = Number(getStyle(“whiteBoxAlpha”));
isNaN(wbc) ? wbc = 0xFFFFFF : null;
isNaN(wba) ? wba = 1.0 : null;
g.beginFill(wbc, wba);
g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
g.endFill()
rawChildren.addChild(whiteBox);
var wbv:Boolean = getStyle(“whiteBoxVisible”).toString().toLowerCase()!=”false”;
whiteBox.visible = wbv;
}
上面是生成whiteBox的代码,那么若样式在运行时修改呢?
别急,我们再定位到2987行的styleChanged方法。
我们在方法尾部加入:
if (allStyles ||
styleProp == “whiteBoxColor” ||
styleProp […]

使用BitmapData.applyFilter实现伪景深(Depth of field)

景深 (Depth of field (wiki))有时可以增强立体感
可惜Flash未内置这种滤镜,Pixel Bender也许能实现,不过不会写 -_-
借助BitmapData.applyFilter分段为位图添加BlurFilter,可以实现假的”景深”效果:
视点在左侧:

视点在中间:

方法:
public function applyFilter(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, filter:BitmapFilter):void
参数:
sourceBitmapData:BitmapData — 要使用的输入位图图像。
sourceRect:Rectangle — 定义要用作输入的源图像区域的矩形。
destPoint:Point — 目标图像(当前 BitmapData 实例)中与源矩形的左上角对应的点。
filter:BitmapFilter — 用于执行过滤操作的滤镜对象。
Demo(点击apply应用滤镜)
Source
不过位图块之间的过渡有时不是很自然,会由于模糊得太过导致较大的间隙,当然,离远些就不明显了(笑).

模仿CDNetworks播放器带宽面板

仿上篇文章中提到过的带宽面板,用到了位图的applyFilter方法,Action直接写在了时间轴上,面板界面使用Flash CS工具绘制。

Demo
Source(Flash CS4 required)

CDNetworks的两款视频播放器(Silverlight vs Flash)

来源:Smooth Streaming Demo von CDNetworks
以前我们可能看到过MS的基于Silverlight前台的VOD站点:smoothhd
只是UI一般,这次带来的是更为华丽的展示(Silverlight).
播放器带有个放大镜:

带宽显示:

播放器”鸟瞰”:

放大镜这个工具还是很用的,尤其现在高清视频逐渐多起来了
当移过进度条时,会显示视频段的缩略图,通过查看缓存数据,可以知道这些图片是事先定义在XML文件数据中的,不是随Stream传送过来的。
3D视频列表的过渡稍有些不自然。
播放时(视频源分辨率1280×720)CPU占用量,我的T5600(1.83G)在20%~40%。若打开放大镜,在50%左右;若关闭放大镜、打开带宽显示,在70%左右。
视频平滑过渡处理得很好,和CDN高速高效网络分不开吧
作为CDN,对于目前占用率很高的ADOBE流媒体是当然支持的:Flash技术实现的VOD

这个播放器应该是早于前面提到的Silverlight Player,同样1280×720分辨率的视频源,打开带宽显示,CPU占用量在15%~25%。
播放器的语言是ActionScript 2.0,如果现在用ActionScript 3.0重制,效果会更好、效率会更高。
两款播放器配色都很合适,蓝色主题Silverlight和红色主题的Flash,与各自官方色相同。
有些遗憾的是,flash视频源未及Silverlight视频源那样的清晰,给人的第一感觉不是很好。
另外比较赞的就是网络示意图了:

对于学习和制作FLV播放器的ASer们,都是很好的例子

配合wmode使FLEX应用完全透明

看到网上有人提出过这个问题,想使FLEX生成的SWF文件如同FLASH IDE生成的,在wmode=transparent时效果相同。
但通过简单的设置backgroundAlpah=0是无效的,FLEX仍会生成一层透明的背景。
通过追踪Application代码,可以得知Application继承了LayoutContainer,
而在LayoutContainer的updateDisplayList方法中(第403行),可以找到如下代码:
// Wait to layout the border after all the children
// have been positioned.
createBorder();
createBorder是LayoutContainer继承的Container类中的方法:
Container中4008行:
rawChildren.addChildAt(DisplayObject(border), 0);
可知在索引0处增加了一个border,定位到498行:
/**
* @private
* The border/background object.
*/
mx_internal var border:IFlexDisplayObject;
除此之外,在systemManager存在一个Sprite的实例:mouseCatcher,见SystemManager 435行:
private var mouseCatcher:Sprite;
是SystemManager的第0级child(1级为application)
和stage高宽相同,且透明度为0。
转到2799行,可以看到绘制过程:
private function resizeMouseCatcher():void
{
if (mouseCatcher)
{
try
{
var g:Graphics = mouseCatcher.graphics;
var s:Rectangle = screen;
g.clear();
g.beginFill(0x000000, 0);
g.drawRect(0, 0, s.width, s.height);
g.endFill();
}
catch (e:SecurityError)
{
// trace(“resizeMouseCatcher: ignoring security error ” + e);
}
}
}
OK,现在回到主程序中,我们在applicationComplete事件将以上两个对象提出出来,然后在updateDisplayList中进行处理。最好不要尝试移除这两个对象,这样有可能产生异常;如果不是特别要求,尽量不要干涉或修改FLEX管理机制
查看全部代码:Source
查看示例:Demo(IE required)
IE8.0+Flash Player 10 ActiveX通过测试

Flash全屏右键菜单偏移BUG

已经有人提交了:
context menu position in full screen is shifted
FP9没有问题,只有FP10且在IE浏览器下发生。
如果你设置了stage的属性fullScreenSourceRect,像这样:
stage.fullScreenSourceRect = new Rectangle(0,0,800,600);
当切换到全屏的时候点击右键就会产生问题。