嗨！大家好，我是小蚂蚁。

微信小游戏制作工具目前已支持所有类型（单个格子，单行格子，格子矩阵）原生广告的添加，这篇教程会详细的介绍原生广告的接入方法。

创建原生模版广告

创建广告位时选择【原生模版广告】。

原生模版广告分为两种类型，横幅和格子，横幅就是之前的Banner广告，现在已经合并到原生模版广告中了，这里我们重点了解格子广告。

格子广告根据显示的格子数量分为三种。

单格子

多格子（一行格子）

矩阵格子

每种类型的格子广告都可以设置属性，例如广告的尺寸（大一点儿还是小一点儿），广告显示颜色（深色还是浅色）等，在右侧的属性栏设置不同的属性，中间的显示区会直接显示调整属性后的效果。

创建完广告之后，可以得到广告位ID，例如下方我创建了四个原生模版广告。

广告的属性可以在后台随时进行修改，点击对应广告后面的【编辑】按钮即可。例如我原本创建了背景色为浅色的广告，后来在游戏中发现深色跟游戏更搭配，此时，可以去后台找到该广告，直接编辑其背景色属性为深色。修改属性后需要等待 10 分钟后才会生效。

在游戏中接入广告

在微信小游戏制作工具中，接入原生广告需要用到【小游戏】类别中的原生广告这块积木。

该积木一共有三个参数，前两个参数用于设置广告在屏幕上的显示位置，最后一个参数用于填广告位ID。

接下来重点说一下原生广告的坐标位置设置。

原生广告有着固定的尺寸，每种类型广告的尺寸不同，具体尺寸可查看官方文档：小程序原生模版广告文档（下方二维码直达）

如何查看和计算对应广告的尺寸？举个简单的例子，如上图是文档中的单格子模版，单格子模版有两种样式，常规样式和卡片样式，两种样式的广告尺寸不同。除了样式之外，我们在后台创建广告时，还可以在属性中设置广告尺寸的大小，一共有三个选项，分别为 80%，90%，100%。假设我们创建了卡片样式的单格子广告，并将其尺寸设置为 80%。那最终这个广告的尺寸为卡片样式的广告尺寸 68 x 106，然后乘以 80%，最终的尺寸为 54.4x84.8。

通过以上的计算我们能够确定的知道要显示的原生广告的尺寸，接下来我们要做就是如何在一个精确的位置上显示已知尺寸的广告。

我们都知道不同的手机屏幕尺寸是不同的，假设我们希望在屏幕的最下方显示一行格子广告，该如何做呢？设置一个固定数值作为广告显示的坐标？这不太可行，因为不同的屏幕长度不同，设置一个固定的数值，广告在 A 屏幕上显示在最下方，但是在更长的 B 屏幕上就显示不到最下方，这样就有可能遮挡到游戏区域。

那该如何做呢？我们已经知道了单行格子广告的具体的尺寸数值，如果能知道当前屏幕的具体高度，就可以利用屏幕的高度以及单行格子广告的高度，计算出广告的具体显示位置了，并且能够确保在所有尺寸的屏幕上广告都显示在最下方。

广告的高度 h 是已知的（可以在文档中查到），现在只需要知道当前设备的屏幕高度 H 即可。

在微信小游戏制作工具中提供了获取场景的宽度和高度的积木，这块积木位于【侦测】类别中。利用这块积木可以获得当前设备屏幕（也就是场景）的宽度和高度。

需要的注意的是积木获取到的场景的宽度和高度，并不是最终游戏显示区域的宽度和高度。

游戏显示区域的宽度和高度，与场景的宽度和高度存在如上的换算关系。因为原生广告会显示在游戏区域内，所以需要获取的屏幕高度 H 指的是游戏显示区域的高度，即场景高度/2。

最后，我们还需要知道一个关键的信息，所有的原生模版广告的位置都是以左上角为基准点的。

如图，不论哪种类型的原生广告，我们所设置的位置指的都是广告左上角的点的位置。

知道了所有必需的数据之后，接下来我们就可以去设置不同类型的广告位置了。

下图是我在真机上测试显示的不同类型的原生广告。

举例说明具体广告位置的计算方法。

1.右侧的单格子广告，单格子广告为卡片样式，尺寸设置为 80%。

根据文档可以计算出最终广告的尺寸为：54.4 x 84.8。

已知场景宽度和广告的宽度，很容易计算出广告的X坐标位置 = 场景宽度/4 - 54.4（注意这里用的是场景宽度除以 4，因为要换算成游戏显示区域的宽度）。

2.下方单行格子广告，水平布局，尺寸设置为 90%。

根据文档可以算出，最终显示的广告尺寸为 324x95.4。

已知广告的宽度，高度和场景高度，可计算出广告的 X 坐标 = -162，广告的 Y 坐标 = -场景高度/4 + 95.4。

其它广告位置的显示计算方法都类似，学会方法后可自行计算。如果想不明白的话，就动手画个图，图像往往更直观，更容易理解。

最后，你可能发现了，在最终设备上显示的截图中，有些广告的位置并不理想，比如说右侧的单格子右边跑到屏幕外面去了，矩阵广告的左侧紧贴屏幕左侧，而没有显示屏幕中间，对于这些问题可以通过设置数值来进行一些微调。

下方是我使用的广告位置数值，仅供参考，单格子广告与屏幕两侧留出一点距离，下方的单行格子稍微往上提升一点，避免遮挡到下方的文字，矩阵格子显示在屏幕的中央。

注意事项

最后，有几点注意事项：

1.一个广告ID只能请求到一条广告，如果你想在游戏中同时显示两个单格子广告，需要创建两个原生广告，得到两个广告ID。对于多格子也是同样的，如果你想在屏幕的上方和下方同时显示多格子广告，需要创建两个原生广告。

2.原生广告会每隔一段时间自动刷新，无需手动反复调用积木。

3.在同一位置显示多个原生广告时，广告会重叠。原生广告显示后不会自动关闭，只能使用积木关闭广告，我们需要在游戏中设置好广告的显示和关闭时机，例如在跳转场景的时候，关闭原生广告，尽量避免广告重叠显示。

4.原生广告需要上传游戏后使用体验版在真机上进行测试，无法使用预览版测试。

希望这篇文章对你有用！

欢迎关注我的微信公众号【小蚂蚁教你做游戏】，可领取原创的游戏开发学习路线和教程资料合集。