在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:sean-codes/cs-engine开源软件地址:https://github.com/sean-codes/cs-engine开源编程语言:JavaScript 87.5%开源软件介绍:CS-Engineengine for building 2D games
Examples
Boilerplate<!DOCTYPE html>
<html>
<head>
<!-- 1. include cs-engine -->
<script id="cs-engine" src='../../main.web.js'></script>
</head>
<body style="-ms-touch-action: none; touch-action: none">
<!-- 2. add a canvas -->
<canvas></canvas>
<!-- 3. run cs.load with config -->
<script>
cs.load({
path: '../../', // path to parts
canvas: document.querySelector('canvas'),
objects: {
aRectangle: {
draw: ({ object, cs }) => {
cs.draw.fillRect({ x: 0, y: 0, width: 50, height: 50 })
}
}
},
start: ({ object, cs }) => {
cs.object.create({ type: 'aRectangle' })
}
})
</script>
</body>
</html> Initializationcs.load loads assets and initializes a canvas /**
* load function
* @arg {object} options - the options
* @arg {string} options.parts - path to cs-engine parts
* @arg {string} options.canvas - the id of the canvas to use
* @arg {array of objects} options.sprites - the list of sprites to load
* @arg {array of objects} options.scripts - the list of sprites to load
* @arg {array of objects} options.sounds - the list of sounds to load
* @arg {array of objects} options.storages - the list of storages to load
* @arg {array of objects} options.objects - initial game objects
* @arg {function} options.start - called when finished loading
**/ Sprite Loading OptionsWhen loading sprites we can specify some options. Only path is required /**
* sprite load
* @arg {object} options - the options
* @arg {string} options.path - the relative path to the .png file
* @arg {string} [options.name=calculated] - override the filename and set sprite name]
* @arg {number} [options.frames=0] - how many frames in the sprite sheet
* @arg {number} [options.width=calculated] - The width of a frame
* @arg {number} [options.height=calculated] - The height of a frame
* @arg {number} [options.xoff=0] - The horizontal offset when drawing
* @arg {number} [options.yoff=0] - The vertical offset when drawing
* @arg {object} [options.mask=calculated] - And object with { width, height }
**/
cs.load({
...
sprites: [
{ path: 'sprites/spr_player' },
]
}) Script Loading OptionsAny /**
* script load
* @arg {object} options - the options
* @arg {string} options.path - the the relative path to the .js file
**/
cs.load({
...
scripts: [
{ path: './objects/obj_player.js' }
]
}) RoomIn the start function define the room size.
/**
* room setup
* @arg {object} options - the options
* @arg {number} [options.width] - The width of a room
* @arg {number} [options.height] - The height of a room
* @arg {string} [options.background] - The background of the room
**/
// example room 192px by 192px and a grey background
cs.room.setup({ width: 192, height: 192, background: "#222" }) CameraThe camera defines the area of a non GUI canvas (the game canvas) that should be displayed at anytime. Experiment with maxWidth and maxHeight and the engine will setup the best scale to work with those values. In the start function define the camera settings.
/**
* camera setup
* @arg {object} options - the options
* @arg {number} [options.maxWidth] - The max width of the camera
* @arg {number} [options.maxHeight] - The max height of the camera
* @arg {number} [options.smoothing=1] - Amount of smoothing when updating follow position
**/
// example camera maxWidth and Height
cs.camera.setup({ maxWidth:300, maxHeight:200 }) Game ObjectsGame objects have a create, step, and draw function. The are stored in
cs.load({
...
objects: {
myObjName: {
create: ({ object, cs, attr }) => { console.log('i run when created') },
step: ({ object, cs }) => { console.log('i run each frame of the game') },
draw: ({ object, cs }) => { console.log('i run after the step for drawing') }
}
}
...
})
// FILE: objects/obj_name.js
cs.objects.myObjName = {
create: ({ object, cs, attr }) => { console.log('i run when created') },
step: ({ object, cs }) => { console.log('i run each frame of the game') },
draw: ({ object, cs }) => { console.log('i run after the step for drawing') }
}
// Add as script path to assets
cs.load({
...
assets: {
scripts: [
{ path: 'objects/obj_name.js' }
]
}
...
}) Create an object using cs.object.create({
type: 'obj_name',
attr: {
// Attributes to add to the game object example x/y
x: 50,
y: 50
}
}) DrawingSprites/**
* @arg {object} options - the options
* @arg {string} options.spr - The name of the sprite
* @arg {number} [options.y] - the y position
* @arg {number} [options.y] - the y position
* @arg {number} [options.width=width] - The width to draw the sprite
* @arg {number} [options.height=height] - The height to draw the sprite
* @arg {number} [options.scaleX=1] - Horizontal scaling
* @arg {number} [options.scaleY=1] - Vertical scaling
* @arg {number} [options.angle=0] - (0 - 360) draw sprite rotated in degrees
**/
// example drawing player sprite at coordinates (50, 50)
cs.draw.sprite({ spr: 'spr_player', x: 50, y: 50 }) Text/**
* @arg {object} options - the options
* @arg {string} options.text - The text to draw
* @arg {number} [options.x] - The x position
* @arg {number} [options.y] - the y position
**/
// example drawing text 'hello world' at coordinated (50, 50)
cs.draw.text({ text: 'hello world', x: 50, y: 50 }) ShapesFill Recangle/**
* @arg {object} options - the options
* @arg {number} [options.x] - The x position
* @arg {number} [options.y] - the y position
* @arg {number} [options.width] - the width
* @arg {number} [options.height] - the height
**/
// example fill rectangle in top corner with width 50 and height 50
cs.draw.fillRect({ x: 0, y: 0, width: 50, height: 50 }) Stroke Rectangle/**
* @arg {object} options - the options
* @arg {number} [options.x] - The x position
* @arg {number} [options.y] - the y position
* @arg {number} [options.width] - the width
* @arg {number} [options.height] - the height
**/
// example outlined rectangle in top corner with width 50 and height 50
cs.draw.strokeRect({ x: 0, y: 0, width: 50, height: 50 }) Line/**
* @arg {object} options - the options
* @arg {number} [options.x1] - The start x position
* @arg {number} [options.y1] - the start y position
* @arg {number} [options.x2] - the end x position
* @arg {number} [options.y2] - the end y position
**/
// example of a line starting in top left corner to (50, 50)
cs.draw.line({ points: [ { x:0, y:0 }, { x:50, y:50 } ] }) Settings
/**
* @arg {object} options - the options
* @arg {number} [options.color='#000'] - HEX/RGB/String value of color
* @arg {number} [options.font='12px Arial'] - Font setting. Font Size space Font Name
* @arg {number} [options.width=1] - line width for stroke functions
* @arg {number} [options.alpha=1] - 0 being invisible 1 being fully visible
* @arg {number} [options.textAlign='start'] - start/middle/end horizontal align
* @arg {number} [options.textBaseline='top'] - top/bottom/middle/baseline vertical align
* @arg {number} [options.lineHeight=10] - line height spacing for text
* @arg {number} [options.operation='source-over'] - set canvas manual on draw operations
**/
// example setting draw color to red and font to 16px arial
cs.draw.settings({ color: 'red', font: '16px Arial' }) |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论