隔了1年最近看了看Egret 做了个Demo TP:AE94AD6A

游戏也放上来罢,一个读大学时做的flash小游戏,就打算移植不过,没用用Egret提供的转换工具,全部手写移植,也是为了熟悉下语法

游戏地址 http://www.dreamfairy.cn/h5/poom/

在游戏制作上,看了看还是算蛮成熟的。

EUI的结构类似 MyGUI 且提供了可视化编辑器这店挺爽。 MyGUI官方的编辑器好无语。。

在创建的Game项目模板中,默认是加载所有资源再进游戏,感觉挺不科学,不过在做完这个demo后也就释然了,在微信和opera上跑起来,简单的逻辑就有掉帧2~3帧,不使用webgl. 手机上也用不了,所以只能做小游戏,大型游戏的话就需要打包app了,另说。

语法上,所有的AS3类型,在 egret 包中都基本实现了,不过实践了大半后,觉得一些地方用TS的特点更棒。
比如

public createParticle(idxPos : {x : number, y : number}){
    //TODO
}
请不要无脑复制转载本文, 由 dreamfairy 原创, 转载请注明出处 本文地址 http://www.dreamfairy.cn/blog/2016/01/15/make-a-demo-with-egret/

ASer 转过来一般参数可能会写 idxPos : egret.Point
但是当项目合作有些人不是ASer, 而是JS 同学的话,用Object限制参数类型就是一个很棒的选择,既可以兼容 egret.Point,也可以兼容一个 JS 同学些的 相同属性的 Object 了。

也有一些不科学的地方
比如 所有的成员属性,都需要以 “this.” 开始,好烦
函数定义不需要中间的 “function”表示,经常容易写错。 比如这样写是错的 : public function 函数名
没有const, int 等等。

同时在开发的时候,一些新的特性有兼容问题
比如我写了个 map = new map 在 opera浏览器上正常解析, 在微信中打开会出现创建失败, 所以map 都用传统的 {} 就好,也万能。。。

然后说说配置问题
egret的资源都配置在 json 中。 但是假如游戏交付后,一些前端web同学不熟悉你的配置,想修改游戏中的一些初始信息就不方便了。

所以完全可以前端web同学在游戏的 index.html 中配置一些初始属性给游戏用
比如这样
index.html

<head>
    <ts_param id="xxx" str="fuck me"/>
</head>
<body>

在TS中可以这样读取

        var x = document.getElementById("xxx");
        var data = x.getAttribute("str");
        consolog.log(data); // output = fukc me

是不是很方便~~

最后JS 和 TS 之间的交互也非常简单,熟用 window 这个中介即可

举个例子,我想TS调用JS的一个函数,然后JS函数中创建一句话回传给TS,TS再从html中读取一个参数后合并字符串返回给JS. 最后JS弹窗显示这句话。

首先在 JS 中顶一个函数像这样

    <script>
        function myFunction()
        {
            var str = 'Hello World Java Script!';
            var tsFun = window["TS_Main"].onJsCallMe;
            if (tsFun) {
                var result = tsFun(str);
                alert(result);
            }
        }
    </script>

在TS中这样写

//test call js
var jsFun = window["myFunction"];
if (null != jsFun) {
   window["TS_Main"] = this;
   jsFun();
}

    //test js call ts
    public onJsCallMe(str: any): any {
        //test get html data
        var x = document.getElementById("xxx");
        var data = x.getAttribute("str");
        return data.toString() + " and " + str;
    }

是不是很有意思, 使用 window[“TS_Main”] = this; 就可以不需要定义静态方法了,这样的话,也起到了函数的分类作用,用window的一个key 来标示所在类

最后放个游戏的源码,在git上
https://github.com/dreamfairy/EgretPooms

在Havok Vision 中创建后期处理效果

如果有人参考了 官方手册的教程 Tutorial: Creating Custom Post-Processing Effects
然后使用 PA 的 vGameSolutionCreator 默认设置创建项目,会发现运行报错
active renderer does not provide all buffers required by the post processor.Execute

经过debug,发现默认创建的render node 实际上是 VMobileForwardRenderingSystem
它只支持一个bufferflag 就是 VBUFFERFLAG_FINALCOLOR

让我们从头开始
postprocessing
打开 VForge 编写我们的后期处理特效,这次范例就用径向模糊(Dx9,Dx11)
继续阅读“在Havok Vision 中创建后期处理效果”

Loog time no see~

很久,很久,很久没有写博客,好像都有半年的样子了 😀
一直都在忙项目的说~
好歹游戏游戏上线了,目前正在公测beta阶段
KindomsCHarge
相关主页在FB上啦 https://www.facebook.com/kingdomscharge

