学习# Adobe# Canvas# AN# GenJi

Software-AN

学习自 B 站 UP 主 GenJi是真想教会你 & TL天洛。

资源

哈喽！各位小可爱终于等到你这是【AN】已经跟新的课程的素材哦本素材会陆续更新，小可爱们回复 AN 就可以获取 【0-1-AN 如何安装】-本节课没有素材哦~

【0-2-AN 界面篇】-本节课没有素材哦，小伙伴们认真听 Genji 老师讲解并做笔记~

【1-1-AN 如何绘制一个基础图案】链接：https://pan.baidu.com/s/14TM5wfdvy9i7whDBaMDu1A 提取码：0000

【1-2-罗小黑逐帧动画是如何制作的】链接：https://pan.baidu.com/s/1fLM-oW_OpFQl538BpsK50w 提取码：0000

【1-3-传统补间动画制作】 【1-3.1-传统补间动画制作-开屏动画】 【1-3.2-传统补间动画制作-闪耀字母】链接：https://pan.baidu.com/s/1jli9HpHcsfpa3GqekG8QMA 提取码：0000

【2-1 引导层建立投篮动画】链接：https://pan.baidu.com/s/17wjkrLxZw3iJZ-Bz2N08ww 提取码：0000

【2-2 遮罩图层建立地球仪】链接：https://pan.baidu.com/s/1RzEYYikYlysofgatX2ubvw 提取码：0000

课程

【0-2-AN先导课】- AN界面篇

  • F5 创建普通帧。

  • Shift + F5 删除帧。

  • F6 创建关键帧。

  • F7 创建空白关键帧。

【1-1-AN入门课】- AN如何绘制一个基础图案

png

​ 工程下新建一个帧，拖入素材，将这个图层锁了，再新建一个图层。

png

​ 矩形工具按 Shift 拉一个正方形，颜色面板选择线性渐变，油漆桶拉上去。

png

​ 钢笔工具扣一个"f"，油漆桶图上白色。

【1-2-AN入门课】- 罗小黑逐帧动画是如何制作的

png

​ 导入多张图片，交叉操作按 F7 拖入图片将这些图片按顺序放在每一帧中。Alt + Shift + E 编辑多个帧。

​ Ctrl + A 选择所有帧的图片。

png

​ 使用对齐将它们对齐，拉到适应大小。

png

​ Ctrl + Enter 浏览动画。

png

​ 减缓动画播放速度。选中某帧，按 F5 复制一个新的帧。

gif

​ 最终效果。

【1-3-AN入门课】- 传统补间动画制作

png

​ 矩形工具拉一个正方形，F8 转换为图形元件。

png

​ 在另一关键帧上随意变换这个元件。

png

​ 在前一段关键帧中，创建传统补间。

png

​ Ctrl + C 复制元件。

​ Ctrl + Shift + V粘贴元件，且粘贴位置与复制帧的位置相同。

gif

​ 最终效果。

【1-3.1-AN练习课】- 传统补间动画制作开屏动画

png

​ 选中传统补间动画的某一帧，可以修改补间的效果曲线。

gif

​ 最终效果。

【1-3.2-AN练习课】- 传统补间动画制作闪耀字母

png

​ 文字工具打字，然后选中这个文字，Ctrl + B 将文字打散。

png

​ Ctrl + X 和 Ctrl + Shift + V 交替操作让各个字符处于各个图层中。

png

​ 创建补间动画：

  • G 不透明度：100%-10%-50%-100%
  • E 不透明度：50%-100%-10%-50%
  • N 不透明度：10%-50%-100%-10%
gif

​ 最终效果。

【2-1-AN小白课】- 引导层建立投篮动画

png

​ 导入篮球素材，转换为元件。

png

​ 新建一个图层，用钢笔工具画一个路径。

png

​ 将这个图层转换为引导层。

png

​ 将篮球图层放到引导图层下面。

png

​ 创建补间动画，设置补间效果，给它整一个逆时针 5 圈的旋转。

gif

​ 最终效果。

【2-2-AN小白课】- 遮罩图层建立地球仪

png

​ 画布中新建一个图层，用椭圆工具画一个圆，放在地图动画的顶层，将这个图层设为遮罩层。

gif

​ 最终效果。

使用 AN 制作 HTML5 小游戏-教程 01【Adobe Animate CC】

png

