-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathunityadsplugin.html
More file actions
244 lines (184 loc) · 15.3 KB
/
Copy pathunityadsplugin.html
File metadata and controls
244 lines (184 loc) · 15.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usando Unity ADS no Construct 2 com Cordova CLI</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
<link rel="stylesheet" href="css/side-menu.css">
<!--link rel="stylesheet" href="css/blog/blog-old-ie.css" -->
<link rel="stylesheet" href="css/blog/blog.css">
<link href="css/prism/prism.css" rel="stylesheet" />
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<span></span>
</a>
<div id="menu">
<div class="pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
<li class="pure-menu-item menu-item-divided pure-menu-selected">
<a href="devlog.html" class="pure-menu-link">Devlog</a>
</li>
<li class="pure-menu-item"><a href="contact.html" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
<div id="layout" class="pure-g">
<div class="content pure-u-1 pure-u-md-3-4">
<div>
<!-- A wrapper for all the blog posts -->
<div class="posts">
<h1 class="content-subhead">Devlog</h1>
<!-- A single blog post -->
<section class="post">
<header class="post-header">
<img width="48" height="48" alt="Tilo Mitra's avatar" class="post-avatar" src="img/common/user.png">
<h2 class="post-title">Usando Unity ADS no Construct 2 com Cordova CLI</h2>
<p class="post-meta">
By <a href="#" class="post-author">Fred Oliveira</a> sobre
<a class="post-category post-category-design" href="#">Construct 2</a>
<br><b>30 de outubro de 2018</b>
</p>
</header>
<div class="post-description">
<h3><b>Usando Unity ADS no Construct 2 com Cordova CLI</b></h3>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni000.jpg"></p></center>
<p>Primeiro vamos conhecer o que é Unity,<br>
Unity é uma game engine, uma das mais utilizadas no mundo por estúdios indies.<br><br>
Agora vamos conhecer o Unity ADS, veja a descrição oficial retirada do site da empresa.
</p>
<h3>Unity Ads</h3> <br>
<p>
Seja remunerado pelo seu trabalho<br>
Unity Ads permite aos editores integrar anúncios em vídeo em seus jogos móveis que melhoram o envolvimento do usuário e geram ganhos durante a vida útil do jogo.
Unity Ads oferece o rendimento médio por usuário (ARPU) mais alto de todas as redes globais de anúncios publicitários em vídeo recompensados.
E os anunciantes podem aproveitar a grande oportunidade para conectar com o público certo.
</p>
<p>
O mais incrível é que podemos utilizar no Construct 2 e <b>de graça</b>. <br>
Vamos direto ao assunto.
Vamos direto ao assunto.
</p>
<h3>Unity ADS Dashboard</h3>
<p>
Primeiro precisamos ter uma conta no serviço, <a href="https://operate.dashboard.unity3d.com" target="_blank">Unity ADS</a>, podendo utilizar a sua
conta Google ou do Facebook se preferir.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni001.png"></p></center>
<p>Com a conta já criada, você terá que criar o projeto.</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni002.jpg"></p></center>
<p>
É necessário já ter o aplicativo na loja da Google ou da Apple, pois será necessário colocar a ID do aplicativo/jogo,
quando criar o projeto no serviço. <br><br>
Para fins didáticos, irei utilizar um projeto meu para mostrar o que é necessário para coletar a ID do Unity ADS.<br><br>
Considere a URL do aplicativo.<br>
<b>https://play.google.com/store/apps/details?id=com.flashlightpixel.chronosgames</b><br><br>
O que nos interessa é apenas a ID na Google Play que é literalmente o final do link <code>com.flashlightpixel.chronosgames</code>, sendo assim vamos pegar a ID e adicionar
no serviço, conforme imagem abaixo.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni003.jpg"></p></center>
<p>Adicionado a ID do Lanterna Pixel no serviço Unity ADS, será mostrado informações do aplicativo.</p>
<p>
Com o projeto criado, vamos coletar apenas a ID da plataforma, no nosso caso a <b>Game ID do Android</b>.<br>
Como não pretendo detalhar cada uma das informações do serviço, voi ir direto ao ponto, que é necessária para o Construct 2.<br><br>
No painel do lado esquerdo, existem diversas opções, clicando em <b>Monetization</b> depois em <b>Platforms</b>, será exibido a imagem abaixo.
Nós vamos pegar a <b>Game ID Android</b>, pois só adicionamos esta plataforma no projeto no Construct 2.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni004.jpg"></p></center>
<p>
Agora precisamos do plugin Unity ADS para Construct 2, faça Download no site oficial da engine
<a href="https://www.construct.net/en/construct-2/addons/122/unityads" target="_blank">Plugin Unity ADS para Construct 2</a>,
o processo de instalação é bem simples, com o C2 aberto, simplesmente arraste o arquivo <b>unityads-2.2.0-stable.c2addon</b> e solte
sobre o C2. Feche e abra novamente o C2 e pronto, o Plugin já está adicionado na engine, porém não está no projeto, você precisa adicionar.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni005.png"></p></center>
<h3>Modificações no Construct 2</h3>
<p>
Agora vamos adicionar a <b>Game ID Android</b> do Unity ADS no plugin no Contruct 2. Repare que em <b>Android gameId</b> eu utilizei a
ID <b>2880682</b> que foi coletada na Dashboard do Unity ADS.<br>
Também não vou detalhar todas as opções, apenas as mais importantes para que funcione o plugin.
Repare que em <b>Video placementId</b> eu coloquei a string <b>video</b>, esta string é necessário pois é padrão do plugin
para rodar um ADS de vídeo, porém pode ser modificada como quiser na plataforma e posteriormente no plugin, não vamos abordar isso neste tutorial.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni006.png"></p></center>
<p>
Existem diversos eventos de checagem do plugin, porém de ações temos basicamente 2, carregar o ADS e mostrar. Podendo por exemplo
verificar se o vídeo rodou completamente, se foi pulado, se foi cancelado, excelente e necessário para entregar prêmios para os jogadores.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni007.png"></p></center>
<p>
Para ir direto ao ponto, vou utilizar apenas o método para jogos com "partidas rápidas", eu costumo colocar em <b>Get Placement State</b> o
utilizar o <b>Video Ad</b> já no <b>On Start Layout</b> no Construct 2.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni008.png"></p></center>
<p>
Este método é eficaz pois carrega o ADS, deixando pronto para quando for chamado em <b>Show Video Ad</b> neste caso como utilizei
a tag <b>video</b>, preciso escolher também <b>Video Ad</b> no Construct 2 dentro da lógica do seu evento onde quer mostrar o ADS.<br>
Um detalhe muito importante quando se trata de ADS, é sempre carregar o ADS antes do momento que for mostrar para o jogador.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni009.png"></p></center>
<h3>Processo no Cordova CLI</h3>
<p>
Com a configuração do serviço <b>Unity ADS</b> e do <b>Construct 2</b> concluídas, agora vamos para o <b>Cordova CLI</b>. <br>
Vamos exportar o projeto Cordova. <br>
Repare que no <b>config.xml</b> temos a linha referente ao plugin do <b>Unity ADS</b> que foi adicionado automaticamente pelo próprio plugin.
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni010.png"></p></center>
<p>
Caso não conheça sobre exportação e geração de aplicativos <b>Cordova CLI</b>, eu fiz uma série de tutoriais abordando detalhadamente cada aspecto.<br>
O primeiro é <a href="cordovaBuild.html" target="_blank">Construct 2 - Trabalhando com Cordova CLI</a> onde abordamos a preparação do
ambiente <b>"instalando e configurando os programas necessários"</b>, depois <a href="cordovacliandroid.html" target="_blank">Gerando APK pelo Corodova CLI</a>, onde
abordamos detalhes do da exportação, arquivos gerados e comandos necessários para gerar o APK, finalizando com assinatura do APK, já deixando preparado
para subir para a <b>Google Play</b>. <br><br>
<b>É necessário entender o processo para entender o restante deste tutorial.</b>
</p>
<p>Vou dividir o restante em 2 partes, o primeiro com um novo projeto, o segundo com um projeto existente, ambas muito simples de implementar.</p>
<h3>Novo projeto</h3>
<p>
O processo é bem simples, pois o próprio plugin já adiciona no <code>config.xlm</code> para quando adicionarmos a plataforma <b>Android</b> o plugin será
baixado e instalado no projeto, usando o comando.
<pre><code class="language-batch">cordova platform add android</code></pre>
Gere o APK e teste
</p>
<h3>Projeto existente</h3>
<p>O processo também é bem simples, você precisa apenas adicionar o plugin no projeto, usando o comando abaixo.<br>
<code>cordova plugin add com-artemisoftnian-plugins-unityads2</code><br>
Gere o APK e teste
</p>
<center> <p> <img alt="" class="pure-img-responsive" src="img/cordovaCLI/uni011.jpg"></p></center>
<p>Como podem ver, o Unity ADS está rodando corretamente no projeto do Construct 2</p>
<h3>Observações finais</h3>
<p>
O Unity Ads envia a propaganda pronta, mesmo se no plugin do Construct 2 estiver configurado para modo Test, caso queira testar em
modo Debug, precisa alterar dentro da Dashboard da plataforma. É bem simples, existem diversas configurações de filtros, como
categoria do jogo, classificação de conteúdo, além da configuração do próprio ADS, como orientação do vídeo Vertial ou
Horizontal, sobreposição do modo test e ativar ou desativar o ADS, tudo isso sem alterar sequer uma linha do seu projeto, pois tudo é
configurado de dentro da sua <b>Unity ADS Dashboard.</b><br><br>
Para chegar nestas configurações, chegue na <b>plataforma</b>, conforme a <b>Foto-04</b>, depois clique no seu
aplicativo da <b>Google Play</b>, configure
conforme desejar.<br><br>
Um dos motivos de amar o Cordova CLI é a velocidade e praticidade de utilizar a tecnologia, claro que necessidata de conhecimentos prévios, porém
não é nada complicado se a pessoa for curiosa e esforçada.<br><br>
Caso tenha alguma dúvida pode nos mandar email ou perguntar onde o tutorial for postado.
</p>
<p>
<a href="devlog.html">Voltar</a>
</p>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="js/ui.js"></script>
<script src="js/prism/prism.js"></script>
<script src="js/tittleChange.js"></script>
</body>
</html>