我表示一个人完成所有技能表示心理好虚~一共170+个技能。
顺带提供一下apk网盘地址吧~
http://pan.baidu.com/s/1c0m4eo4

要有光!

按计划,最近把光线搞完之后,就开始试着写3D引擎了。
虽说“每月一游戏”系列坑掉了,但也不枉费我几个月猛啃书籍的努力。在所开头的几个游戏也是借用别人的引擎。
Hell! It’s about time!

端午节玩了好多游戏~ <勿忘我> 通关了! <神秘海域2> 开坑! <暴雨> 到货! <美国末日> 发货!
玩过瘾先~ Demo什么的都是浮云!

[勿忘我] 通关啦! 剧情还是很赞的.就是打斗多到有点繁琐了. 老妈和老爸居然是最终BOSS. 还洗白了. 义军老大一开始就觉得他是坏人,居然结局是个自我牺牲的英雄! 三观尽毁!

AGAL Note 01

花了一个晚上,终于把agal啃下来了,发现一点也不难 =.=
于是尝试的做了几个效果.

先是这个,位图左右缓动
AGAL Code

            var vertexShaderAssbler : AGALMiniAssembler = new AGALMiniAssembler();
            vertexShaderAssbler.assemble(Context3DProgramType.VERTEX,
                "m44 op, va0, vc0n" +
                "mov v1, va1n" +
                "mov v2, va2n"
                );
           
            var fragmentShaderAssbler : AGALMiniAssembler = new AGALMiniAssembler();
            fragmentShaderAssbler.assemble(Context3DProgramType.FRAGMENT,
                "mov ft5, fc0n" +
                "sin ft5.g, ft5.rn" +
                "add ft4, ft5.g, v1n" +
                "tex ft0, ft4, fs0<2d,repeat,miplinear>n" +
//              "mul ft1, v2, ft0n" +
                "mov oc, ft0n"
                );

Render Code

t += 0.1;
context3D.setTextureAt(0,myTexture);
context3D.setVertexBufferAt(0,vertexBuffer,0,Context3DVertexBufferFormat.FLOAT_3);
context3D.setVertexBufferAt(1,vertexBuffer,3,Context3DVertexBufferFormat.FLOAT_2);
context3D.setVertexBufferAt(2,vertexBuffer,8,Context3DVertexBufferFormat.FLOAT_4);
context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT,0,Vector.<Number>([t,0,0,0]));

原理就是从外部发送一个递增的常量,然后在像素渲染程序上对每一个像素进行sin运算,算出一个左右缓动值,然后以该值去取对应点像素,然后输出即可.
效果地址:点我进入

然后复杂一些水波效果
用的水波图是之前flare3d中使用的柏林噪音图

AGAL Code

            var fragmentShaderAssbler : AGALMiniAssembler = new AGALMiniAssembler();
            fragmentShaderAssbler.assemble(Context3DProgramType.FRAGMENT,
//              "mov ft5, fc0n" +
//              "sin ft5.g, ft5.rn" +
//              "add ft4, ft5.g, v1n" +
//              "tex ft0, ft4, fs0<2d,repeat,miplinear>n" +
//              "mul ft1, v2, ft0n" +
//              "mov oc, ft0n"
//             
                "mul ft0, v0, fc1.xn"+
                "add ft0,ft0,fc1.y n"+
                "mul ft1, v0, fc1.xn"+
                "add ft1,ft1,fc1.y n"+
                "tex ft2, ft0, fs1 <2d,linear,repeat>n"+
                "mul ft2, ft2, fc2.xn"+
                "sub ft2, ft2, fc2.yn"+
               
                "tex ft3, ft1, fs1 <2d,linear,repeat>n"+
                "mul ft3, ft3, fc2.xn"+
                "sub ft3, ft3, fc2.yn"+
               
                "add ft4, ft2, ft3n"+
                "nrm ft4.xyz, ft4n"+
                "mul ft4, ft4, fc1.wn"+
                "add ft5, v0,ft4n"+
                "tex ft1, ft5, fs0 <2d,linear,repeat>n" +
                "mov oc, ft1"
                );

效果图

效果地址:点我进入

答辩了,优秀了,开源了然后要毕业了。

发布于:2012 年 5 月 14 日 19:23
修改于:2012 年 6 月 10 日 11:11

