`
zhouxi2010
  • 浏览: 51033 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

cocos2d-html5教程之绘图draw[转载]

阅读更多

咱们继续上面的课题讲解,今天的主题是cocos2d-html5的绘图Draw。

 

或许看文章朋友您知道,编程有一个思想很重要,那就是“返璞归真”。Cocos2d-html5的绘画是有一个程序统帅,下面给出说明与继承关系图。

 

 

在图中不难看出其中的关系。

 

  • Defined in: CCDrawingPrimitives.js
  • Extends cc.Class

其中,cc.DrawingPrimitive()绘图原语的实用程序类。

 

 

下面我们列出其中的方法列表供大家参考:

 

 

其中的叙述方式是方法名称和描述组成:

 

 

ctor(renderContext)

 

 

Constructor构造函数

 

 

drawCircle(center,radius, angle, segments, drawLineToCenter)



绘制一个圆形.

 

 

drawCubicBezier(origin, control1, control2, destination, segments)

 

 

绘制立方体贝塞尔曲线

 

 

drawLine(origin,destination)

 

 

画一条线

 

drawPoint(point)

 

 

给出了一个点的x和y坐标测量的点

 

 

drawPoints(points,numberOfPoints)

 

 

画一个数组的点。

 

 

drawPoly(vertices,numOfVertices, closePolygon, fill)

 

 

通过一个给定一个指针cc.Pointpoligon coordiantes和给定的顶点数及测量的点来绘制图形.

 

 

drawQuadBezier(origin, control, destination, segments

)

 

绘制一个drawQuadBezier

 

 

getRenderContext()

 

 

返回被渲染的原始绘图上下文 环境

 

 

setRenderContext(context)

 

 

设置渲染上下文的绘图原始环境

 

 

本人不善于言谈,还是真刀实枪来的真实,看代码。

 

 

本例子来自cocos2d-html5官网的test中的DrawPrimitivesTest比较经典,大家可以去官网下载:http://www.cocos2d-x.org/

下面是代码,很简单:

  1. var s = cc.Director.sharedDirector().getWinSize();
  2. cc.renderContext.fillStyle = "rgba(255,255,255,1)";//上下文填充颜色
  3. cc.renderContext.strokeStyle = "rgba(255,255,255,1)";
  4. cc.drawingUtil.drawLine(cc.PointMake(0,0), cc.PointMake(s.width, s.height));//画一条线
复制代码

另外需要解释的是,大家可能会迷惑怎么是cc.drawingUtil执行画布操作,大家不要忘记了CCApplication它的功能概述如下:

1)初始化程序,构建运行窗口;
2)程序初始化完毕通知;
3)程序被切换到后台通知;
4)程序切换到前台通知;
5)设置屏幕窗口原点:设备是水平的还是垂直的,在左边还是在右边(或者顶端还是底部)
6)程序运行(进行消息循环处理)
7)取得当前语言配置
8)所有对Application的访问都通过CCApplication.sharedApplication()提供

我在分析源码的时候在cocos2d\platform\CCApplication.js找到如下代码:

 

  1. cc.drawingUtil = newcc.DrawingPrimitiveCanvas(cc.renderContext);
复制代码



 

相信大家现在已经明白了,cc.drawingUtil只是代理DrawingPrimitiveCanvas执行相关的程序。

原文链接:http://www.html5so.com

分享到:
评论

相关推荐

    cocos2d-x默认第一个模板

    总的来说,cocos2d-x提供了一套完整的2D游戏开发解决方案,从基础的绘图和动画到复杂的物理模拟和网络通信,都有着丰富的支持。通过深入学习和实践,开发者可以利用这个框架创作出丰富多彩的2D游戏。

    Cocos2D-x权威指南完整版

    《Cocos2D-x权威指南》是一本专为游戏开发者准备的详细教程,全面解析了Cocos2D-x这一开源游戏开发框架。Cocos2D-x是一个基于C++的跨平台2D游戏引擎,它允许开发者用一种语言编写游戏,然后在iOS、Android、Windows...

    Cocos2D-X开发学习笔记-渲染框架之图形的绘制

    本教程将深入讲解Cocos2D-X中的渲染框架,特别是如何进行图形的绘制,这对于创建游戏场景、角色动画以及用户界面至关重要。 在Cocos2D-X中,图形绘制是通过各种Node对象实现的,如Sprite(精灵)、Label(文本标签...

    cocos2d-x 绘图

    在本篇中,我们将深入探讨Cocos2d-x中的绘图机制,特别是使用`CCDrawing Primitives`和`CCDrawNode`进行2D绘图。 1. CCDrawing Primitives CCDrawing Primitives是Cocos2d-x提供的一组基本绘图元素,包括线条、...

    COCOS2D-X雷电

    《COCOS2D-X实现雷电游戏详解》 COCOS2D-X是一款强大的开源游戏开发框架,基于C++,适用于跨平台的游戏开发。它以其高效、易用的特性吸引了众多开发者,其中包括了经典飞行射击游戏“雷电”的复刻与创新。本文将...

    泡泡堂cocos2d-x源码

    2. **渲染系统**:学习如何利用Cocos2d-x的绘图API创建和管理游戏图形,包括精灵的绘制、动画制作、纹理管理等。 3. **事件处理**:掌握如何监听和响应用户输入,如触摸事件,以实现角色的移动和泡泡的发射。 4. *...

    cocos2dx-html5-2.2 api

    Cocos2d-x HTML5(简称cocos2dx-html5)是Cocos2d-x引擎的一个分支,专门用于开发HTML5游戏和应用。这个API离线文档提供了2.2版本的详细参考,使得开发者在没有网络的情况下也能查阅相关功能和接口。Cocos2d-x是一个...

    cocos2dx测试debugDraw box2d

    在Cocos2d-x中,我们需要将Box2D的`b2Draw`接口与Cocos2d-x的`DrawNode`或者自定义的绘图类关联,然后在每帧更新中调用`world->DrawDebugData()`来绘制物理世界。 另一种可能的原因是`debugDraw`的相关权限未打开。...

    2dx3.0不规则按钮

    1. **自定义精灵类**:`DJShapeButton`可能是从`cc::Node`或`cc::Sprite`派生的,这样可以利用Cocos2d-x的绘图API进行自定义绘制。 2. **不规则形状绘制**:在`draw()`函数中,开发者可能会使用`cc::DrawNode`或者`...

    Cocos2d游戏开发教程(iOS5)

    2. **图形渲染**:讲解如何使用Cocos2d的绘图API,如draw函数,创建2D图形,包括基本形状、图片和自定义图形。 3. **精灵与动画**:介绍如何管理精灵表(SpriteSheet)和精灵帧(SpriteFrame),创建和控制动画序列...

    DrawPicture

    【DrawPicture】是一款基于cocos2d-x框架的简单绘图应用,版本为2.0.4。cocos2d-x是一个开源的游戏开发框架,它使用C++作为主要编程语言,同时也支持Lua和JavaScript。这款小demo旨在提供一个互动的画板功能,让用户...

    知易cocos2d开发教程打包下载

    第二部分:cocos2d绘图与动画 这部分深入讲解了cocos2d的绘图机制,包括纹理(Texture)、绘图命令(Draw Commands)以及动画(Animation)。学习者将掌握如何绘制自定义图形,创建帧动画,以及使用动作(Actions)...

    cocos 2d 游戏开发.zip

    《Cocos2d 游戏开发深度解析》 Cocos2d是一款强大的开源游戏开发框架,主要用于2D游戏、互动图书和其他图形应用的创建。它以其高效、易用和跨平台的特性,深受开发者喜爱。在Cocos2d的游戏开发过程中,我们将探讨...

    cocos2d二维码,只用到一个cpp

    `QRSprite`类可能是为了封装这个过程,它可能会包含一个`draw()`函数,该函数利用Cocos2d的绘图API将二维码的每个模块(黑或白的方格)绘制出来。这样,开发者可以通过创建`QRSprite`实例并添加到场景中,就能在游戏...

    一个错cocos2d游戏源码分享

    3. **绘图与渲染**:学习如何使用Cocos2d的绘图API来创建2D图形,包括精灵、纹理、动画帧等。 4. **事件处理**:掌握如何监听和响应用户输入,如触摸事件,以及如何与物理世界互动,如重力感应。 5. **物理引擎**...

    2D地图,摄像机移动

    同时,我们需要在Draw方法中调整SpriteBatch的TransformMatrix,将摄像机的位置和缩放应用到绘图操作上,从而实现视口的平移和缩放效果。 再者,物体跳动和放大涉及到动画和交互效果。物体跳动通常用于模拟角色或...

    cocos2dx 常用的BM字体

    Cocos2dx是一款开源的游戏开发框架,广泛应用于2D和3D游戏开发。在Cocos2dx中,处理文本渲染是非常重要的一部分,特别是在涉及到大量文字显示时,性能优化显得尤为关键。标题提到的"常用的BM字体"实际上是指Bitmap ...

    Python简易飞机大战游戏

    4. **图像绘制**:使用`pygame.Surface`对象进行画布操作,`pygame.draw`模块提供各种绘图函数,如绘制矩形、圆形、线等。 5. **游戏循环**:游戏的核心是主循环,不断更新游戏状态、渲染画面并处理事件。例如: ``...

    Android 游戏教程:让人物动起来

    游戏引擎如Unity、Cocos2d-x或Godot也可以用于Android游戏开发,但本教程更可能关注原生Android API。 1. **动画原理**:在Android中,人物动起来主要是通过帧动画或精灵动画实现的。帧动画是通过连续播放一系列...

    Win CE 编程 图形显示特效

    除了原生的API,还有一些第三方库如Qt、wxWidgets和Cocos2d-x,它们提供了更高层次的抽象,简化了图形编程并支持跨平台。这些库通常包含各种内置的图形效果和动画工具,能够快速实现专业级的图形显示特效。 8. **...

Global site tag (gtag.js) - Google Analytics