Pico-8 精彩代码--摇曳树木效果解析

引言

pico-8 的社区是一个满是热情与分享精神的社区，无数玩家与开发者贡献着代码。本系列日志将选取其中比较精彩的代码片段进行解析，学习其中的算法思路。本文将讲解如何实现摇曳的树木的效果。

效果

代码分析

作者： Luca Harris @lucatron_
来源：twitter

整理了一下作者的代码，共计15行：

for i=0,11 do
 pal(i,({135,10,9,137,8,136,2,130,128})[i+1],1)endfunction _draw() srand(3)
 rectfill(0,0,127,40,0)
 for y=52,170,2 do
  k=y/19-2
  x=y*44%138-4
  h=40+rnd(20)
  for i=-20,20 do
   line(x+i*h/70,y,x+sin(t()/4+x/500+y/300)/7*h,y-h,i>0 and k+2 or k)
  end
 endend

1-3 行，将调色板的颜色映射，这里用到了第二块调色板的颜色，更好的表示渐变。关于第二块调色板的内容，在解析 2 里有详细说明。

5 行，初始随机数种子，在计算树木高度的时候详细解释为什么每次绘制要初始随机数

6 行，画背景，我们用 cls() 代替手动绘制背景，可以更好的测试

7 行，循环得到 y，y 值是树的 y 轴位置，从 52-170，每两个树之间相差 2

8 行， k 用来将树按照 y 值的顺序，映射到调色板的色值，实现近景到远景的颜色渐变

9 行，计算树的 x 坐标，根据 y 轴坐标的倍数与 138 取余，就把树木限制在 0-138 的范围内一排排的码好。

10 行，计算树木的高度 h，这里每棵树的高度是随机的，但是每帧绘制的时候同一棵树的高度是不变的，也就是每一帧绘制的时候 rnd(20) 会得到同一个随机值，这就得益于在第 5 行，绘制开始的时候重新初始化随机数种子，使得每帧获得随机数是一致的。

11-13 行，绘制一棵树。pico8 没有直接绘制三角形的函数，这里用 40 根线段拼成了一个三角形。我们先看下简化的代码，line(x+i,y,x,y-h,i>0 and k+2 or k) 。i 值（-20 -> 20）是三角形底边的 x 轴偏移量，从线段起点 (x-20,y) 终点 (x,y-h) 到起点 (x+20,y) 终点 (x,y-h) 共计画了40 根线段组成了三角形，三角形的底边宽 40。简化的效果图如下。

line(x+i*h/70,y,x+sin(t()/4+x/500+y/300)/7*h,y-h,i>0 and k+2 or k) 原代码计算起点时将偏移量 i 乘以树木的高度 h/70 用来表示，矮的树木拥有更窄的底边。计算终点时，树尖的 x 坐标根据时间，取正弦值，用来模拟来回摆动的效果，且越矮的树木摆动幅度越低。最后根据偏移量 i 来觉得颜色，i<0 为树木左半边，i>0 为树木右半边。