CocosCreator实现划过的位置显示纹理代码示例

时间：2022-06-29 02:31:46 编辑：袖梨来源：一聚教程网

本篇文章小编给大家分享一下CocosCreator实现划过的位置显示纹理代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

1、项目需求

项目需要有一个功能：是当一个光点走过的路径，这个路径的位置就都亮起来的功能。

2、资料内容

功能类似这位大神的橡皮擦功能：https://forum.cocos.org/t/2-0-8/74246

但是，项目的需求还要经过的路径周围有模糊的外边——也就是从中心到边缘越来越暗。

所以对于借鉴了网上大神的shader例子，类似以下的示例：

在大神的肩膀上做了一些改动，来实现项目的需求。

3、项目示例

以下是测试项目的示例：

4、项目代码

SliderPointLight.ts

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

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

const {
    ccclass,
    property
} = cc._decorator;
 
@ccclass
 
export default class Follow_spot extends cc.Component {
 
    @property(cc.Node)
 
    bg: cc.Node = null;
 
    material: cc.Material = null;
 
    center: number[] = [0.5, 0.5];
 
    testArr: number[] = [];
 
    onLoad() {
 
        this.material = this.bg.getComponent(cc.Sprite).getMaterial(0);
 
        this.material.setProperty('wh_ratio', this.bg.width / this.bg.height);
 
        this.material.setProperty('center', this.center);
 
        //js 中最重要是这一句,这里参数是数组长度*数组里向量的维度
 
        this.material.setProperty('colorArr', new Float32Array(400));
 
        //这里设置的时候需要把数组里向量的分量展开到一个一维数组
 
        this.material.setProperty('colorArr', []);
 
        this.bg.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);
 
    }
 
    touchMoveEvent(evt: cc.Event.EventTouch) {
 
        this.center[0] = evt.getLocation().x / this.bg.width;
 
        this.center[1] = 1 - evt.getLocation().y / this.bg.height;
 
        console.log(this.center);
 
        this.material.setProperty('center', this.center);
 
        if (this.testArr.length >= 400) {
 
            this.testArr.shift();
 
            this.testArr.shift();
 
        }
 
        this.testArr.push(this.center[0]);
 
        this.testArr.push(this.center[1]);
 
        //js 中最重要是这一句,这里参数是数组长度*数组里向量的维度
 
        this.material.setProperty('colorArr', new Float32Array(this.testArr));
 
        //这里设置的时候需要把数组里向量的分量展开到一个一维数组
 
        this.material.setProperty('colorArr', this.testArr);
 
    }
 
}
 
SliderPointLight.effect
 
CCEffect % {
 
        techniques:
 
            -passes:
 
            -vert: vs
 
        frag: fs
 
        blendState:
 
            targets:
 
            -blend: true
 
        rasterizerState:
 
            cullMode: none
 
        properties:
 
            texture: {
                value: white
            }
 
        wh_ratio: {
 
            value: 1.78,
 
            editor: {
 
                tooltip: "宽高比"
 
            }
 
        }
 
        blur: {
 
            value: 0.35,
 
            editor: {
 
                tooltip: "光圈模糊程度"
 
            }
 
        }
 
        radius: {
 
            value: 0.5,
 
            editor: {
 
                tooltip: "光圈半径"
 
            }
 
        }
 
        center: {
 
            value: [0.5, 0.5],
 
            editor: {
 
                tooltip: "光圈起点"
 
            }
 
        }
 
        colorArr: {
            value: [0.5, 0.5, 0.5, 0.5]
        }
 
    } %
 
    CCProgram vs % {
 
        precision highp float;
 
        #include <cc-global>
 
        #include <cc-local>
 
        in vec3 a_position;
 
        in vec4 a_color;
 
        out vec4 v_color;
 
        #if USE_TEXTURE
 
        in vec2 a_uv0;
 
        out vec2 v_uv0;
 
        #endif
 
        void main() {
 
            vec4 pos = vec4(a_position, 1);
 
            #if CC_USE_MODEL
 
            pos = cc_matViewProj * cc_matWorld * pos;
 
            #else
 
            pos = cc_matViewProj * pos;
 
            #endif
 
            #if USE_TEXTURE
 
            v_uv0 = a_uv0;
 
            #endif
 
            v_color = a_color;
 
            gl_Position = pos;
 
        }
 
    } %
 
    CCProgram fs % {
 
        precision highp float;
 
        #include <alpha-test>
 
        in vec4 v_color;
 
        #if USE_TEXTURE
 
        in vec2 v_uv0;
 
        uniform sampler2D texture;
 
        #endif
 
        uniform ARGS {
 
            float radius;
 
            float blur;
 
            vec2 center;
 
            float wh_ratio;
 
        };
 
        //effect定义
 
        uniform Metaball {
 
            vec4 colorArr[100];
 
        };
 
        void main() {
 
            vec4 o = vec4(1, 1, 1, 0);
 
            o *= texture(texture, v_uv0);
 
            o *= v_color;
 
            float circle = radius * radius;
 
            for (int i = 0; i < 100; i++) {
 
                float colorX = colorArr[i].x;
 
                float colorY = colorArr[i].y;
 
                float rx = colorX * wh_ratio;
 
                float ry = colorY;
 
                float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);
 
                o.a = smoothstep(circle, circle - blur, dis) + o.a;
 
            }
 
            gl_FragColor = o;
 
        }
 
    }%</alpha-test></cc-local></cc-global>

推荐专题

最新下载

热门教程

CocosCreator实现划过的位置显示纹理代码示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程