Code Monkey home page Code Monkey logo

qceditor's Introduction

preview

该项目被列为oschina "2015 年度新增开源软件排名 TOP100" #QCEditor

QCEditor是一个简单的cocos2d-x UI编辑器(DEMO),基于cocos2d-x 3.17.2。 Qt和Cocos-x 都能跨平台,理论上该编辑器是能够跨平台的。名字是 Qt 和 Cocos2d-x 的首字母缩写。

QCEditor的渲染使用的是cocos2d-x本身的渲染,所见即所得,在编辑器里面添加的控件代码,不用再到项目里面实现一次,只需要拷贝过去就能用。添加新控件只需注册属性就好,无需再添加新解析代码。(目前解析部分能支持大部分常用类型解析)。

Build/编译

windows:

  • VS2019 + Qt 5.12.1
  • mkdir vs
  • cd vs
  • cmake.exe .. -DCMAKE_PREFIX_PATH=C:\Qt\5.15.1\msvc2019 -G"Visual Studio 16 2019" -A Win32
  • cmake.exe --build .

mac:

  • Xcode + Qt 5.12.1
  • mkdir xcode
  • cd xcode
  • cmake .. -G"Xcode" -DCMAKE_PREFIX_PATH=/Users/mac/Qt/5.15.1/clang_64
  • cmake.exe --build .

功能添加

添加新的属性和控件非常方便,只需要按照下面格式添加,将会自动与Node绑定,并且自动添加到存储功能中。通过这种方式,能够编辑cocos2d-x里所有可视化组件,甚至其他一些组件。

	StartGroup(Node, defaultNodeCtor);
	ATTR("Local Z Order", &Node::getLocalZOrder, &Node::setLocalZOrder, int, 0);
	ATTR("Global Z Order", &Node::getGlobalZOrder, &Node::setGlobalZOrder, float, 0.0f);
	ATTR("Visible", &Node::isVisible, &Node::setVisible, bool, true);
	ATTRSTEP("Scale X", &Node::getScaleX, &Node::setScaleX, float, 1.0, 0.1);
	ATTRSTEP("Scale Y", &Node::getScaleY, &Node::setScaleY, float, 1.0, 0.1);
	ATTR("Rotation", &Node::getRotation, &Node::setRotation, float, 0);
	ATTR("Position", &Node::getPosition, &Node::setPosition, Vec2, Vec2(0, 0));
	ATTR("Tag", &Node::getTag, &Node::setTag, int, 0);
	ATTRMixed("Name", &Node::getName, &Node::setName, std::string, std::string());
	ATTRMMS("Anchor Pos", &Node::getAnchorPoint, &Node::setAnchorPoint, Vec2, Vec2(0, 0), Vec2(0, 0), Vec2(1, 1), Vec2(0.1, 0.1));
	EndGroup();

添加LabelTTF到编辑器代码如下:

	StartGroup(LabelTTF, DefaultValue::defaultLabelTTF);
	Require(Node);
	ATTR_NO_DEFAULT("Font File", &LabelTTF::getFontName, &LabelTTF::setFontName, string, Variant::TString);
	ATTR("Font Size", &LabelTTF::getFontSize, &LabelTTF::setFontSize, float, 20);
	ATTR("Dimensions", &LabelTTF::getDimensions, &LabelTTF::setDimensions, Size, Size(0,0));
	ATTR("String", &LabelTTF::getString, &LabelTTF::setString, string, string());
	EndGroup();

xml文件格式如下:

<?xml version='1.0' encoding='utf-8' ?>
<Root>
	<UI>
		<Node>
			<Property name="Position" value="340 190.5"/>
			<Property name="Tag" value="-1"/>
			<LabelTTF>
				<Property name="String" value="wwwd"/>
				<Property name="Font File" value="Marker Felt.ttf"/>
				
				<ParticleSystemQuad>
					<Property name="Duration" value="-1"/>
					<Property name="Life" value="4"/>
					<Property name="Life Var" value="1"/>
					<Property name="Angle" value="90"/>
					<Property name="Angle Var" value="360"/>
					<Property name="Start Size" value="30"/>
					<Property name="Start Size Var" value="10"/>
					<Property name="End Size" value="30"/>
					<Property name="Start Color" value="0.5 0.5 0.5 1"/>
					<Property name="Start Color Var" value="0.5 0.5 0.5 0"/>
					<Property name="End Color" value="0 0 0 1"/>
					<Property name="End Color Var" value="0 0 0 0"/>
					<Property name="Emission Rate" value="62.5"/>
					<Property name="Total Particles" value="250"/>
					<Node>
						<Property name="Position" value="-67 -369"/>
						<Property name="Tag" value="-1"/>
					</Node>
				</ParticleSystemQuad>
			</LabelTTF>
		</Node>
	</UI>
</Root>

在编辑器里面看到的是这样:

attr

项目地址

其他

联系方式:QQ(526738316) Email([email protected])

License

Licensed under the MIT license, see LICENSE for details.

说明

该项目提交了cocos2d-x 创建的工程中的cocos文件夹(解压约380M),仓库大小大约120M,所以拉项目的时候比较慢。但项目本身代码并不多。

qceditor's People

Contributors

qcdong2016 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.