• Welcome to Rotar E@rth!
  • Feel free to look around and comment~
  • Tin - for a better fantasy life!
  • TinTimer - for an even better fantasy life!

Bad Apple ASCII Javasrcipt字符画版| Bad Apple ASCII Javascript

Internet Rotar 151 Views 0 Comment

Bad Apple ASCII 版影绘简介

Bad Apple (坏苹果) 影绘是东方同人作品中的经典,经过后期加工也出现了很多版本,其中ASCII码版的字符动画是其中一大主力,并且在各个平台都有成果:视频,网页,DOS,PSP,Telnet服务器,甚至还有启动盘。
于是出于练手的目的先用Javascript (字符动画播放)和HTML5 (音频播放)实现一番。

传送门:http://rotar.tk/ba

主要工具

  1. 帧提取:Free Video to JPG Converter
  2. 字符化:ASC GEN 2.0
  3. 抽音轨:Free Video to MP3 Converter

体会

目前从效果来说马马虎虎过得去,3:39的动画源文件15.9MB,按30FPS的帧率抽出一共6572帧66.5MB,转成80×35的字符是17.9MB,自己再进行压缩到4.38MB,最后经过PHP的GZip能压缩到1.4MB。

影音不同步是个大问题,目前在想办法解决,大致的办法是使用Audio的currenttime这个属性来计算当前应该达到的帧并且修改帧的索引值。

本来是想用C++来写的,结果发现长时间未使用(plus根基不牢)竟然连读取txt文件都成了大问题,果断要找时间补课了。

Update 2012.08.15

测试了一下IE各版本下的表现,果然差得惊人。于是对IE进行了特殊处理,包括以下:

  1. 把” “(空格)改成” ”
  2. “\n”换成”<br />”
  3. IE7以下版本对于没有内容的”<br />”会直接忽略,于是只得在前添加一个”&nbsp;”
  4. 由于IE不支持ogg格式,当检测到是IE时,跳过音频控制并”建议使用Chrome” XD

Update 21:18

多浏览器支持果然是门学问,这次本以为只有IE会成问题,没想到换成火狐(Firefox)试了试出现了因为字体不是等宽(Monospaced)而产生的严重错位。问题的根源在于之前给pre的标签(tag)在CSS中设置的字体只有一个Courier,这在Win7和iOS上都没问题,可是Firefox并没有这个字体,所以才使用默认字体顶替以至于排版混乱。刚更新的CSS已经添加了6个等宽字体以确保任何系统下都能正常显示。

此外,刚把Chrome的22 Dev版下了来测试发现页面的声音出不来,起因不明,准备再下个21的Beta做对比。


本网站采用BY-NC-SA协议进行授权 , 转载请注明Bad Apple ASCII Javasrcipt字符画版| Bad Apple ASCII Javascript
Like (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址