​ 新建一个 HTML5 Canvas 工程。

png

​ 将临摹图导入工程中。

png

​ 降低不透明度，上锁，再新建一个图层用于临摹。

png

​ 用钢笔描绘人物，头，身体，手臂，手掌，臀部，腿，脚分别用 Ctrl + G 结组。

​ 双击某个组，可以单独编辑某个组。

png

​ 用油漆桶工具一阵上色，如果发现某些区域上不了色，就检查路径是否闭合。

使用 AN 制作 HTML5 小游戏-教程 02【Adobe Animate CC】

png

​ 用各种工具描出背景。

png

​ 给背景上色。关于阴影，可以先划线画出阴影区域，上色后再将线删去。

png

​ 新建一个图层，画武器。

png

​ 画按钮。转换成按钮元件。

png

​ 转换后编辑它，会出现四个关键帧：弹起，指向，按下，点击。编辑它们。

png

​ 水平翻转整一个左边的按钮。

使用 AN 制作 HTML5 小游戏-教程 03【Adobe Animate CC】

png

​ 使用 Ctrl + X 和 Ctrl + Shift + V 将人物各个部分放在各个图层中。

png

​ 将人物各个部分转换为元件。

png

​ 按 Q 键调整元件的轴心位置。

png

​ 制作传统补间动画。

png

​ 一阵操作。

png

​ 最后将整个人物的锚点放到他的头顶上。

使用 AN 制作 HTML5 小游戏-教程 04【Adobe Animate CC】

png

​ 对于按钮，设置好它的名称。（this.left 和 this.right）

png

​ 给人物设置一个影片剪辑，设置好它的名称。（this.player）

png

​ 打开 代码片断 和 动作 窗口，设置按钮监听和人物绑定。

javascript
var speed = 30;
var isOnLeft = false;
var isOnRight = false;
var keyCode = 0;
 
this.left.addEventListener("click", onLeft.bind(this));
 
function onLeft()
{
	isOnLeft = true;
}
 
this.right.addEventListener("click", onRight.bind(this));
 
function onRight()
{
	isOnRight = true;
}
 
this.player.addEventListener("tick", Update.bind(this));
 
function Update()
{
	Move(this.player);
}
 
document.addEventListener("keydown", function(e)
{
	e = e || window.event;
	keyCode = e.keyCode || e.which || e.charCode;
	if(keyCode == 65) // A
	{
		isOnLeft = true;
	}
	if(keyCode == 68)  // D
	{
		isOnRight = true;
	}
})
 
function Move(MC)
{
	if(isOnLeft && MC.x > 250)
	{
		MC.x -= speed;
	}
	if(isOnRight && MC.x <= 1870)
	{
		MC.x += speed;
	}
	isOnLeft = isOnRight = false;
}
  • click 表示按下时执行监听函数。
  • tick 表示随时随地执行监听函数。

​ 之后就是按下按钮（this.left 和 this.right）/ 对应键盘 使得人物（this.player）移动的逻辑。

使用 AN 制作 HTML5 小游戏-教程 05【Adobe Animate CC】

png

​ 给这几个武器都设好影片剪辑和名称。（weapon1、weapon2、weapon3、weapon4、weapon5）

javascript
var speed = 30;
var weaponSpeed = 30;
var isOnLeft = false;
var isOnRight = false;
var keyCode = 0;
 
this.left.addEventListener("click", onLeft.bind(this));
 
function onLeft()
{
	isOnLeft = true;
}
 
this.right.addEventListener("click", onRight.bind(this));
 
function onRight()
{
	isOnRight = true;
}
 
this.player.addEventListener("tick", Update.bind(this));
 
function Update()
{
	Move(this.player);
	Weapon(this.weapon1, this.player);
	Weapon(this.weapon2, this.player);
	Weapon(this.weapon3, this.player);
	Weapon(this.weapon4, this.player);
	Weapon(this.weapon5, this.player);
}
 
document.addEventListener("keydown", function(e)
{
	e = e || window.event;
	keyCode = e.keyCode || e.which || e.charCode;
	if(keyCode == 65) // A
	{
		isOnLeft = true;
	}
	if(keyCode == 68)  // D
	{
		isOnRight = true;
	}
})
 
