Cocos Quick Start Guide

coderRick 2021-05-03 18:20:10
cocos quick start guide


background

As a h5 The front-end development , How can I use cocos Developing games , Today, let's share my cocos Way of learning . In fact, it's like this : I was immersed in business needs at the time , It's good to use vue,react, When flow mode is on , A headset , A day passed . It's Thursday , Suddenly there was a meeting , To develop small games , You draw I guess , From next week . There's a moment of pressure .

  1. Never played cocos
  2. Never played a game
  3. I didn't take the back end of the game , Changlian also made a little chat demand before , Not at all familiar with
  4. Time is tight , There are still three unmeasured business requirements on hand
  5. A lot of things have not been decided , It's hard to do

But it's not that simple , Difficulties followed : Before Tuesday, we'll provide a picture guess demo. ok , The priority has been set ,2 Within days , be familiar with cocos, And implement the canvas .

Begin to learn

1. Look at the document

Fortunately, not for the time being 3D The game of , Go straight to the rookie docs.cocos.com/creator/man…

2. Write demo

The official document provides a little game of picking stars demo resources , I wrote it all over again .

3. ideas

After writing a little game , I see cocos The development sequence of

  1. New projects , There's nothing to explain this .
  2. newly build scene scene ,(draw This fire like icon )

image.png

All the implementations are based on a certain scenario , Every time you switch the game screen , In fact, it is the scene switching , Your layout , The motion of an object , Save, etc , It's also based on a scene .

  1. Layout

image.png

Layout in your selected scene , Think about the layout ahead of time , His general idea is canvas A little bit of drawing , in other words css A lot of layouts are not available , such as border attribute , You want to achieve , Two nodes must be nested .( This is annoying )

  1. Binding scripts

Important nodes need to do some initialization execution , At this time, you need to write some js Code for , And deep binding with the node , So it's automatic , Similar to vue Of created(). There are also some properties that need to be initialized , You also need some scripts

  1. The binding event

When you click , Or some actions to trigger when you press the keyboard , You also need to write some js Method , Bind with the method it provides .

4. What does canvas need

Familiar with its development mode , Just find the resources I need , The difficulties I need to overcome .

  1. On canvas api

Baidu on the Internet , Finally found ,Graphics Components . Basically meet my needs , Links are attached : docs.cocos.com/creator/man…

  1. Realization of fillet

The design is round , before border-radius Just fine , Now it's not that easy , By asking colleagues , Baidu , eureka ,RoundRectMask, Someone else wrote it mask Component script , Can own Baidu , Look at the code , And in canvas It's the same thing with rounded corners . The core code is as follows :

image.png

  1. Bind click event
  • Write the method in a script ,( It's written here game.js)

image.png

  • Bind the script to a node ,( This is bound to canvas Node )

image.png

  • Make sure there is... On the node you need to click button Components
  • clickEvent Attribute to 1, Bind an event

image.png

  • take canvas Drag the node to cc.Node On , Select the component Game, Choose the events you've written

Start developing

  1. Create project

image.png

  1. stay assets Under the new scene(draw)

image.png

  1. Layout

Here's a simple part

image.png

  1. Write the script

There are two scripts ,Game.js All operations are implemented in , Color choices , Size selection , Eraser , Clear and so on ,Brush.js To realize the logic of canvas in , Color change , Size , Monitor keyboard events, etc . The script code is as follows :

// Game.js
cc.Class({
extends: cc.Component,
properties: {
toolBox:cc.Node,
brush:cc.Node,
colorNode:cc.Node,
sizeNode:cc.Node
},
// Tools show hide
handleToolBtn(){
this.toolShow=!this.toolShow
cc.tween(this.toolBox).to(0.2,{x:this.toolShow?130:210}).start()
this.toolBox.x=this.toolShow?130:210
},
// Eraser
handleEraserBtn(){
this.brush.getComponent('Brush').setBrushColor('#ffffff')
this.brush.getComponent('Brush').setBrushLineWidth(20)
},
// Color
handleColorBtn(e,params){
this.color=e.currentTarget.color
this.brush.getComponent('Brush').setBrushColor(this.color)
this.brush.getComponent('Brush').setBrushLineWidth(this.size)
this.colorNode.children.forEach((v,i)=>{
if(i==params){
v.children[0].color=cc.color('#ffffff')
}else{
v.children[0].color=cc.color('#E9E6F0')
}
})
this.sizeNode.children.forEach(v=>{
v.children[0].children[0].children[0].color=this.color
})
},
// Size
handleSizeBtn(e,params){
this.size=e.currentTarget.width;
this.brush.getComponent('Brush').setBrushLineWidth(this.size)
this.sizeNode.children.forEach((v,i)=>{
if(i==params){
v.children[0].color=cc.color('#ffffff')
}else{
v.children[0].color=cc.color('#E9E6F0')
}
})
},
// eliminate
handleClearBtn(){
this.brush.getComponent('Brush').clearDraw()
},
onLoad(){
this.toolShow=true
this.color='#111111'
this.size=6
},
start(){
this.brush.getComponent('Brush').setBrushColor(this.color)
this.brush.getComponent('Brush').setBrushLineWidth(this.size)
}
});
 Copy code 
// Brush.js
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
this.ctx=this.getComponent(cc.Graphics)
this.ctx.lineJoin=cc.Graphics.LineJoin.ROUND
this.ctx.lineCap = cc.Graphics.LineCap.ROUND;
this.node.on('touchstart',this.onTouchStart,this)
this.node.on('touchmove',this.onTouchMove,this)
},
onTouchStart(e){
const pos=this.node.convertToNodeSpaceAR(e.getLocation())
this.setBrushPos(pos.x,pos.y)
},
onTouchMove(e){
const pos=this.node.convertToNodeSpaceAR(e.getLocation())
this.drawTo(pos.x,pos.y)
},
setBrushPos(x,y){
this.ctx.moveTo(x,y)
},
// Width
setBrushLineWidth(lineWidth){
this.ctx.lineWidth=lineWidth;
},
// Color
setBrushColor(color){
this.ctx.strokeColor=color;
this.ctx.fillColor=color;
},
// draw
drawTo(x,y){
this.ctx.lineTo(x,y);
this.ctx.stroke();
this.ctx.moveTo(x,y);
},
// Empty
clearDraw(){
this.ctx.clear()
}
});
 Copy code 
  1. Binding scripts , event