意外的拿到了优秀毕业论文,但一点都不兴奋起来,似乎对这一切都不那么憧憬。
很有意思,在答辩前,导师就让我准备优秀论文二次答辩,说实话,很想吐槽啊。明明都还没有第一次答辩呢,就确认了我要准备优秀论文二次答辩呢,不过还是谢谢导师对我的信任。
优秀论文~意料之外的事情,无意追求的东西,仅仅是因为我做了自己擅长的作品,仅仅我认为应该把一生只有一次,且有自己擅长的东西做好不留遗憾罢了。
继续阅读“答辩了,优秀了,开源了然后要毕业了。”

《Running Panda》作者的移动游戏开发心得分享

今天呢·无比懒散的DreamFairy作为一个骑行者狂飙了一下午后,回到电脑前。看到社区里之前做 “熊猫快跑” 的作者放出了心得啦。于是乎,果断转载过来。 DreamFairy也打算参加 腾讯的线上游戏开发项目呢。

以下是文章原文啦:

原文作者:Hack86    

      随着Air2.6大面积推广,Adobe毫不忌讳的踏入了移动领域。在苹果手机和安卓手机大肆PK的今天,平台市场和内容市场也新兴而起,笔者也拿起了笔,不对,准确的说是键盘和鼠标,来尝试一下,如何用熟悉的ActionScript3来开发一款可以跨平台的游戏。

 


      打开Flash Builder 发现新建里多了两个清新的选项,那就传说中的手机项目,新建后发现和普通项目并没有什么不同,只是多了一个主类同名的XML文件,用他可以配置一些手机上的特性,比如开关GPU,比如横屏锁定等等,除了这个几乎和别的AS项目没有任何不同的地方,感觉完全没有任何门槛,只能一个字来表示,那就是:刺激。

       在移动平台中开发思路上可能会有些变化,但是总体上没有任何问题,以下是我开发收集的一些经历,比如我们习惯性用键盘按键来发射子弹,但是平板手机中是没有键盘的,所以改成了触屏,而这在PC上表现为鼠标点击,所以实现就变得通俗容易,并且测试的时候也是用鼠标点击,在细节上会有些变化,比如按钮的划过状态在手机上消失,因为手机上快走指针,只有点击,同理监听MouseMove事件的时候 不用再判断是否MouseDown 因为在手机上不可能在未Down的情况下促发Mouse事件,这些都是一些细节上的不同,但是在实现上方案和传统的一样容易,所以为移动所付出的额外代价只是这些细节,如果你开发3个平台以上的话,那么这些细节需要多多考虑,但是比起重新开发三个版本,那这成本几乎是可以忽略不计的。所以还是那两个字:爽。

      启动游戏后,在手机上运行了下,效果没有想象的好,FPS一路走低,由于AS3的所有事件都是被异步优化后基于Frame来执行的,所以虽然理论上帧率过了24就可以消除卡的感觉,但是24fps状态下的操作延迟将近40多毫秒的延迟手感和体验都是比较差的,特别是对于动作游戏,如果你是策略的菜单游戏,那么24基本就可以接受了。但如果要做动作游戏,还是要达到普通人类下意识反应速度18毫秒以内,也就是55fps以行。那么优化也是一个非常大的问题,其实很多朋友会把过多的优化思考在变量的多少或者对象的GC上,其实他只是内存优化,而帧率的根本问题还是画面重绘。AS3是非常高级的语言,我们不需要太多低级的操作方法,只需要在画面上让重绘区域尽量减少,让重绘区域中的层数尽量维持在最少的图层,并且全部都使用位图,如果担心文件体积过大,可以导入矢量素材,用bmp来转换成位图也是一个很好的方法,当然手机资源有限一定要注意释放。经过以上基本简单的优化和设计上的规避,笔者的第一款游戏成功的达到了55fps以上,当我看到帧率发生了如此明显的变化后,我真是激动不已,如果你有兴趣的话,也马上动手来试一试把。……

 

 

 

 

FLASH聊天室

登陆后右上角有2个粉色按钮,按了有惊喜哦!!

鉴于大量数据会造成读取过程太长,设置保存200条记录的说~

如果大家有好看的图片想作为留言板背景,请发一张宽度550,高度700的图片到 loli@dreamfairy.cn

2011-1-22 | FLASH聊天室1.0FINAL

1.修正了消息发送框中输入 & 符号会出现数据读取错误的bug;

2.禁止了在聊天室中使用HTML代码;

3.添加了 载入消息中,载入消息后,载入消息失败 时的文字提示;

4.添加了启动聊天室后随机载入背景的功能;

5.数据存储量提升到1000条,超过一千条后删除所有记录,重新计数;

2011-1-21 | FLASH聊天室0.9BETA