function Move(MC)
{
	if(isOnLeft && MC.x > 250)
	{
		MC.x -= speed;
	}
	if(isOnRight && MC.x <= 1870)
	{
		MC.x += speed;
	}
	isOnLeft = isOnRight = false;
}
 
function Weapon(WE, MC)
{
	if(WE.x >= MC.x - 160 && WE.x <= MC.x + 160 && WE.y >= MC.y && WE.y <= MC.y + 400)  // 碰撞检测
	{
		WE.y = -200;
		WE.x = Math.random() * 1870;
	}
	if(WE.y >= 1000)  // 掉出界外
	{
		WE.y = -200;
		WE.x = Math.random() * 1870;
	}
	else  // 武器下落
	{
		WE.y += weaponSpeed;
	}
}

​ 写好武器下落的逻辑。

png

​ 可以给背景底端分离出一个图层在道具图层上方，以实现武器落入地表中的效果。

使用 AN 制作 HTML5 小游戏-教程 06【Adobe Animate CC】

png

​ 新建一个图层，制作 restart 按钮。

png png

​ 命名为 restart。

javascript
var speed = 30;
var weaponSpeed = 30;
var isOnLeft = false;
var isOnRight = false;
var keyCode = 0;
var alive = true;
 
this.left.addEventListener("click", onLeft.bind(this));
 
function onLeft()
{
	isOnLeft = true;
}
 
this.right.addEventListener("click", onRight.bind(this));
 
function onRight()
{
	isOnRight = true;
}
 
this.restart.addEventListener("click", onRestart.bind(this));
 
function onRestart()
{
	alive = true;
	this.weapon1.y = this.weapon2.y = this.weapon2.y = this.weapon3.y = this.weapon4.y = this.weapon5.y = -200;
	this.weapon1.x = Math.random() * 1870;
	this.weapon2.x = Math.random() * 1870;
	this.weapon3.x = Math.random() * 1870;
	this.weapon4.x = Math.random() * 1870;
	this.weapon5.x = Math.random() * 1870;
}
 
this.player.addEventListener("tick", Update.bind(this));
 
function Update()
{
	if(alive)
	{
		Move(this.player);
		Weapon(this.weapon1, this.player);
		Weapon(this.weapon2, this.player);
		Weapon(this.weapon3, this.player);
		Weapon(this.weapon4, this.player);
		Weapon(this.weapon5, this.player);
		this.restart.y = -400;
	}else
	{
		this.restart.y = 350;
	}
 
}
 
document.addEventListener("keydown", function(e)
{
	e = e || window.event;
	keyCode = e.keyCode || e.which || e.charCode;
	if(keyCode == 65) // A
	{
		isOnLeft = true;
	}
	if(keyCode == 68)  // D
	{
		isOnRight = true;
	}
})
 
function Move(MC)
{
	if(isOnLeft && MC.x > 250)
	{
		MC.x -= speed;
	}
	if(isOnRight && MC.x <= 1870)
	{
		MC.x += speed;
	}
	isOnLeft = isOnRight = false;
}
 
function Weapon(WE, MC)
{
	if(WE.x >= MC.x - 160 && WE.x <= MC.x + 160 && WE.y >= MC.y && WE.y <= MC.y + 400)  // 碰撞检测
	{
		alive = false;
		WE.y = -200;
		WE.x = Math.random() * 1870;
	}
	if(WE.y >= 1000)  // 掉出界外
	{
		WE.y = -200;
		WE.x = Math.random() * 1870;
	}
	else
	{
		WE.y += weaponSpeed;
	}
}

​ 使用代码设置按钮监听。

javascript
if(alive)
{
    Move(this.player);
    Weapon(this.weapon1, this.player);
    Weapon(this.weapon2, this.player);
    Weapon(this.weapon3, this.player);
    Weapon(this.weapon4, this.player);
    Weapon(this.weapon5, this.player);
    this.restart.y = -400;
}else
{
    this.restart.y = 350;
}

​ 没挂的时候隐藏 restart 按钮，挂的时候显示 restart 按钮。

javascript
function onRestart()
{
	alive = true;
	this.weapon1.y = this.weapon2.y = this.weapon2.y = this.weapon3.y = this.weapon4.y = this.weapon5.y = -200;
	this.weapon1.x = Math.random() * 1870;
	this.weapon2.x = Math.random() * 1870;
	this.weapon3.x = Math.random() * 1870;
	this.weapon4.x = Math.random() * 1870;
	this.weapon5.x = Math.random() * 1870;
}