take Game Bound to the canvas On ,Brush Bound to the brush Node . Bind the click event . 6. Finish off work .

Conclusion

In fact, sometimes a new technology is not really difficult , It's just that I set a threshold for him , So that you can't take the first step , come on. , My growth path , My experience of life . -- END --

版权声明
本文为[coderRick]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503181827924o.html

  1. 浅谈 React 中的 XSS 攻击
  2. XSS attack in react
  3. 自学前端教程整理,附不容错过的前端100篇文章合集
  4. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  5. 使用OpenTracing跟踪Go中的HTTP请求延迟
  6. Using opentracing to track HTTP request latency in go
  7. Encapsulating databinding allows you to write less than 10000 lines of code
  8. 03-HTML5标签-HTML5极速入门
  9. 03-html5 tag-html5 quick start
  10. LayUI - 极易上手拿来即用的前端 UI 框架
  11. Layui - easy to use front end UI framework
  12. Interpretation of lodash source code (1)
  13. Why is the first parameter of node family callback error?
  14. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  15. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  16. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  17. How to set up hyperlinks inside the website?
  18. Using node and socket to realize online chat room
  19. The core competitiveness of Vue: data bidirectional binding
  20. React configuration agent
  21. CSS layout
  22. Application scenario explanation of Vue dynamic component
  23. Redux learning notes 04 -- using multiple reducers to manage data
  24. After three months of typescript writing, what have I learned?
  25. Node family - what is a callback?
  26. React -- a simple implementation of render & create element
  27. JS learning simple usage of jquery
  28. Seamless love
  29. 小白前端入门笔记(12),设置哑链接
  30. Small white front-end entry notes (12), set dumb links
  31. Vue2. X opens composition API and TSX
  32. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  33. Flex learning notes
  34. The most essential closure article in the eastern hemisphere
  35. 2021-05-03 hot news
  36. Sword finger offer -- reverse order pair in array (JS Implementation)
  37. Working process of scaffold
  38. Use decorator mode to strengthen your fetch
  39. [JS] scope (Introduction)
  40. Employment information statistics network (interface document)
  41. Analysis of MVC
  42. [middle stage] please stay and join me in the backstage
  43. Understanding front end garbage collection
  44. [continuous update] front end special style implementation
  45. Flutter product analysis and package reduction scheme
  46. XPath positioning
  47. 前端开发css中的flex布局的使用
  48. The use of flex layout in front end development CSS
  49. JQuery核心函数和静态方法
  50. JQuery core functions and static methods
  51. Node family - understanding of blocking and non blocking
  52. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  53. Vue source code analysis (2) initproxy initialization proxy
  54. What's TM called react diff
  55. Summary of common front end data structure
  56. Useeffect in hooks
  57. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  58. Front end notes: virtual Dom and diff of vue2. X
  59. The best code scanning plug-in of flutter
  60. The simplest plug-in for rights management of flutter