1.用PHP将原本ASP的后台重写了一遍,将计算留言总条数,留言信息组合,输出最新一条数据等功能全部用后台处理,FLASH只负责前台显示;

2.采用了PHP+TXT文本文件的存储方式,所有的留言记录都保存在服务器端的文本文件里,服务器重启后数据不再丢失。默认保存240条留言,超过240条后清空;

3.添加了 “lucky”按钮,可以随机发送一句话;

2011-1-03 | FLASH聊天室0.2BETA

1.重写优化了初始化函数;

2.重写优化了每秒获取数据函数;

3.将所有组件全部动态创建,减少内存占用,减少程序体积;

输入名字后,与服务器端聊天记录同步一次,有记录就复制到列表,之后不再同步。最新的留言ID号为50.在每秒刷新函数上添加临时字符串来判断之前 的50号留言和当前的50号留言是否一样,如果相同,不作为。如果不同,就表示有新记录。每秒刷新函数就读取这一条记录然后添加进显示列表里。相比之前每 秒获取50条记录来说,现在只要获取一条记录就够了,提升了程序的执行效率。而且复制功能应该也能起作用了!

(下一版本预计更新使用asp动态创建XML文件来保存数据,这样数据就不会在服务器清楚缓存之后丢失)

2010-12-25 | FLASH聊天室0.1BETA

完成了简单的聊天功能,背景更换,隐藏UI

已知问题:

1、滚动条因为总是刷新最新聊天记录的缘故会自动移到底部,如果自己想查看之前聊天记录的话,会很麻烦。嘛~滚动条更好的算法没有想出来~有好心的同学想出来了可以告知。或者~~等我自己慢慢想吧。

2、当数据达到40条以上之后,程序的的每秒刷新一次是跟数据记录数量成正比的,导致程序运行缓慢。目前打算改进数据更新算法。

3、由于采用无数据库模式,无法长期存储数据,服务器关机即数据丢失。计划采用数据库模式,因此到时候要采用用户注册模式了,并将用户注册信息与博客用户数据库放在一起。 这样注册了聊天室的用户,也能直接在博客发帖。

Flash Video Player

自己是一个很喜欢看动漫听音乐的人。所以呢,经常会在博客上插入视频的说。

但是呢~外链的youku,tudou,56的自带播放器很难看,而且很多功能都没有,比如评论功能啊,循环播放功能啊。这一点嘛,bilibili就做的不错。但是bilibili那个miniplayer似乎死掉了,现在这个播放器还关不掉自动播放。

而且呢wordpress的视频插件flash video player似乎还要收费的,否则会有水印啊,不给力啊,不给力。

干脆就自己做一个好了!

下面是Demo | 源代码下载点我下载 | WordPress插件下载点我下载

[fvp info=澄空Sumisora【初音ミク】【3DPV】]http://www.hcgcn.com/xsk/Sumisora.flv[/fvp]

载入视频是通过外部传递参数的形式

视频的源文件为:澄空Sumisora【初音ミク】【3DPV】

2011-02-09

1.使用了VideoEvent 事件,可以捕获视频是否播放完毕,而不必采用 当前播放时间==播放总时间 来判断播放是否完毕。

采用 当前播放时间==播放总时间 来判断播放完毕 有时会出现bug。

1)当读取的视频由于压制问题,导致 播放总时间 远远高于 真正的视频播放总时间, 导致 循环播放功能 失效。

2)由于显示 当前播放时间/播放总时间 的文本框是在 Event.ENTER_FRAME下工作的,一定机率下会因为帧数和播放时间之间不是完整倍数,而导致 视频播放完毕后,文本框中 视频播放当前时间 仍然和总时间差一秒的bug。

使用新的 VideoEvent.COMPLETE 可以捕获真实的播放总时间是否到达,然后调用 循环播放功能;

2.使用了VideoEvent.STATE_CHANGE 事件监听 捕获播放器视频是否播放失败,如果播放失败,将在 info 文本框中显示播放失败的原因。

3.增加了 Smoothing,当视频播放时,将自动对视频进行抗锯齿处理,提升画质。

4.增加了直接点击 播放进度条 即可跳跃至播放的功能,滑动播放滑块 不再是跳跃观看视频的唯一选择。

2011-02-07

1.全部重绘了按钮ui

2.删除了 停止 按钮

3.添加了 音量设置滑块 和 一键静音 按钮

4.添加了 播放进度栏 和 播放进度调节滑块

5.设置了播放器info也可以通过外部变量更改

2011-02-05

1.完成了基本的视频外部载入的功能

2.完成了播放|暂停|停止|循环 的按钮控制

3.完成了显示 当前播放时间/总时间 的文本框实时显示