​ 重置游戏的逻辑。

使用 AN 制作 HTML5 小游戏-教程 07【Adobe Animate CC】

png

​ 新建一个图层，新建一个文本对象，设为 动态文本，然后将对象命名为 scoreText。

png

​ 给人物移动动画最顶端加一个图层，用于放代码，前面几帧设置标签名 run。

png

​ 最后在尾巴新建一个关键帧，命名为 end。

png

​ 第 20 帧设置代码 this.gotoAndPlay("run")，表示到这一帧后回到第 0 帧重新播放。

png

​ 第 21 帧设置代码 this.stop()，表示停止动画。

png

​ 在第 21 帧，选中人头的图层，Ctrl + B 分离后，画一个被击中的表情。

javascript
var speed = 30;
var weaponSpeed = 30;
var isOnLeft = false;
var isOnRight = false;
var keyCode = 0;
var alive = true;
var score = 0;
 
this.left.addEventListener("click", onLeft.bind(this));
 
function onLeft()
{
	isOnLeft = true;
}
 
this.right.addEventListener("click", onRight.bind(this));
 
function onRight()
{
	isOnRight = true;
}
 
this.restart.addEventListener("click", onRestart.bind(this));
 
function onRestart()
{
	alive = true;
	this.weapon1.y = this.weapon2.y = this.weapon2.y = this.weapon3.y = this.weapon4.y = this.weapon5.y = -200;
	this.weapon1.x = Math.random() * 1870;
	this.weapon2.x = Math.random() * 1870;
	this.weapon3.x = Math.random() * 1870;
	this.weapon4.x = Math.random() * 1870;
	this.weapon5.x = Math.random() * 1870;
	score = 0;
	this.player.gotoAndPlay("run");
}
 
this.player.addEventListener("tick", Update.bind(this));
 
function Update()
{
	this.scoreText.text = "Score: " + score;
	if(alive)
	{
		Move(this.player);
		Weapon(this.weapon1, this.player);
		Weapon(this.weapon2, this.player);
		Weapon(this.weapon3, this.player);
		Weapon(this.weapon4, this.player);
		Weapon(this.weapon5, this.player);
		this.restart.y = -400;
	}else
	{
		this.restart.y = 350;
	}
 
}
 
document.addEventListener("keydown", function(e)
{
	e = e || window.event;
	keyCode = e.keyCode || e.which || e.charCode;
	if(keyCode == 65) // A
	{
		isOnLeft = true;
	}
	if(keyCode == 68)  // D
	{
		isOnRight = true;
	}
})
 
function Move(MC)
{
	if(isOnLeft && MC.x > 250)
	{
		MC.x -= speed;
	}
	if(isOnRight && MC.x <= 1870)
	{
		MC.x += speed;
	}
	isOnLeft = isOnRight = false;
}
 
function Weapon(WE, MC)
{
	if(WE.x >= MC.x - 160 && WE.x <= MC.x + 160 && WE.y >= MC.y && WE.y <= MC.y + 400)  // 碰撞检测
	{
		alive = false;
		WE.y = -200;
		WE.x = Math.random() * 1870;
		MC.gotoAndStop("end");
	}
	if(WE.y >= 1000)  // 掉出界外
	{
		score += 1;
		WE.y = -200;
		WE.x = Math.random() * 1870;
	}
	else
	{
		WE.y += weaponSpeed;
	}
}

​ 最终代码。

  • 主要就是重新开始时：this.player.gotoAndPlay("run")，恢复人物动画。

  • 碰到武器时：MC.gotoAndStop("end");，跳到第 21 帧。

​ 最终效果。可以在 hexo 上跑，但是当时画布设置的太大了 orz……

​ 修改画布大小，网页中：

  • 因为新建的画布是 16:9 的，所以宽度设为 100%，画布 padding-bottom 设为 56.25%（代替 height）：
  • margin: 0 auto; 居中对齐。
html
<!-- write your code here -->
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:100%;padding-bottom: 56.25%;height: 0;margin: 0 auto;">
		<canvas id="canvas" width="1920" height="1080" style=";margin: 0 auto;display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1920px; height:1080px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>

​ Game.js 中：

javascript
domContainers.forEach(function(container) {			
    container.style.width = '100%';
});

​ 开跑！