搞研发 找元件
上世强元件电商
国产32位DSP完美替换TMS32成功实现电动滑板车的永磁电机控制
在很多电机控制应用场合中，目前很多国内的产品也体现出较高的性能优势。本文结合作者自身使用TI产品TMS320F28035的项目经验，针对进芯电子的32位DSP芯片的可替代性以及优势展开分析讨论。
笔者在做电机控制时，其中有一个电动滑板车项目中用到了TI的TMS320F28035PAG，引脚64PIN，封装为TQFP。项目需求是实现电动滑板车上的永磁电机的控制，母线电压为48V，锂电池供电，功率为200W，采用转速控制，带有各种完善的保护机制。
笔者的项目大致需求情况如下：
（1）控制环节。PWM的频率为16KHz，也就是定时器每隔62.5μs执行一次电机控制算法。
（2）电流/电压采样与保护环节。在电机控制中，一方面，触发ADC转换来执行电流/电压采样的时机非常地重要，不能够让ADC工作在持续转换模式，这样采出的电流谐波非常多（肉眼可见明显区别），而应该利用每次触发定时器中断的事件去触发ADC采样；另一方面，事件捕获单元eCAP主要用作捕获过流信号，及时封锁PWM输出同时进入最高优先级的中断函数。
（3）转子位置角获取环节。永磁电机另一反馈的要素就是转子的位置角，笔者的做了从模型获取和从光编获取两种接口。
（4）多样化的辅助调试接口。除了上述的必要控制与反馈，辅助调试的手段也是缩短开发周期的重要环节。笔者根据现场情况喜欢采用CAN或者UART作为调试电流转速响应波形的外设接口；在设计控制界面的时候，再多的按键和LED数码管也只需用4个引脚的标准SPI接口搞定。当然也会有些其他应用场合需要USB，或者第二路SPI作为Bootloder更新固件的接口，有需要也可以预留出。
整体的设计方案框图如下图所示：
图1 整体方案框图
详细设计方案为：选用耐压100V的MOSFET作为三相全桥主电路，采用非隔离的电荷泵预驱动芯片进行MOSFET的驱动。采用各相下桥臂以及母线串联采样电阻进行相电流采样，采样电流经带有直流偏置的高速运算放大器输入至TMS320F28035的ADC中。同时对反电势进行过零检测设计，母线同样需要进行过电压/欠电压检测。驱动电源采用BUCK型DC-DC芯片，电压输出设计为15V，母线电压允许在弱磁调速骤停时上升至60V。
然而由于中美贸易战日益激烈，笔者近日发现TMS320F28035供货日益紧张，我们自己屯的库存也渐渐跟不上需求。因此笔者也在积极地寻求可以完美替代的国产芯片。最后，笔者在世强的官网找到了ADP32F03，仔细阅读使用手册之后，发现这款芯片确实是一块能够用来替代TI产品的良心国产芯片！
ADP32F03也可以用CCS开发环境进行编译开发，这对用惯了TI产品的工程师来说是个很好的优势。支持JTAG仿真，在前期的底层调试的时候，能够节省不少调试时间。标准的产品特征还是由datasheet来强调，笔者挑用于电机控制较为突出的几个方面进行着重地评估一下。
关于ADP32F03可以替代TMS320F28035的理由有以下几点：
（1）高主频。与TMS320F28035的60MHz主频相比，ADP32F03的120MHz主频能够进一步缩短电机的控制周期，在一些电感量较小的电机上，能保证电流环被稳定地控制住。
（2）两个专门用于电机控制的事件管理器。虽然与TMS320F28035一样，只有一个正交编码输入，但如果电机采用无位置传感器控制，那么ADP32F03也可以独立控制两个电机的运行，从通用性上来看，这一点不比TMS320F28035弱。（只是笔者在阅读到datasheet的这一节的时候存在一些疑问，也许各位仔细的工程师也已注意到这个问题，所以笔者已在世强官网上提问，文章发出后笔者会在评论区贴出提问链接）。同样必不可少的一点是EM1能够通过事件触发ADC采样，保证了在下管导通的时候采到正确的电流值。
（3）ADC的转换时间短。TMS320F28035的ADC的转换时间在datasheet中没有明显的注明，但在官方出的PPT的产品参数中，也就是图7中，明确表示ADC的转换时间是217ns。而ADP32F03的数据手册明确表示ADC的转换时间仅需80ns，转换速度是TMS320F2倍以上。
（4）多样化的外设接口。ADP32F03同样具有一个速率高达1Mbps支持低功耗的CAN接口。至于比TMS320F28035少一路SPI接口，多一路SCI（兼容UART）接口这一点，从可行性角度去分析，笔者只需在自己的方案中将更新固件的接口方式从SPI改成串口即可。同样可以保证一路SPI用作面板的控制，一路串口用作数据的调试。
（5）电气特性参数。有两点相比，ADP32F03更占优势，一点是ESD的人体模式，该芯片能多扛±2000V的耐压。另一点就是结温做的更低，能够在更寒冷的环境中运行。
除了以上的优势，还有一点值得一提，就是该芯片有符合军品级的产品线。这一点很重要，如果是做军品级的产品用到了国外的芯片，那么国外的厂商一般都会卡的很紧，而用我们自己符合等级要求的国产芯片就无需担心供货渠道和周期的问题。
通过上述分析，两者也均为80PIN芯片，用ADP32F03替换TI DSP极具可行性。不过在对比过两者80PIN的芯片后，发现无法PIN-TO-PIN兼容，因此如果有工程师想要替换掉自己用TMS320F28035设计的电机控制器，重新设计控制板以及测试芯片性能的步骤依然还是必不可少的。
&ADP32F03&引脚分布图
&TMS320F28035引脚分布图
最后，欢迎大家对本文提出批评和指正意见。谢谢！
相关元件供应
以下元器件世强均有代理，采购服务热线：
ADVANCECHIP
ADVANCECHIP
本文由坚栋原创，版权归世强元件电商所有，非经授权，任何媒体、网站或个人不得转载，授权转载时须注明“来源：世强元件电商”。
没有更多评论了
有问题？向百人技术专家提问
400-887-3266（工作日 9:00-18:00）
世强元件电商最好的电子研发服务平台
领先国内半年新元件/新技术/新方案
全品类覆盖数百个原厂资料
正品低价/供货保障
大量现货，支持快速购买
下载世强元件电商APP
工程师创新研发的神器
知、选、研、用一站式服务
搞研发 找元件
上世强元件电商DSP28035编译日志：ADC
28035的ADC为带有双采样保持电路的12位ADC，在对同时性要求较高的情况下，之前A,B两路同时采样，异步转换。同时还带有多个转换触发源(软件直接触发，ePWM触发，外部中断触发，CPU定时器触发，ADC中断触发）。
ADC核心是由SOC（source of
conversion）触发完成转换的，每一路的SOC可以自由选择采样通道，要完成转换ADC还需要知道采样通道已经采样窗口长度，这些都是由ADCSOCXCTL寄存器控制的。ADC的采样优先级是按轮询调度（round
robin）方式确定的，也可以为某些SOC设置优先权限。在所有被挂起的转换请求完成之前，ADC不会停止转换。
ADC一共可以触发9路独立中断，ADC可以在转换过程中触发16种EOC脉冲，每一路SOC通道对应着一路EOC脉冲，每种脉冲都可以配置成为任意ADCINT的中断源。
ADC转换以后的结果保存在结果寄存器中，每一路SOC都有独立的寄存器。
以常见的EPWM触发ADC转换为例，需要按一下步骤设置：
1.首先配置好用于SOC的ePWM，至少使其时基子模块能正常工作，然后设置其事件子模块的ETSEL寄存器，配置好脉冲发生时机，然后确定多少次事件触发SOC。
2.运行InitAdc()使能ADC模块，对于非默认为AIO的ADC通道还需配置GPIOMUX。
3.配置转换，这里我们使用SOC0，将其通道选择为A0,其为默认AIO，所以不用配置GPIOMUX,随后选择转换源为之前配置好的ePWM。
4.由于没有使用ADCINT，所以结果直接在AdcResult.ADCRESULT0中读取。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。&figure&&img src=&https://pic1.zhimg.com/v2-870c487fca1abc492f154e140f3ec9a0_b.jpg& data-rawwidth=&1523& data-rawheight=&869& class=&origin_image zh-lightbox-thumb& width=&1523& data-original=&https://pic1.zhimg.com/v2-870c487fca1abc492f154e140f3ec9a0_r.jpg&&&/figure&&p&本工程难度：★★☆☆☆&/p&&h2&&b&前言&/b&&/h2&&p&12月8日，TGA 2017各项获奖名单公布，茶杯头(Cuphead)获得最佳艺术指导和最佳独立游戏两项大奖，可谓实至名归。&/p&&p&记得6月的时候我还在苦苦等待某狗头人的黑暗剑21（已经不存在了），在看E3发布会直播时，一款名为茶杯头的游戏立刻吸引了我，就冲这复古的画风我肯定买爆啊！待到发售日听闻好评一片而且难度极高，我心里暗自琢磨：哼，我可是黑魂三部曲总时间超过两百个小时，和历代薪王谈笑风生，什么大场面没见过，一个小小的茶杯头还想难倒我？拿起手柄开搞！然后我就被打脸了……&/p&&figure&&img src=&https://pic4.zhimg.com/v2-46caa1de963dc9b4dca6c_b.jpg& data-size=&normal& data-rawwidth=&1382& data-rawheight=&726& class=&origin_image zh-lightbox-thumb& width=&1382& data-original=&https://pic4.zhimg.com/v2-46caa1de963dc9b4dca6c_r.jpg&&&figcaption&看到最多的就是这个画面&/figcaption&&/figure&&p&经历了重重磨难通关后，回头看了眼自己的死亡记录，emmmmm……&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3bda1b11_b.jpg& data-size=&normal& data-rawwidth=&1366& data-rawheight=&768& class=&origin_image zh-lightbox-thumb& width=&1366& data-original=&https://pic4.zhimg.com/v2-3bda1b11_r.jpg&&&figcaption&大概就是这样吧……&/figcaption&&/figure&&p&似乎找到了当初激情黑魂的感觉，茶杯之魂，名不虚传，在下佩服。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-4cbbc67cb2dc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1003& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1003& data-original=&https://pic3.zhimg.com/v2-4cbbc67cb2dc_r.jpg&&&/figure&&p&嘛，总之茶杯头是一款素质极佳的横板闯关游戏，在刚发售的那段时间里成为了各大游戏主播的新受苦素材，人气颇高。实际上，这款游戏就是用Unity制作的，这就引起了我的兴趣，作为一名Unity程序猿，肯定要尝试复刻一下啦。那么接下来，就开始我们的Cuphead之旅吧。本期先从主角茶杯头的基本操作开始介绍。&/p&&p&&br&&/p&&h2&&b&状态分析&/b&&/h2&&p&对于角色的基本操作来说，如何处理好角色状态之间的切换是重中之重。茶杯头的教学关卡中几乎已经囊括了角色的所有状态，基本可以总结为下图中的几大类。在本期中仅介绍其中的一部分供大家参考。主要运用到的Unity模块为动画模块和2D物理模块。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-4afba62f79f62545e23e_b.jpg& data-size=&normal& data-rawwidth=&699& data-rawheight=&469& class=&origin_image zh-lightbox-thumb& width=&699& data-original=&https://pic4.zhimg.com/v2-4afba62f79f62545e23e_r.jpg&&&figcaption&角色状态一览&/figcaption&&/figure&&p&&b&1.角色移动&/b&&/p&&p&首先角色的默认状态为站立闲置，当按下方向键（A或D）时向左/右移动，抬起时停止移动。同时需要注意，在处于下蹲状态时角色是不会移动的，所以在移动的函数中要先判断是否处于下蹲状态再根据情况改变角色速度。&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_Move&/span&&span class=&p&&(&/span&&span class=&kt&&int&/span& &span class=&n&&dic&/span&&span class=&p&&)&/span& &span class=&c1&&//dic代表面向方向，左为-1，右为1&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(!&/span&&span class=&n&&_isDown&/span&&span class=&p&&)&/span& &span class=&c1&&//判断是否为下蹲状态&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&n&&dic&/span& &span class=&p&&*&/span& &span class=&n&&_moveSpeed&/span&&span class=&p&&,&/span& &span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&);&/span& &span class=&c1&&//直接用rigidbody.velocity赋予角色速度&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetBool&/span&&span class=&p&&(&/span&&span class=&s&&&IsWalk&&/span&&span class=&p&&,&/span& &span class=&k&&true&/span&&span class=&p&&);&/span& &span class=&c1&&//触发行走动画&/span&
&span class=&n&&_isWalking&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&c1&&//当前进方向与面向方向不一致时反转角色&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&dic&/span& &span class=&p&&&&/span& &span class=&m&&0&/span& &span class=&p&&&&&/span& &span class=&p&&!&/span&&span class=&n&&_isFacingRight&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_Reverse&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span& &span class=&nf&&if&/span& &span class=&p&&(&/span&&span class=&n&&dic&/span& &span class=&p&&&&/span& &span class=&m&&0&/span& &span class=&p&&&&&/span& &span class=&n&&_isFacingRight&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_Reverse&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_StopMove&/span&&span class=&p&&()&/span& &span class=&c1&&//停止移动&/span&
&span class=&p&&{&/span&
&span class=&c1&&//判断是否为冲刺状态，若在冲刺则保持速度不变&/span&
&span class=&k&&if&/span& &span class=&p&&(!&/span&&span class=&n&&_isDash&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&p&&,&/span& &span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetBool&/span&&span class=&p&&(&/span&&span class=&s&&&IsWalk&&/span&&span class=&p&&,&/span& &span class=&k&&false&/span&&span class=&p&&);&/span&
&span class=&n&&_isWalking&/span& &span class=&p&&=&/span& &span class=&k&&false&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&角色移动效果如下图（一个完整的左脚换右脚再换回左脚总共是16张图片组成的帧动画，抠图抠的爽歪歪）：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-7f1cbfeee465_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic3.zhimg.com/v2-7f1cbfeee465_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic3.zhimg.com/v2-7f1cbfeee465_r.jpg&&&/figure&&p&&br&&/p&&p&&b&2.角色跳跃&/b&&/p&&p&角色跳跃直接改变角色在Y轴方向上的速度，这里的重点在于站立动画和跳跃动画的切换。我在这里采用的方法是在角色脚下放置监测点，通过向下发射射线检测的方式确认角色是否接触地面并控制动画状态机的相关变量，射线检测的距离可以按照实际需要调整。&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&c1&&//Update函数中的相关代码&/span&
&span class=&k&&if&/span& &span class=&p&&(!&/span&&span class=&n&&_isGrounded&/span& &span class=&p&&&&&/span& &span class=&p&&!&/span&&span class=&n&&_isJump&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetBool&/span&&span class=&p&&(&/span&&span class=&s&&&IsJump&&/span&&span class=&p&&,&/span& &span class=&k&&true&/span&&span class=&p&&);&/span&
&span class=&n&&_isJump&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span& &span class=&nf&&if&/span&&span class=&p&&(&/span&&span class=&n&&_isGrounded&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetBool&/span&&span class=&p&&(&/span&&span class=&s&&&IsJump&&/span&&span class=&p&&,&/span& &span class=&k&&false&/span&&span class=&p&&);&/span&
&span class=&n&&_isJump&/span& &span class=&p&&=&/span& &span class=&k&&false&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span& &span class=&p&&(!&/span&&span class=&n&&_isAlreadyLand&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&GroundDust&/span&&span class=&p&&();&/span& &span class=&c1&&//产生落地的灰尘&/span&
&span class=&n&&_isAlreadyLand&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&c1&&//End Update&/span&
&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_Jump&/span&&span class=&p&&()&/span& &span class=&c1&&//角色跳跃&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&_jumpSpeed&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&跳跃效果如下（特地看了一下原版游戏，一次完整的跳跃大概是跳跃动画循环两次，哇，我是有多无聊……）：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3a49d2f911d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic4.zhimg.com/v2-3a49d2f911d_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic4.zhimg.com/v2-3a49d2f911d_r.jpg&&&/figure&&p&&br&&/p&&p&&b&3.角色下蹲&/b&&/p&&p&下蹲也是检测按钮状态，按下或按住则蹲下，抬起则恢复到站立状态。这里的关键点在于如果处于跳跃状态一定要将下蹲状态关闭，否则在下蹲时按下跳跃按钮并在跳跃状态中放开下蹲按钮，当角色落地时就会一直处于下蹲状态（嗯，bug就是这么产生的……）&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_Down&/span&&span class=&p&&(&/span&&span class=&kt&&bool&/span& &span class=&n&&isDown&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetBool&/span&&span class=&p&&(&/span&&span class=&s&&&IsDown&&/span&&span class=&p&&,&/span& &span class=&n&&isDown&/span&&span class=&p&&);&/span&
&span class=&n&&_isDown&/span& &span class=&p&&=&/span& &span class=&n&&isDown&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&_isJump&/span&&span class=&p&&)&/span& &span class=&c1&&//跳跃时下蹲无效&/span&
&span class=&p&&{&/span&
&span class=&k&&return&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&isDown&/span&&span class=&p&&)&/span& &span class=&c1&&//下蹲时停止移动&/span&
&span class=&p&&{&/span&
&span class=&n&&_StopMove&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&效果如下（看我上下鬼畜！）：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d4d732afe32dff7e0b9c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic1.zhimg.com/v2-d4d732afe32dff7e0b9c_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic1.zhimg.com/v2-d4d732afe32dff7e0b9c_r.jpg&&&/figure&&p&&br&&/p&&p&&b&4.角色冲刺&/b&&/p&&p&角色冲刺时要注意是不受重力影响的，所以在角色处于冲刺状态时将其重力影响设置为0，冲刺结束后再设置回来；并且还要考虑在空中的特殊情况，如果在空中已经冲刺则需要禁止再次触发冲刺状态，以免出现在空中多次冲刺的尴尬场面……&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&c1&&//Update中的相关代码&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&_isDash&/span& &span class=&p&&&&&/span& &span class=&p&&(&/span&&span class=&n&&_stateInfo&/span&&span class=&p&&.&/span&&span class=&n&&IsName&/span&&span class=&p&&(&/span&&span class=&s&&&DashGround&&/span&&span class=&p&&)&/span& &span class=&p&&||&/span& &span class=&n&&_stateInfo&/span&&span class=&p&&.&/span&&span class=&n&&IsName&/span&&span class=&p&&(&/span&&span class=&s&&&DashAir&&/span&&span class=&p&&)))&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&n&&_faceDic&/span& &span class=&p&&*&/span& &span class=&n&&_dashSpeed&/span&&span class=&p&&,&/span& &span class=&m&&0&/span&&span class=&p&&);&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&_stateInfo&/span&&span class=&p&&.&/span&&span class=&n&&normalizedTime&/span& &span class=&p&&&&/span& &span class=&m&&0.9&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&velocity&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&p&&,&/span& &span class=&m&&0&/span&&span class=&p&&);&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&gravityScale&/span& &span class=&p&&=&/span& &span class=&m&&6&/span&&span class=&p&&;&/span&
&span class=&n&&_isDash&/span& &span class=&p&&=&/span& &span class=&k&&false&/span&&span class=&p&&;&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetTrigger&/span&&span class=&p&&(&/span&&span class=&s&&&QuitDash&&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&c1&&//End Update&/span&
&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_Dash&/span&&span class=&p&&()&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&_isAlreadyAirDash&/span&&span class=&p&&)&/span& &span class=&c1&&//如果在空中已经冲刺则返回&/span&
&span class=&p&&{&/span&
&span class=&k&&return&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&if&/span&&span class=&p&&(!&/span&&span class=&n&&_isGrounded&/span&&span class=&p&&)&/span& &span class=&c1&&//在地面和空中分别触发不同的动画&/span&
&span class=&p&&{&/span&
&span class=&n&&_rigidbody&/span&&span class=&p&&.&/span&&span class=&n&&gravityScale&/span& &span class=&p&&=&/span& &span class=&m&&0&/span&&span class=&p&&;&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetTrigger&/span&&span class=&p&&(&/span&&span class=&s&&&AirDash&&/span&&span class=&p&&);&/span&
&span class=&n&&_isAirDash&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&n&&_isAlreadyAirDash&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetTrigger&/span&&span class=&p&&(&/span&&span class=&s&&&GroundDash&&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&n&&_isDash&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&效果如下（请自行脑补xiu~xiu~xiu~的声音）：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-11af65e2dbee48_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic4.zhimg.com/v2-11af65e2dbee48_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic4.zhimg.com/v2-11af65e2dbee48_r.jpg&&&/figure&&p&&br&&/p&&p&&b&5.角色射击&/b&&/p&&p&射击状态是条件限制最多的状态，需要考虑的情况较多。首先，原地站立时按下上键会向上射击。行走时按下射击键会切换到行走射击动画，这里需要运用到blend tree，如果仅按下射击键则将Thresh值设置到向正前方射击的区域；如果还按下了上键，需要将Thresh值设置到斜上方射击的区域；如果放开射击键，还需要将Thresh值设置到初始未射击的区域。如果处于跳跃状态，仅可向正前方和下方发射子弹。好吧，说的我自己都晕了，但这里一定要注意这些细节的处理。&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_Shoot&/span&&span class=&p&&()&/span&
&span class=&p&&{&/span&
&span class=&n&&_shootDic&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&n&&_faceDic&/span&&span class=&p&&,&/span& &span class=&m&&0&/span&&span class=&p&&);&/span& &span class=&c1&&//射击方向，为后面的子弹运动做准备&/span&
&span class=&n&&_bulletBornPos&/span& &span class=&p&&=&/span& &span class=&n&&_standBulletPos&/span&&span class=&p&&;&/span& &span class=&c1&&//子弹产生点&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&_isWalking&/span& &span class=&p&&&&&/span& &span class=&p&&!&/span&&span class=&n&&_isJump&/span&&span class=&p&&)&/span& &span class=&c1&&//在地面行走时射击&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&Input&/span&&span class=&p&&.&/span&&span class=&n&&GetKeyDown&/span&&span class=&p&&(&/span&&span class=&n&&KeyCode&/span&&span class=&p&&.&/span&&span class=&n&&W&/span&&span class=&p&&)&/span& &span class=&p&&||&/span& &span class=&n&&Input&/span&&span class=&p&&.&/span&&span class=&n&&GetKey&/span&&span class=&p&&(&/span&&span class=&n&&KeyCode&/span&&span class=&p&&.&/span&&span class=&n&&W&/span&&span class=&p&&))&/span& &span class=&c1&&//若按下向上按钮，动画变为向斜上方射击的同时步行&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetFloat&/span&&span class=&p&&(&/span&&span class=&s&&&WalkState&&/span&&span class=&p&&,&/span& &span class=&m&&1f&/span&&span class=&p&&);&/span&
&span class=&n&&_shootDic&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&n&&_faceDic&/span&&span class=&p&&,&/span& &span class=&m&&1&/span&&span class=&p&&).&/span&&span class=&n&&normalized&/span&&span class=&p&&;&/span&
&span class=&n&&_bulletBornPos&/span& &span class=&p&&=&/span& &span class=&n&&_walkRightUpBulletPos&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetFloat&/span&&span class=&p&&(&/span&&span class=&s&&&WalkState&&/span&&span class=&p&&,&/span& &span class=&m&&0.333f&/span&&span class=&p&&);&/span&
&span class=&n&&_bulletBornPos&/span& &span class=&p&&=&/span& &span class=&n&&_walkRightBulletPos&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&n&&_timeCount&/span& &span class=&p&&+=&/span& &span class=&n&&Time&/span&&span class=&p&&.&/span&&span class=&n&&deltaTime&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&_timeCount&/span& &span class=&p&&&=&/span& &span class=&m&&0.0165&/span& &span class=&p&&*&/span& &span class=&m&&9&/span&&span class=&p&&)&/span& &span class=&c1&&//设定行走射击的时间间隔&/span&
&span class=&p&&{&/span&
&span class=&n&&_timeCount&/span& &span class=&p&&=&/span& &span class=&m&&0f&/span&&span class=&p&&;&/span&
&span class=&n&&WalkShoot&/span&&span class=&p&&();&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span& &span class=&nf&&if&/span&&span class=&p&&(!&/span&&span class=&n&&_isWalking&/span& &span class=&p&&&&&/span& &span class=&p&&!&/span&&span class=&n&&_isJump&/span&&span class=&p&&)&/span& &span class=&c1&&//原地站立时射击&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetBool&/span&&span class=&p&&(&/span&&span class=&s&&&IsShoot&&/span&&span class=&p&&,&/span& &span class=&k&&true&/span&&span class=&p&&);&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&Input&/span&&span class=&p&&.&/span&&span class=&n&&GetKeyDown&/span&&span class=&p&&(&/span&&span class=&n&&KeyCode&/span&&span class=&p&&.&/span&&span class=&n&&W&/span&&span class=&p&&)&/span& &span class=&p&&||&/span& &span class=&n&&Input&/span&&span class=&p&&.&/span&&span class=&n&&GetKey&/span&&span class=&p&&(&/span&&span class=&n&&KeyCode&/span&&span class=&p&&.&/span&&span class=&n&&W&/span&&span class=&p&&))&/span& &span class=&c1&&//若按下向上按钮则播放向上射击动画&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetFloat&/span&&span class=&p&&(&/span&&span class=&s&&&IdleState&&/span&&span class=&p&&,&/span& &span class=&m&&1f&/span&&span class=&p&&);&/span&
&span class=&n&&_shootDic&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector2&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&p&&,&/span& &span class=&m&&1&/span&&span class=&p&&).&/span&&span class=&n&&normalized&/span&&span class=&p&&;&/span&
&span class=&n&&_bulletBornPos&/span& &span class=&p&&=&/span& &span class=&n&&_standUpBulletPos&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span&
&span class=&p&&{&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetFloat&/span&&span class=&p&&(&/span&&span class=&s&&&IdleState&&/span&&span class=&p&&,&/span& &span class=&m&&0f&/span&&span class=&p&&);&/span&
&span class=&n&&_bulletBornPos&/span& &span class=&p&&=&/span& &span class=&n&&_standBulletPos&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&c1&&//蹲下及跳跃时射击请参考源代码&/span&
&span class=&n&&_isShoot&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&运行效果如下（吃我一发空气弹！）：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-8ee7fb85a5ae179ba49a36_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic2.zhimg.com/v2-8ee7fb85a5ae179ba49a36_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic2.zhimg.com/v2-8ee7fb85a5ae179ba49a36_r.jpg&&&/figure&&h2&&b&让子弹飞&/b&&/h2&&p&角色的基本操作暂时先介绍这么多，接下来要介绍子弹运动及动画效果该如何实现。&/p&&p&首先要做的，是要确定子弹的产生位置，为此，需要在角色身上按照不同的射击动画时手指的位置设置好子弹诞生点：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-cbcbaf924fdb5f57af95b_b.jpg& data-size=&normal& data-rawwidth=&183& data-rawheight=&167& class=&content_image& width=&183&&&figcaption&角色身上挂载的子弹产生点&/figcaption&&/figure&&p&接下来就是该在何时产生子弹，如果是站立或下蹲时射击，则在射击动画的第一帧添加发射子弹的帧事件；若是在行走或跳跃时射击，则按照一定的时间间隔产生子弹。同时在玩家的相关代码中要将射击子弹的消息传递给子弹管理器，这里我采用的是事件传递的方式：&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&public&/span& &span class=&k&&event&/span& &span class=&n&&Action&/span&&span class=&p&&&&/span&&span class=&n&&Vector2&/span&&span class=&p&&,&/span& &span class=&n&&Vector2&/span&&span class=&p&&&&/span& &span class=&n&&OnShoot&/span&&span class=&p&&;&/span& &span class=&c1&&//站立射击实践&/span&
&span class=&k&&public&/span& &span class=&k&&event&/span& &span class=&n&&Action&/span&&span class=&p&&&&/span&&span class=&n&&Vector2&/span&&span class=&p&&,&/span& &span class=&n&&Vector2&/span&&span class=&p&&,&/span& &span class=&n&&Transform&/span&&span class=&p&&&&/span& &span class=&n&&OnWalkShoot&/span&&span class=&p&&;&/span& &span class=&c1&&//行走射击事件&/span&
&span class=&k&&public&/span& &span class=&k&&void&/span& &span class=&nf&&ShootBullet&/span&&span class=&p&&()&/span& &span class=&c1&&//站立射击的帧事件&/span&
&span class=&p&&{&/span&
&span class=&n&&Vector2&/span& &span class=&n&&bornPos&/span& &span class=&p&&=&/span& &span class=&n&&_bulletBornPos&/span&&span class=&p&&.&/span&&span class=&n&&position&/span&&span class=&p&&;&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&OnShoot&/span& &span class=&p&&!=&/span& &span class=&k&&null&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&OnShoot&/span&&span class=&p&&(&/span&&span class=&n&&bornPos&/span&&span class=&p&&,&/span& &span class=&n&&_shootDic&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&span class=&c1&&//行走射击时需要再传一个子弹产生点的transform参数，其余和站立射击相似&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&我们还需要一个子弹管理器来生成子弹，将玩家的射击事件传入并在特定位置创建子弹，同时，我们也可以在这个脚本中管理子弹生成时的特效。这里需要注意的是在行走时射击的话，需要将子弹生成特效的父节点设置为子弹生成点，这样的话，biubiubiu特效就能跟着手指走啦；还需要特别指出一点，向正前方射击时每一颗子弹并不是在同一水平面上的，也就是说，子弹要有一定的垂直偏移，这样才有一种子弹忽上忽下的视觉效果，在代码中就需要一个列表来存储子弹的垂直偏移量，通过循环获取列表的方式改变子弹位置的Y值：&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_OnShoot&/span&&span class=&p&&(&/span&&span class=&n&&Vector2&/span& &span class=&n&&bornPos&/span&&span class=&p&&,&/span& &span class=&n&&Vector2&/span& &span class=&n&&shootDic&/span&&span class=&p&&)&/span& &span class=&c1&&//站立射击&/span&
&span class=&p&&{&/span&
&span class=&kt&&var&/span& &span class=&n&&born&/span& &span class=&p&&=&/span& &span class=&n&&_GetBornInstance&/span&&span class=&p&&();&/span&
&span class=&n&&born&/span&&span class=&p&&.&/span&&span class=&n&&transform&/span&&span class=&p&&.&/span&&span class=&n&&position&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector3&/span&&span class=&p&&(&/span&&span class=&n&&bornPos&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&bornPos&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&p&&-&/span&&span class=&m&&1&/span&&span class=&p&&);&/span&
&span class=&kt&&var&/span& &span class=&n&&bullet&/span& &span class=&p&&=&/span& &span class=&n&&_GetBulletInstance&/span&&span class=&p&&();&/span&
&span class=&n&&bullet&/span&&span class=&p&&.&/span&&span class=&n&&transform&/span&&span class=&p&&.&/span&&span class=&n&&position&/span& &span class=&p&&=&/span& &span class=&n&&_GetOffsetPos&/span&&span class=&p&&(&/span&&span class=&n&&bornPos&/span&&span class=&p&&);&/span&
&span class=&n&&bullet&/span&&span class=&p&&.&/span&&span class=&n&&GetComponent&/span&&span class=&p&&&&/span&&span class=&n&&Bullet&/span&&span class=&p&&&().&/span&&span class=&n&&StartMove&/span&&span class=&p&&(&/span&&span class=&n&&shootDic&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&c1&&//行走射击时需要设置子弹生成特效的父节点，其余和站立射击相似&/span&
&span class=&k&&private&/span& &span class=&n&&Vector3&/span& &span class=&nf&&_GetOffsetPos&/span&&span class=&p&&(&/span&&span class=&n&&Vector2&/span& &span class=&n&&pos&/span&&span class=&p&&)&/span& &span class=&c1&&//获取子弹位置的偏移量&/span&
&span class=&p&&{&/span&
&span class=&kt&&var&/span& &span class=&n&&offsetY&/span& &span class=&p&&=&/span& &span class=&n&&pos&/span&&span class=&p&&.&/span&&span class=&n&&y&/span& &span class=&p&&+&/span& &span class=&n&&_shootOffsets&/span&&span class=&p&&[&/span&&span class=&n&&_curOffsetIndex&/span&&span class=&p&&];&/span&
&span class=&k&&if&/span&&span class=&p&&(&/span&&span class=&n&&_curOffsetIndex&/span& &span class=&p&&&&/span& &span class=&m&&2&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&n&&_curOffsetIndex&/span& &span class=&p&&+=&/span& &span class=&m&&1&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&else&/span&
&span class=&p&&{&/span&
&span class=&n&&_curOffsetIndex&/span& &span class=&p&&=&/span& &span class=&m&&0&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&return&/span& &span class=&k&&new&/span& &span class=&nf&&Vector3&/span&&span class=&p&&(&/span&&span class=&n&&pos&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&offsetY&/span&&span class=&p&&,&/span& &span class=&p&&-&/span&&span class=&m&&1&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&&br&&/p&&p&子弹的运动直接通过改变transform.position实现，这里的重点之一是要将子弹旋转至前进方向，所以在开始运动前要先运用四元旋转改变子弹的rotation值；第二点要注意的是，如果子弹接触到地面或者敌人要有对应的反馈（也就是击中时的帧动画），这里我直接在子弹的预制体上加了trigger，运用trigger enter来判断是否要触发相应动画：&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&public&/span& &span class=&k&&void&/span& &span class=&nf&&StartMove&/span&&span class=&p&&(&/span&&span class=&n&&Vector2&/span& &span class=&n&&shootDir&/span&&span class=&p&&)&/span& &span class=&c1&&//开始运动&/span&
&span class=&p&&{&/span&
&span class=&n&&_isMoving&/span& &span class=&p&&=&/span& &span class=&k&&true&/span&&span class=&p&&;&/span&
&span class=&n&&_moveDir&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector3&/span&&span class=&p&&(&/span&&span class=&n&&shootDir&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&shootDir&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&m&&0&/span&&span class=&p&&).&/span&&span class=&n&&normalized&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&origin&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector3&/span&&span class=&p&&(&/span&&span class=&m&&1&/span&&span class=&p&&,&/span& &span class=&m&&0&/span&&span class=&p&&,&/span& &span class=&m&&0&/span&&span class=&p&&).&/span&&span class=&n&&normalized&/span&&span class=&p&&;&/span&
&span class=&kt&&var&/span& &span class=&n&&rotate&/span& &span class=&p&&=&/span& &span class=&n&&Quaternion&/span&&span class=&p&&.&/span&&span class=&n&&FromToRotation&/span&&span class=&p&&(&/span&&span class=&n&&origin&/span&&span class=&p&&,&/span& &span class=&n&&_moveDir&/span&&span class=&p&&);&/span& &span class=&c1&&//根据子弹前进方向对其旋转&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&n&&transform&/span&&span class=&p&&.&/span&&span class=&n&&rotation&/span& &span class=&p&&=&/span& &span class=&n&&rotate&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_Destroy&/span&&span class=&p&&()&/span& &span class=&c1&&//子弹的销毁&/span&
&span class=&p&&{&/span&
&span class=&n&&Destroy&/span&&span class=&p&&(&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&n&&gameObject&/span&&span class=&p&&);&/span&
&span class=&n&&_isMoving&/span& &span class=&p&&=&/span& &span class=&k&&false&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&OnTriggerEnter2D&/span&&span class=&p&&(&/span&&span class=&n&&Collider2D&/span& &span class=&n&&collision&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&n&&collision&/span&&span class=&p&&.&/span&&span class=&n&&gameObject&/span&&span class=&p&&.&/span&&span class=&n&&layer&/span& &span class=&p&&==&/span& &span class=&n&&_groundLayer&/span&&span class=&p&&.&/span&&span class=&k&&value&/span&&span class=&p&&)&/span& &span class=&c1&&//子弹触碰到地面时触发子弹击中动画&/span&
&span class=&p&&{&/span&
&span class=&n&&_isMoving&/span& &span class=&p&&=&/span& &span class=&k&&false&/span&&span class=&p&&;&/span&
&span class=&n&&_animator&/span&&span class=&p&&.&/span&&span class=&n&&SetTrigger&/span&&span class=&p&&(&/span&&span class=&s&&&Hit&&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&其实，这种直接销毁子弹的方法消耗很大，若想获得更好的运行效率，需要运用到对象池，关于对象池，大家可以参考这篇文章&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&【Unity】工具类系列教程——对象池！&/a&。&/p&&p&一切准备就绪，那么就让子弹飞起来吧：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cfada89c9cf4e1ff1179f8_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic1.zhimg.com/v2-cfada89c9cf4e1ff1179f8_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic1.zhimg.com/v2-cfada89c9cf4e1ff1179f8_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&And More&/b&&/h2&&p&在茶杯头中，角色行走时，冲刺时，落地时均会产生灰尘溅散的效果，满满的都是细节。那么为了表现这些效果，我们同样要先确定好灰尘生成的位置并在玩家脚本中运用事件触发。接着和子弹一样再创建一个灰尘管理器，这里也有个细节需要注意，游戏中行走时的灰尘是有多个种类的（只能佩服制作组的良心），这里我只准备了三个预制体，在每次生成行走灰尘时要随机选取其中的一个：&/p&&div class=&highlight&&&pre&&code class=&language-csharp&&&span&&/span&&span class=&k&&private&/span& &span class=&n&&GameObject&/span& &span class=&nf&&_GetDustInstance&/span&&span class=&p&&(&/span&&span class=&n&&DustType&/span& &span class=&n&&rType&/span&&span class=&p&&)&/span& &span class=&c1&&//根据灰尘的种类获取对应的灰尘预制体&/span&
&span class=&p&&{&/span&
&span class=&k&&switch&/span&&span class=&p&&(&/span&&span class=&n&&rType&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&k&&case&/span& &span class=&n&&DustType&/span&&span class=&p&&.&/span&&span class=&n&&WalkDust&/span&&span class=&p&&:&/span&
&span class=&kt&&int&/span& &span class=&n&&index&/span& &span class=&p&&=&/span& &span class=&n&&Random&/span&&span class=&p&&.&/span&&span class=&n&&Range&/span&&span class=&p&&(&/span&&span class=&m&&0&/span&&span class=&p&&,&/span& &span class=&m&&3&/span&&span class=&p&&);&/span& &span class=&c1&&//获取随机数以便随机获取行走灰尘&/span&
&span class=&k&&return&/span& &span class=&nf&&Instantiate&/span&&span class=&p&&(&/span&&span class=&n&&_dustPrefabList&/span&&span class=&p&&[&/span&&span class=&n&&index&/span&&span class=&p&&]);&/span&
&span class=&k&&case&/span& &span class=&n&&DustType&/span&&span class=&p&&.&/span&&span class=&n&&DashDust&/span&&span class=&p&&:&/span&
&span class=&k&&return&/span& &span class=&nf&&Instantiate&/span&&span class=&p&&(&/span&&span class=&n&&_dashDustPrefab&/span&&span class=&p&&);&/span&
&span class=&k&&case&/span& &span class=&n&&DustType&/span&&span class=&p&&.&/span&&span class=&n&&GroundDust&/span&&span class=&p&&:&/span&
&span class=&k&&return&/span& &span class=&nf&&Instantiate&/span&&span class=&p&&(&/span&&span class=&n&&_groundDustPrefab&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&k&&return&/span& &span class=&k&&null&/span&&span class=&p&&;&/span&
&span class=&p&&}&/span&
&span class=&k&&private&/span& &span class=&k&&void&/span& &span class=&nf&&_CreateDust&/span&&span class=&p&&(&/span&&span class=&n&&Vector2&/span& &span class=&n&&pos&/span&&span class=&p&&,&/span& &span class=&n&&DustType&/span& &span class=&n&&rType&/span&&span class=&p&&)&/span&
&span class=&p&&{&/span&
&span class=&kt&&var&/span& &span class=&n&&instance&/span& &span class=&p&&=&/span& &span class=&n&&_GetDustInstance&/span&&span class=&p&&(&/span&&span class=&n&&rType&/span&&span class=&p&&);&/span&
&span class=&n&&instance&/span&&span class=&p&&.&/span&&span class=&n&&transform&/span&&span class=&p&&.&/span&&span class=&n&&position&/span& &span class=&p&&=&/span& &span class=&k&&new&/span& &span class=&n&&Vector3&/span&&span class=&p&&(&/span&&span class=&n&&pos&/span&&span class=&p&&.&/span&&span class=&n&&x&/span&&span class=&p&&,&/span& &span class=&n&&pos&/span&&span class=&p&&.&/span&&span class=&n&&y&/span&&span class=&p&&,&/span& &span class=&p&&-&/span&&span class=&m&&2&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&p&最终的效果就像下面这样啦（突然就酷炫了起来）：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-cc02310ed4fca95afb6e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&912& data-rawheight=&702& data-thumbnail=&https://pic2.zhimg.com/v2-cc02310ed4fca95afb6e_b.jpg& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic2.zhimg.com/v2-cc02310ed4fca95afb6e_r.jpg&&&/figure&&p&&br&&/p&&p&那么本期就介绍到这里了，完整代码请移步&a href=&https://link.zhihu.com/?target=https%3A//github.com/Yukimine33/CupheadCodeByMyself& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Yukimine33/CupheadCodeByMyself&/a&。其实角色逻辑并不难，但要有足够的耐心去调整细节，还要把大量的精力放在裁剪图片及制作帧动画上，可想而知制作组花费了多少心血才能给玩家带来这样一部作品，也希望大家去多多支持这样的良心作品（购买链接：&a href=&https://link.zhihu.com/?target=http%3A//store.steampowered.com/app/268910/Cuphead/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Cuphead on Steam&/a&）。下一期将补全角色的基本操作并开始Boss的制作，敬请期待（内心os：还有好多图要裁啊，还有好多代码要调整修改啊，也许摸了~）&/p&&p&&br&&/p&&p&&br&&/p&&p&噢，对了，有想学习游戏开发的同学，可移步至&a href=&https://link.zhihu.com/?target=http%3A//www.levelpp.com& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&levelpp.com&/span&&span class=&invisible&&&/span&&/a&围观一波哟。&/p&&p&&/p&&p&&/p&&p&&/p&
本工程难度：★★☆☆☆前言12月8日，TGA 2017各项获奖名单公布，茶杯头(Cuphead)获得最佳艺术指导和最佳独立游戏两项大奖，可谓实至名归。记得6月的时候我还在苦苦等待某狗头人的黑暗剑21（已经不存在了），在看E3发布会直播时，一款名为茶杯头的游戏立刻…
&figure&&img src=&https://pic2.zhimg.com/v2-b3061ed75eec733ed289e8b2_b.jpg& data-rawwidth=&1809& data-rawheight=&1017& class=&origin_image zh-lightbox-thumb& width=&1809& data-original=&https://pic2.zhimg.com/v2-b3061ed75eec733ed289e8b2_r.jpg&&&/figure&&p&&strong&早上无意发现这两个网站，超赞，迫不及待想分享给大家。&/strong&&/p&&p&相信大家都会去网络找些素材，不论做PPT还是其他，一些必备的搜索技能十分重要，譬如掌握些搜索语法或如何避免百度留坑，这些技巧算不上难，但却能迅速提高工作效率。&/p&&p&关于素材，以前都整理过些，大都按文字、图片、icon等分类，虽然全面但有些繁琐，除非平时有积累，否则现用现找效率也很低。&/p&&p&现在有这两工具就没问题了。&/p&&br&&p&&strong&【1】&/strong&&/p&&a href=&https://link.zhihu.com/?target=http%3A//duososo.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&多搜搜 - 图片搜索 - PPT模版&/a&&p&早上无意发现，多搜搜是一个素材搜索平台，集：图片、icon、文档、APP搜索等一体，非常方便。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-dbbeab3d1c9618_b.jpg& data-rawwidth=&1303& data-rawheight=&874& class=&origin_image zh-lightbox-thumb& width=&1303& data-original=&https://pic2.zhimg.com/v2-dbbeab3d1c9618_r.jpg&&&/figure&&p&以图片为例：&/p&&p&许多国外图库需用英文搜索稍繁琐，但多搜搜却不必，它支持中文直接转换英文，而且能显示许多图库的结果。&/p&&p&&figure&&img src=&https://pic1.zhimg.com/v2-14ada4bc9a37b2ed3c2f_b.jpg& data-rawwidth=&1276& data-rawheight=&894& class=&origin_image zh-lightbox-thumb& width=&1276& data-original=&https://pic1.zhimg.com/v2-14ada4bc9a37b2ed3c2f_r.jpg&&&/figure&当然除了图片，多搜搜还支持许多其他：&figure&&img src=&https://pic2.zhimg.com/v2-df5c25b371aa_b.jpg& data-rawwidth=&1341& data-rawheight=&453& class=&origin_image zh-lightbox-thumb& width=&1341& data-original=&https://pic2.zhimg.com/v2-df5c25b371aa_r.jpg&&&/figure&&/p&&p&与图片相同，搜其他时也能显示大多主流网站结果，赞！&/p&&p&&strong&【2】&/strong&&/p&&a href=&https://link.zhihu.com/?target=http%3A//so.chongbuluo.com/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&so.chongbuluo.com/&/span&&span class=&invisible&&&/span&&/a&&p&快搜上内容比多搜搜内容更全，而且分类更细，用起来也很方便。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3b3ee0ee0fc49b4413fffefb36c2fc4c_b.jpg& data-rawwidth=&1303& data-rawheight=&857& class=&origin_image zh-lightbox-thumb& width=&1303& data-original=&https://pic4.zhimg.com/v2-3b3ee0ee0fc49b4413fffefb36c2fc4c_r.jpg&&&/figure&&p&而且找些与学术相关资源时，快搜更便捷。似乎可以直接用Google搜索，至少我的电脑目前是。以医学为例，&strong&关键词：doctor。&/strong&&/p&&p&快搜中选Google：&/p&&p&&figure&&img src=&https://pic1.zhimg.com/v2-bb62c16b9c79c8cfe4f5b_b.jpg& data-rawwidth=&1242& data-rawheight=&928& class=&origin_image zh-lightbox-thumb& width=&1242& data-original=&https://pic1.zhimg.com/v2-bb62c16b9c79c8cfe4f5b_r.jpg&&&/figure&百度：&figure&&img src=&https://pic3.zhimg.com/v2-bf829d6be78_b.jpg& data-rawwidth=&1323& data-rawheight=&886& class=&origin_image zh-lightbox-thumb& width=&1323& data-original=&https://pic3.zhimg.com/v2-bf829d6be78_r.jpg&&&/figure&&/p&&p&嗯，这很百度。&/p&&p&快搜支持很多，大家一试便知，不详述了。&/p&&p&&strong&【3】&/strong&&/p&&a href=&https://link.zhihu.com/?target=https%3A//imagecyborg.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Image Cyborg · HOME&/a&&p&imagecyborg是一个图片下载工具，用来下载些有版权网站图片，时常引起争议，建议大家不要商用，学习交流即可。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-c65fb3ec4c1fc32b5cdd402_b.jpg& data-rawwidth=&1264& data-rawheight=&852& class=&origin_image zh-lightbox-thumb& width=&1264& data-original=&https://pic1.zhimg.com/v2-c65fb3ec4c1fc32b5cdd402_r.jpg&&&/figure&&br&&p&以500px为例，以前下载都用插件或F12里找链接，稍繁琐，现在有imagecyborg就都不必了。&/p&&p&复制图片链接到imagecyborg里去。&/p&&p&然后选择下载文件里最大那张，就是原图。&/p&&p&理论上imagecyborg适用所有图片网站，但时常非议，大家善用吧，不要给自己平添烦恼。&/p&&p&&strong&【4】如何管理素材&/strong&&/p&&p&以前总是喜欢写许多教程与技巧，反而忽视整理与总结，但这也十分重要。从上仨网站基本能解决素材来源，一些必要的整理也不能少，否则用时找不到也无用。&/p&&p&&strong&一些个人小经验：）&/strong&&/p&&p&&strong&1、整理体系&/strong&&br&&/p&&p&首先要花些时间整理体系，依据平日习惯设计文件夹层次与结构。这不仅仅适用素材整理，其他也是相同。&/p&&blockquote&&p&&strong&&em&常用PPT素材分类：&/em&&/strong&&/p&&p&&strong&&em&A图片、&/em&&em&B文字、&/em&&em&C图标、&/em&&em&D图表、&/em&&em&E模板......（依次类推）&/em&&/strong&&/p&&/blockquote&&p&推荐以字母序列分类素材，逻辑清晰。&/p&&p&&strong&2、正确命名文件夹&/strong&&/p&&p&如果用了ABC等分，文件夹命名推荐：A01、A02、A03...&/p&&br&&blockquote&&p&&strong&&em&A类：图片素材&/em&&/strong&&/p&&ul&&li&&p&&strong&&em&A01-科技类&/em&&/strong&&/p&&/li&&li&&p&&strong&&em&A02-风景类&/em&&/strong&&/p&&/li&&li&&p&&strong&&em&A03-人物类&/em&&/strong&&/p&&/li&&li&&p&&strong&&em&（依次添加）&/em&&/strong&&/p&&/li&&/ul&&/blockquote&&p&其他也是如此。不过有两个注意点：&/p&&p&1、常用文档编号给小，添加在前。&/p&&p&2、命名时如与时间有关，可加上作为前缀或后缀，用“-”隔开。&/p&&p&&strong&3、善用快速访问/常用文件夹&/strong&&/p&&p&Win10文件资源管理器有快速访问和常用文件夹功能，可以添加常用到这里，类似PPT中快速访问工具栏。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ea6d8ee88f1dc_b.jpg& data-rawwidth=&1245& data-rawheight=&1350& class=&origin_image zh-lightbox-thumb& width=&1245& data-original=&https://pic2.zhimg.com/v2-ea6d8ee88f1dc_r.jpg&&&/figure&&br&&p&&strong&4、善用搜索&/strong&&/p&&p&Win与Mac不同，没有Alfred，搜索电脑文档时有些不便。不过都可解决。&/p&&ul&&li&&p&&strong&用好CORTANA&/strong&&br&&/p&&/li&&/ul&&p&小娜搜索文件功能还是很赞，直接输入基本都能找到，而且支持按类别搜索。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ddd939a2f63a7_b.jpg& data-rawwidth=&1338& data-rawheight=&1303& class=&origin_image zh-lightbox-thumb& width=&1338& data-original=&https://pic3.zhimg.com/v2-ddd939a2f63a7_r.jpg&&&/figure&&ul&&li&&p&&strong&everything&/strong&&br&&/p&&/li&&/ul&&p&一款Win的搜索小工具，相当于Mac下Alfred，速度极快，但在Ul设计上可能稍差些，不过还是比Win自带搜索好多了。&/p&&p&输入关键词，直接找到全部本机相关文件，&strong&速度极快！！！&/strong&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-28e818d0a4ecf596deda1c_b.jpg& data-rawwidth=&1219& data-rawheight=&1065& class=&origin_image zh-lightbox-thumb& width=&1219& data-original=&https://pic2.zhimg.com/v2-28e818d0a4ecf596deda1c_r.jpg&&&/figure&&p&Everthing免费下载与使用，地址：&a href=&https://link.zhihu.com/?target=http%3A//www.voidtools.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&voidtools&/a&&/p&&p&&i&-----------------------------&/i&&/p&&p&其他阅读：&/p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&毕业就转行，这个医学生到底在想些什么？ - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&还在不断收藏网站？其实只要掌握这些搜索技巧就够了。 - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&我有一个舍友，他腐烂在了大学宿舍。 - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&六步搞定毕业论文排版，导师都为你转身了。 - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&相信我，这篇文章足以颠覆你对Office的三观。- 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&我是怎样每天看完100个公众号的？ - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&大学四年，Kindle竟成了我最好朋友。 - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&学会这三个排版技巧，普通人也能做设计。 - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&昨天，因为这篇EXCEL教程，我卸载了王者荣耀。 - 一周进步&/a&&br&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&如果你也担心密码泄露，请看下这份秘籍。 - 一周进步&/a&&br&&p&-------------------------------------------&/p&&p&更多干货欢迎阅读：&a href=&https://link.zhihu.com/?target=http%3A//mp.weixin.qq.com/mp/homepage%3F__biz%3DMzIxMjI1MDcyMQ%3D%3D%26hid%3D12%26sn%3D999f3d61a4d6ae2eb40a%23wechat_redirect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&一周进步文章精选&/a&&/p&&p&一周进步（WeChatID：weekweekup），青年兴趣课堂，每周一场训练营，让年轻轰炸你的每个兴趣点。欢迎大家关注一周的微信公众号，和我们一起进步。&/p&&p&希望有助，顺颂时祺。&/p&
早上无意发现这两个网站，超赞，迫不及待想分享给大家。相信大家都会去网络找些素材，不论做PPT还是其他，一些必备的搜索技能十分重要，譬如掌握些搜索语法或如何避免百度留坑，这些技巧算不上难，但却能迅速提高工作效率。关于素材，以前都整理过些，大都…
&figure&&img src=&https://pic1.zhimg.com/v2-69f9c9ec3ebab5fa2a934f3698bbeaf4_b.jpg& data-rawwidth=&1920& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-69f9c9ec3ebab5fa2a934f3698bbeaf4_r.jpg&&&/figure&&b&首先感谢&/b& &a data-hash=&be7c7a5624663caecc4b3b1cc8fa20c6& href=&http://www.zhihu.com/people/be7c7a5624663caecc4b3b1cc8fa20c6& class=&member_mention& data-hovercard=&p$b$be7c7a5624663caecc4b3b1cc8fa20c6& data-editable=&true& data-title=&@孙峤&&@孙峤&/a& &b&， 不光是组纽图案的绘制，基本大部分的工作都是他完成的&/b&（我只做了下适配打包之类的）&p&关于组纽：&/p&&p&&figure&&img src=&https://pic3.zhimg.com/v2-3fcdedba1d77a_b.jpg& data-rawwidth=&1050& data-rawheight=&930& class=&origin_image zh-lightbox-thumb& width=&1050& data-original=&https://pic3.zhimg.com/v2-3fcdedba1d77a_r.jpg&&&/figure&来源：&a href=&http://link.zhihu.com/?target=http%3A//www.bilibili.com/video/av7399825/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【导演新海诚全纪录】每一部作品都有自己的生命。【1080P官方源】_电影相关_电影_bilibili_哔哩哔哩&/a&&br&&/p&&p&&b&实拍自东宝出品的《君の名は。》电影院场刊Vol.1&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-d78e732c94caa0ad361d4f94ae13193f_b.jpg& data-rawwidth=&2442& data-rawheight=&2763& class=&origin_image zh-lightbox-thumb& width=&2442& data-original=&https://pic4.zhimg.com/v2-d78e732c94caa0ad361d4f94ae13193f_r.jpg&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/v2-fe80a74ddcff_b.jpg& data-rawwidth=&3664& data-rawheight=&4888& class=&origin_image zh-lightbox-thumb& width=&3664& data-original=&https://pic4.zhimg.com/v2-fe80a74ddcff_r.jpg&&&/figure&&br&&p&&b&本Chrome主题背景适用于屏幕分辨率长度在1920以下的显示设备上&/b&（一开始想适配5K iMac，但Chrome主题背景的背景图对低于背景图分辨率的设备没有缩放，只会截取中间部分，所以就没做）&/p&&p&&b&目前本主题背景未上架至Chrome网上应用店，不知上传是否属于侵权&/b&&/p&&p&&b&禁止将本主题背景、主题背景的素材用于任何商业用途&/b&&/p&&p&安装完大概是这个样子（下）：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-4dd5036c37aaa784c95a444e6c52418a_b.png& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&https://pic3.zhimg.com/v2-4dd5036c37aaa784c95a444e6c52418a_r.jpg&&&/figure&&p&希望大家能喜欢这款主题背景，另外，本专栏可能以后会定期更新，还请持续关注（如果有什么好的建议可以在评论区提）&/p&&p&&br&下载地址：&/p&&p&链接: &a href=&http://link.zhihu.com/?target=http%3A//pan.baidu.com/s/1mhXk9lA& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&pan.baidu.com/s/1mhXk9l&/span&&span class=&invisible&&A&/span&&span class=&ellipsis&&&/span&&/a& 密码: 8zpm&/p&
， 不光是组纽图案的绘制，基本大部分的工作都是他完成的（我只做了下适配打包之类的）关于组纽：来源： 实拍自东宝出品的《君の名は。》电…
&figure&&img src=&https://pic4.zhimg.com/v2-6384ddf5bff02a4eecac8_b.jpg& data-rawwidth=&820& data-rawheight=&356& class=&origin_image zh-lightbox-thumb& width=&820& data-original=&https://pic4.zhimg.com/v2-6384ddf5bff02a4eecac8_r.jpg&&&/figure&&p&这个是国外一个工程师的总结，作为&a href=&https://zhuanlan.zhihu.com/frontend-developer& class=&internal&&前端技术文章精选&/a&专栏的开篇文章，未来将持续给大家精选国内外优质技术文章。也欢迎大家私信给我推荐。&/p&&blockquote&&p&2017 年 Web 开发工程师技术发展路线图&/p&&/blockquote&&p&下面的脑图展现了前端、后端以及 devops 技术栈的发展路线图，作者起初做这份技术发展脑图是给初学者和学生们准备的。&/p&&h2&? 简介&/h2&&br&&figure&&img src=&https://pic1.zhimg.com/v2-a7d6ad382b4ba3_b.jpg& data-rawwidth=&1129& data-rawheight=&439& class=&origin_image zh-lightbox-thumb& width=&1129& data-original=&https://pic1.zhimg.com/v2-a7d6ad382b4ba3_r.jpg&&&/figure&&br&&br&&h2&? 前端开发工程师路线图&/h2&&br&&figure&&img src=&https://pic1.zhimg.com/v2-7cc261fe03fc_b.jpg& data-rawwidth=&1170& data-rawheight=&1526& class=&origin_image zh-lightbox-thumb& width=&1170& data-original=&https://pic1.zhimg.com/v2-7cc261fe03fc_r.jpg&&&/figure&&br&&br&&h2&? 后端开发工程师路线图&/h2&&p&对于后端方面的技术，原作者表示比较喜欢和看好Nodejs、PHP7 以及 Ruby ，我自己觉得在国内来说 Nodejs 和 React Native 是目前很多前端开发工程师热衷探索的技术，而 Ruby 技术在国内始终不温不火，PHP技术比较传统。建议初学者们还是选择岗位更多的技术栈学习，当然如果你有自己喜欢的技术栈，那就可以暂时不考虑市场因素！&/p&&br&&figure&&img src=&https://pic3.zhimg.com/v2-d1f34affeae1bcfb3d72e5_b.jpg& data-rawwidth=&1193& data-rawheight=&1859& class=&origin_image zh-lightbox-thumb& width=&1193& data-original=&https://pic3.zhimg.com/v2-d1f34affeae1bcfb3d72e5_r.jpg&&&/figure&&br&&br&&h2&? DevOps 开发工程师发展路线图&/h2&&br&&figure&&img src=&https://pic1.zhimg.com/v2-440e0c9ee33ef8f2a59cdcd8_b.jpg& data-rawwidth=&1280& data-rawheight=&1664& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic1.zhimg.com/v2-440e0c9ee33ef8f2a59cdcd8_r.jpg&&&/figure&&br&&br&&p&GitHub链接：&a href=&https://link.zhihu.com/?target=https%3A//github.com/kamranahmedse/developer-roadmap& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&kamranahmedse/developer-roadmap&/a&&/p&
这个是国外一个工程师的总结，作为专栏的开篇文章，未来将持续给大家精选国内外优质技术文章。也欢迎大家私信给我推荐。2017 年 Web 开发工程师技术发展路线图下面的脑图展现了前端、后端以及 devops 技术栈的发展路线图，作者起初做这份技…
&figure&&img src=&https://pic2.zhimg.com/v2-bfc9c0f0b8668f3ecf84ac5da71d9aea_b.jpg& data-rawwidth=&912& data-rawheight=&364& class=&origin_image zh-lightbox-thumb& width=&912& data-original=&https://pic2.zhimg.com/v2-bfc9c0f0b8668f3ecf84ac5da71d9aea_r.jpg&&&/figure&花费了一个月时间，终于在新养车之家项目中成功部署了vue2服务端渲染（SSR），并且使用上了Vuex 负责状态管理，首屏加载时间从之前4G网络下的1000ms，提升到了现在500-700ms之间，SSR的优势有很多，现在让我来跟你细细道来。&h2&&b&技术栈&/b&&/h2&&p&服务端：Nodejs（v6.3）&/p&&p&前端框架 Vue2.1.10&/p&&p&前端构建工具：webpack2.2 && gulp&/p&&p&代码检查：eslint&/p&&p&源码：es6&/p&&p&前端路由：vue-router2.1.0&/p&&p&状态管理：vuex2.1.0&/p&&p&服务端通信：axios&/p&&p&日志管理：log4js&/p&&p&项目自动化部署工具：jenkins&/p&&br&&h2&Vue2与服务端渲染（SSR）&/h2&&p&Vue2.0在服务端创建了虚拟DOM，因此可以在服务端可以提前渲染出来，解决了单页面一直存在的问题：SEO和初次加载耗时较多的问题。同时在真正意义上做到了前后端共用一套代码。&br&&/p&&br&&h2&SSR的实现原理&/h2&&p&客户端请求服务器，服务器根据请求地址获得匹配的组件，在调用匹配到的组件返回 Promise (官方是preFetch方法)来将需要的数据拿到。最后再通过&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&&script&window.__initial_state=data&/script&
&/code&&/pre&&/div&&p&将其写入网页，最后将服务端渲染好的网页返回回去。&/p&&p&接下来客户端会将vuex将写入的 __initial_state__ 替换为当前的全局状态树，再用这个状态树去检查服务端渲染好的数据有没有问题。遇到没被服务端渲染的组件，再去发异步请求拿数据。说白了就是一个类似React的 shouldComponentUpdate 的Diff操作。&/p&&p&Vue2使用的是单向数据流，用了它，就可以通过 SSR 返回唯一一个全局状态， 并确认某个组件是否已经SSR过了。&/p&&br&&h2&开启服务端渲染（SSR）&/h2&&p&Web框架目前我们使用的是express，之前使用过一次时间的koa来做SSR，结果发现坑很多，相关的案例太少，有些坑不太好解决，所以为了线上项目的稳定，从而选择了express。&br&&/p&&br&&h2&SSR流程图&/h2&&figure&&img src=&https://pic2.zhimg.com/v2-08daea42dbf25b68dc743a_b.jpg& data-rawwidth=&1946& data-rawheight=&892& class=&origin_image zh-lightbox-thumb& width=&1946& data-original=&https://pic2.zhimg.com/v2-08daea42dbf25b68dc743a_r.jpg&&&/figure&&h2&安装SSR相关&/h2&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&npm install --save express vue-server-renderer lru-cache es6-promise serialize-javascript vue vue-router axios
&/code&&/pre&&/div&&p&vue更新到2.0之后，作者就宣告不再对vue-resource更新，并且vue-resource不支持SSR，所以我推荐使用axios, 在服务端和客户端可以同时使用。&br&&/p&&p&vue2使用了虚拟DOM, 因此对浏览器环境和服务端环境要分开渲染, 要创建两个对应的入口文件。&br&&/p&&p&&b&浏览器入口文件 client-entry.js&/b&&br&&/p&&p&使用 $mount 直接挂载&br&&/p&&p&&b&服务端入口文件 server-entry&/b&&br&&/p&&p&使用vue的SSR功能直接将虚拟DOM渲染成网页&br&&/p&&br&&p&&b&client-entry.js 文件&/b&&/p&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import 'es6-promise/auto';
import { app, store } from './app';
store.replaceState(window.__INITIAL_STATE__);
app.$mount('#app');
&/code&&/pre&&/div&&p&在
client-entry.js 文件中引入了app.js, 判断如果在服务端渲染时已经写入状态，则将vuex的状态进行替换，使得服务端渲染的html和vuex管理的数据是同步的。然后将vue实例挂载到html指定的节点中。&/p&&p&&b&server-entry 文件&/b&&br&&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&app&/span&&span class=&p&&,&/span& &span class=&nx&&router&/span&&span class=&p&&,&/span& &span class=&nx&&store&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'./app'&/span&&span class=&p&&;&/span&
&span class=&kr&&const&/span& &span class=&nx&&isDev&/span& &span class=&o&&=&/span& &span class=&nx&&process&/span&&span class=&p&&.&/span&&span class=&nx&&env&/span&&span class=&p&&.&/span&&span class=&nx&&NODE_ENV&/span& &span class=&o&&!==&/span& &span class=&s1&&'production'&/span&&span class=&p&&;&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&nx&&context&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&s&/span& &span class=&o&&=&/span& &span class=&nx&&isDev&/span& &span class=&o&&&&&/span& &span class=&nb&&Date&/span&&span class=&p&&.&/span&&span class=&nx&&now&/span&&span class=&p&&();&/span&
&span class=&nx&&router&/span&&span class=&p&&.&/span&&span class=&nx&&push&/span&&span class=&p&&(&/span&&span class=&nx&&context&/span&&span class=&p&&.&/span&&span class=&nx&&url&/span&&span class=&p&&);&/span&
&span class=&kr&&const&/span& &span class=&nx&&matchedComponents&/span& &span class=&o&&=&/span& &span class=&nx&&router&/span&&span class=&p&&.&/span&&span class=&nx&&getMatchedComponents&/span&&span class=&p&&();&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&o&&!&/span&&span class=&nx&&matchedComponents&/span&&span class=&p&&.&/span&&span class=&nx&&length&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nb&&Promise&/span&&span class=&p&&.&/span&&span class=&nx&&reject&/span&&span class=&p&&({&/span& &span class=&nx&&code&/span&&span class=&o&&:&/span& &span class=&s1&&'404'&/span& &span class=&p&&});&/span&
&span class=&p&&}&/span&
&span class=&k&&return&/span& &span class=&nb&&Promise&/span&&span class=&p&&.&/span&&span class=&nx&&all&/span&&span class=&p&&(&/span&&span class=&nx&&matchedComponents&/span&&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&component&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&component&/span&&span class=&p&&.&/span&&span class=&nx&&preFetch&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nx&&component&/span&&span class=&p&&.&/span&&span class=&nx&&preFetch&/span&&span class=&p&&(&/span&&span class=&nx&&store&/span&&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&})).&/span&&span class=&nx&&then&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nx&&app&/span&&span class=&p&&;&/span&
&span class=&p&&});&/span&
&span class=&p&&};&/span&
&/code&&/pre&&/div&&br&&p&在
server-entry 文件中服务端会传递一个context对象，里面包含当前用户请求的url，vue-router 会跳转到当前请求的url中，通过 router.getMatchedComponents( ) 来获得当前匹配组件，则去调用当前匹配到的组件里的 preFetch 钩子，并传递store（Vuex下的状态），会返回一个 Promise 对象，并在then方法中将现有的vuex state 赋值给context，给服务端渲染使用，最后返回vue实例，将虚拟DOM渲染成网页。服务端会将vuex初始状态也生成到页面中。 如果 vue-router 没有匹配到请求的url，直接返回 Promise中的reject方法，传入404，这时候会走到下方renderStream的error事件，让页面显示错误信息。&/p&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// 处理所有的get请求&/span&
&span class=&nx&&app&/span&&span class=&p&&.&/span&&span class=&nx&&get&/span&&span class=&p&&(&/span&&span class=&