给createjs新手的一点建议

  • 内容
  • 评论
  • 相关

无论是谁,刚学习一门代码总有满头雾水的时候,本人也不例外,这时候有人点拨一下往往会茅塞顿开,但是本人觉得学习最重要的还是方法,方法对了往往能事半功倍,接下来我就给新手们一点建议。注:这几天有人问我,我写的博文都没有实例……诶,我好伤心。实例都在文章最后,有百度链接可以下载,请看完全文……

入门createjs的主要有两种人,一种是前端转createjs,一种是flash转createjs,两种各有优势,那我先讲讲flash转createjs(前端直接看下半篇)

  如果你是flash转createjs,那createjs的api和做动画游戏的原理你一定非常熟悉,那么下载animate cc 和flash cc肯定是必须的(注意:不是edge animate cc 而是animate cc 图标是红色的),下载之后你可以像做flash一样做canvas项目,然后看看导出的代码是什么样的,这样子比枯燥的看api简单的多,也很容易入门。但是语法js和as还是有很多区别的(比如var需要闭包,this的指向经常会变等等),所以你需要恶补js的语法css样式与相关的api。如果你是做移动端的还需要知道移动端的一些写法。

  然后就是对API了,看看flash中常用的api到了createjs中是怎么样的,基本来说区别不大,除了sprite。

  你还要学会如何调试程序,简单的来说就是学会如何使用浏览器调试(推荐谷歌浏览器),断点表达式等等浏览器里都有。 

  一般来说会as3的都会OOP,你还需要知道OOP在js中是怎么实现的,createjs有实现OOP的api。

  不要因为有flash就经常用movieclip,movieclip效率很差,需要效率比较高的项目还是用sprite吧。

  多看看别人的demo自己学着做,这要能做出2件以上的demo基本上就算入门了。

  flash转createjs的很容易对canvas/createjs产生依赖,这时候你就要有个清醒的认识,createjs毕竟不是flash,canvas只是一个画布而已,很多效果光靠createjs是不能做出来的(比如输入框,按图片扫码等等),所以前端的基本代码你还是要会写的,要学会前端与createjs的配合,不然做项目就很容易遇到瓶颈。

  不要元件嵌元件,帧嵌帧,嵌套太多,很多之前做flash的童鞋很喜欢嵌套一大堆的动画然后stop,最后用gotoAndStop控制,flash在PC端有效率给你跑,createjs移动端并没有,而且createjs和flash的机制并不一样,很多时候会出现你意想不到的bug。并且这种做法实际上是flash的陋习,本身对于编程和自身的成长都没好处的(如果你是个动画师可以无视)。

相关教程:

createjs基础教程(一)

createjs基础教程(二)

createjs的OOP

更好的利用flash cc进行项目实战

》》》》》》》》》分割线(前端转createjs的童鞋请看下面)》》》》》》》》》》

  如果你是前端转createjs,那你语法方面完全没有问题,css,js,调试程序肯定是信手拈来。这时候你要考虑一下你以后是经常做这类项目,还是偶尔做。如果是偶尔做,你就专攻sprite,Tween,load,如果经常做,我建议你还是学一点flash,不是指让你学以前的flash技术,而是学习animateCC或flashCC这个工具做动画,做法和之前做flash是一样的,所以以前flash的教程都可以用,下载的时候切记是下载animate cc 不是 edge animate cc。(如果公司有flash动画师或者广告师的你只需要知道怎么使用flash做出来的素材)。

  api是你着重需要看的,你要懂得api的写法和原理,最好是每种都试试。网上很多demo包括我自己的demo很多地方都是flash生成的,如果看到这种demo你需要着重看new lib.xx的部分,这部分你要知道是哪个资源,然后替换成你自己写的Bitmap或者Sprite就可以了,其他部分逻辑一样的。因为前端童鞋不是flash童鞋,createjs的api完全是陌生的,所以想做某种效果不知道api的情况下就到群里多问问吧。

  此外制作动画和游戏的相关知识你也需要补一补。

  sprite图是一种导出格式,不是源文件,非简单的动画尽量用工具去生成。

  canvas内部是没有css的,前端童鞋需要多思考在没有css的时候实现css的效果。

  有些前端喜欢做多个canvas然后用某些别人写好的插件来达到切换动画的功能,实际上既然用到了createjs所有效果基本就都可以在一个canvas中完成,多个canvas不仅会造成性能浪费,还会因为新建多个stage而出现一些莫名其妙的问题。所以,多学学用算法搭配createjs的API做动画很重要

  还有一点就是,前端转createjs的童鞋,很多都不明白OOP,或者就算明白也不怎么用。本人觉得写程序特别是游戏,OOP还是比较重要的,是需要着重学习的(继承 类 复合等等)。而且OOP这个东西比较特殊,它是一种思想,就是把现实的东西抽象写成代码。比如走路,xx.run() 然后你在run里面写走路的方法。但是run你要写在父类people中不能直接写在xx中,然后xx继承people,这样以后每个新角色要走路你都只要继承people就可以了(不知道这么说前端童鞋听不听得懂)。学会OOP后不仅可以提升代码质量,对自己能力也是一种提升。

相关教程:

createjs 的OOP

更好的利用flash cc进行项目实战

sprite精灵图的使用(一)

sprite精灵图的使用(二)

createjs是一门很好用而且并不难的语言,只要肯学肯定能学会的。

评论

11条评论
  1. Gravatar 头像

    a 回复

    博主,此页面相关教程下的文章链接404~

    • Gravatar 头像

      ajex 回复

      @a 修复了 你再试试

  2. Gravatar 头像

    匿名 回复

    博主,我是前端,对动画制作感兴趣,可以拉我进群学习吗?

    • Gravatar 头像

      ajex 回复

      @匿名 直接网站最右下角点击进createjs群

  3. Gravatar 头像

    匿名 回复

    有没有QQ群之类的大佬

  4. Gravatar 头像

    匿名 回复

    你好createjs 能实现围绕Y轴旋转吗

    • Gravatar 头像

      ajex 回复

      @匿名 不行 这个还是要用css

  5. Gravatar 头像

    匿名 回复

    你好。你知道createjs有设置transform中心点的API吗,看遍了文档也没看到。

ajex进行回复 取消回复

电子邮件地址不会被公开。