C .
ODE
G
AMELET
person_outline
Sign In
Name
Haskasu
Email
Link
https://haskasu.com
work
His Projects
add_circle_output
Project
image
His Resources
videogame_asset
His Builds
language
Search Others
search
visibility
code
OPEN
info_outline
# Playground 專門用來快速在畫板上塗塗抹抹的專案。 ## Getting Started 摳出來成為你自己的新專案後,可用以下幾種工具(在/libs裏的工具)快速畫圖。 ```typescript // 畫一個紅色的圓 draw.circle(0, 0, 100, {fillColor: 0xFF0000}); // 打開一個確認視窗 dialog.confirm('Are you sure?', 'Click confirm if you think it is ok.') .then((confirm) => { if(confirm) { console.log('User confirmed.'); } }); // 收集資料畫長條圖 let dataCollector = new DataCollector(); dataCollector.addData('一月', 1, 2); dataCollector.addData('二月', 2, 10); dataCollector.addData('三月', 3, 5); dataCollector.addData('四月', 4, 6); dataCollector.showChart('第一季', 'bar'); ``` 也可以在 test/testbed.ts 裏找到測試用的工具使用方法。
haskatestground
Haskasu
visibility
code
OPEN
info_outline
# Playground 專門用來快速在畫板上塗塗抹抹的專案。 ## Getting Started 摳出來成為你自己的新專案後,可用以下幾種工具(在/libs裏的工具)快速畫圖。 ```typescript // 畫一個紅色的圓 draw.circle(0, 0, 100, {fillColor: 0xFF0000}); // 打開一個確認視窗 dialog.confirm('Are you sure?', 'Click confirm if you think it is ok.') .then((confirm) => { if(confirm) { console.log('User confirmed.'); } }); // 收集資料畫長條圖 let dataCollector = new DataCollector(); dataCollector.addData('一月', 1, 2); dataCollector.addData('二月', 2, 10); dataCollector.addData('三月', 3, 5); dataCollector.addData('四月', 4, 6); dataCollector.showChart('第一季', 'bar'); ```
Playground
Haskasu
visibility
code
OPEN
info_outline
# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**
TwilightWarsEvents
Haskasu
visibility
code
OPEN
info_outline
# Playground 專門用來快速在畫板上塗塗抹抹的專案。 ## Getting Started 摳出來成為你自己的新專案後,可用以下幾種工具(在/libs裏的工具)快速畫圖。 ```typescript // 畫一個紅色的圓 draw.circle(0, 0, 100, {fillColor: 0xFF0000}); // 打開一個確認視窗 dialog.confirm('Are you sure?', 'Click confirm if you think it is ok.') .then((confirm) => { if(confirm) { console.log('User confirmed.'); } }); // 收集資料畫長條圖 let dataCollector = new DataCollector(); dataCollector.addData('一月', 1, 2); dataCollector.addData('二月', 2, 10); dataCollector.addData('三月', 3, 5); dataCollector.addData('四月', 4, 6); dataCollector.showChart('第一季', 'bar'); ```
haskatube2
Haskasu
visibility
code
OPEN
info_outline
# CgEventsLib The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## Live Demo <a href="cg://source/test/physics.events" class="mat-raised-button mat-primary">Open Demo Events Sheet</a> ## Concept The engine takes a *.events file to run. The .events file is an encoded json which contains a config field and a events field. ```json { config: { stage: { width: "number", height: "number", resolutionPolicy: "showAll" | "exactFit" | "fixedWidth" | "fixedHeight" | "origin", alignHorizontal: "left" | "center" | "right", alignVertical: "top" | "middle" | "bottom" } }, events: [ { id: "string", triggers: [], checks: [], actions: [] }, ... ] } ``` Yon can edit the json with CG.built-in editor to control all your game events. ## How Events Work Each event contains a TRIGGER, some CHECKS, and some ACTION. The event flow works like this: 1. The TRIGGER of the event is triggered by the engine (keyboard pressed, event over, or maybe the hero collides with an enemy) 1. Once the trigger is triggered, the engine then goes check the CHECKS. 1. If all CHECKS pass, the engine executes all the ACTIONS in the event. ## Getting Started ```typescript let manager = new CgEventManager(); manager.importFromSource('CG.YourProject/yourGame.events') .then(() => manager.preload()) .then(() => manager.start()) ; ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)**
CgEventsLib
Haskasu
visibility
code
OPEN
info_outline
# CG.Base Provide tool kits that helps you fast build an app on Code.Gamelet. Key features include: 1. initialize [pixi.js](#pixi.init) environment 1. load and access resources that are imported via Code.Gamelet IDE 1. manage update functions that are called every frame 1. provide debug utilities ## Getting Started Follow the steps below to fast start an app with [PixiJS](#pixi.init). We will implement a box2d environment to demo the usage of Base. <a name="pixi.init"></a> ## Start with Pixi.js<a name="pixi.init"></a> ```typescript class App { constructor() { // initialize pixi CG.Base.pixi.initialize(600, 400); CG.Base.pixi.physicsDebugDraw.setActive(true); // make a physics wall var wall = CG.Base.physics.createPhysicsObject('wall', {type: 'static'}); wall.addEdge(new CG.Base.geom.Point(10, 300), new CG.Base.geom.Point(500, 330)); // make a dynamic physics ball var ball = CG.Base.physics.createPhysicsObject('ball', {type: 'dynamic'}); ball.addCircle(0, 0, 10, {friction: 0.1, density: 0.1, restitution: 0.3}); ball.setPosition(100, 10); } } new App(); ``` @see [Demo](/edit/Base_Start_with_PIXI) ## Load and play with Resources To load resources that are imported from IDE: ```typescript // tell resources what resources to load (using the alias names) CG.Base.resourceManager.addAppResource('Game1.button'); CG.Base.resourceManager.addAppResource('Game1.music'); // start loading CG.Base.resourceManager.load(() => { // all loaded callback // create button with the image "Game1.button" alias name var button = new CG.Base.pixis.interactive.Button(CG.Base.resourceManager.createPixiSprite('Game1.button', 20, 20)); // set the position of the button button.displayObject.position.set(100, 100); // add the button to pixi.root, so pixi can render the button CG.Base.pixi.root.addChild(button.displayObject); // add a click event listener button.on(CG.Base.pixis.interactive.Button.EVENT.CLICK, () => { // when the button is clicked, play sound with "Game1.music" alias name CG.Base.resourceManager.playSound('Game1.music') }); }); ``` @see [Demo](/edit/Base_Load_Resources) ## Manage update functions Take advantage of CG.Base.addUpdateFunction to make a function called every frame ```typescript class App { constructor() { CG.Base.pixi.initialize(600, 400); CG.Base.addUpdateFunction(this, this.update); } // this function will be called every frame(called 60 times per second normally) private update(deltaTime:number):void { // do something } } new App(); ``` @see [Demo](/edit/Base_Update_and_Delay_Func) You can call a function in the future by CG.Base.addDelayFunction ```typescript class App { constructor() { CG.Base.pixi.initialize(600, 400); // call this.delayAction in 1000 milliseconds(= one second) CG.Base.addDelayFunction(this, this.delayAction, 1000); } private delayAction():void { // do something } } new App(); ``` @see [Demo](/edit/Base_Update_and_Delay_Func) ## Interact with Keyboard Use CG.Base.keyboard package to interact with keyboard events. ```typescript export class App { constructor() { // make the window focused, so we can receive keyboard events. window.focus(); // initialize pixi CG.Base.pixi.initialize(600, 400); // tell resourceManager to load the resource 'Game1.button' CG.Base.resourceManager.addAppResource('Game1.button'); // load resources, and wait callback when resources are all loaded CG.Base.resourceManager.load(() => { // add keyboard event listener, when a key is pressed CG.Base.keyboardManager.on(CG.Base.keyboard.KeyboardManagerEvent.PRESSED, key => { // if the pressed key is space, we call this.createSprite() if (key == CG.Base.keyboard.Key.SPACE) { this.createSprite(); } }); }); } private createSprite(): void { // create a sprite with the image 'Game1.button' var sprite: PIXI.Sprite = CG.Base.resourceManager.createPixiSprite('Game1.button'); // set the position of the sprite sprite.position.set(CG.Base.utils.IntUtil.randomBetween(100, 500), CG.Base.utils.IntUtil.randomBetween(100, 300)); // add the sprite to pixi.root, so it can be rendered CG.Base.pixi.root.addChild(sprite); } } new App(); ``` @see [Demo](/edit/Base_PIXI_Keyboard) ## Debugging The best debug tool on browser is the [developer tools](https://developer.chrome.com/devtools) in Chrome (F12). To find your source code in developer tools, first open developer tools(F12), click "Sources" tab, and search the Network tree as below: > top => {projectCode} => gameFrame => code.gamelet.com => gassets => file/{projectCode}/src for example, if the projectCode is 'Game1', source code is located at > top => Game1 => gameFrame => code.gamelet.com => gassets => file/Game1/src  ### Add Watch In addition to browser's debugging tools, CG.Base provides other useful tools. CG.Base.addWatch() adds objects or objects' properties to Watch panel in CG IDE. ```typescript export class App { constructor() { // initialize pixi CG.Base.pixi.initialize(600, 400); // tell resourceManager to load the resource 'Game1.button' CG.Base.resourceManager.addAppResource('Game1.button'); CG.Base.resourceManager.load(() => { // add the created sprite into Watch panel, the alias name in Watch panel is 'sprite' CG.Base.addWatch('sprite', this.createSprite()); }); // add this(App)'s 'time' property into Watch panel. The alias name for this property is 'now' CG.Base.addWatch('now', this, 'time'); } private createSprite(): PIXI.Sprite { // create a sprite with the image 'Game1.button' var sprite: PIXI.Sprite = CG.Base.resourceManager.createPixiSprite('Game1.button'); // set the position of the sprite sprite.position.set(CG.Base.utils.IntUtil.randomBetween(100, 500), CG.Base.utils.IntUtil.randomBetween(100, 300)); // add the sprite to pixi.root, so it can be rendered CG.Base.pixi.root.addChild(sprite); return sprite; } // a getter function, that works like a property of App object. get time(): number { return CG.Base.time(); } } new App(); ``` @see [Demo](/edit/Base_Add_Watch) ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Links and Resources This library is running with the libraries below. * [Pixi.js](http://www.pixijs.com/) - 2D rendering engine * [API reference](http://pixijs.download/release/docs/index.html) * [Examples](http://pixijs.io/examples/) * [Pixi keyboard](https://github.com/Nazariglez/pixi-keyboard) - Keyboard utility * [Pixi sound](https://github.com/pixijs/pixi-sound) - Sound utility * [Pixi filters](https://github.com/pixijs/pixi-filters) - Filters Collections * [Pixi GafPlayer](https://github.com/mathieuanthoine/PixiGAFPlayer) - [GafMedia](https://gafmedia.com/) Player * [Liquidfun](http://google.github.io/liquidfun/) - Box2D based physics engine * [MD5](http://www.myersdaily.org/joseph/javascript/md5-text.html) - MD5 implementation by Joseph Myers ## Authors **Haska Su** - *Initial work*
Base
Haskasu
visibility
code
OPEN
info_outline
# Playground 專門用來快速在畫板上塗塗抹抹的專案。 ## Getting Started 摳出來成為你自己的新專案後,可用以下幾種工具(在/libs裏的工具)快速畫圖。 ```typescript // 畫一個紅色的圓 draw.circle(0, 0, 100, {fillColor: 0xFF0000}); // 打開一個確認視窗 dialog.confirm('Are you sure?', 'Click confirm if you think it is ok.') .then((confirm) => { if(confirm) { console.log('User confirmed.'); } }); // 收集資料畫長條圖 let dataCollector = new DataCollector(); dataCollector.addData('一月', 1, 2); dataCollector.addData('二月', 2, 10); dataCollector.addData('三月', 3, 5); dataCollector.addData('四月', 4, 6); dataCollector.showChart('第一季', 'bar'); ```
haskatube1
Haskasu
visibility
code
OPEN
info_outline
# 彈區88 在一個未知的宇宙角落有個充斥著子彈的危險空域。不小心落入這個險境的你,要努力閃避子彈,等待救援,如果還有救援的話...
bullet88
Haskasu
visibility
code
OPEN
info_outline
# CG Server This library gives apps the tools to access the powerful game server that provided by code.gamelet.com. The server provides the abilities listed below: 1. Player managements including login, profile, password etc. 1. A database that can do score leaderboard, individual player status, and more. 1. Multiplayer online connections (powered by socket.io). ## GLT Server A Database server. <a href="cg://source/CG.Server/GLT_README.md" class="mat-raised-button mat-primary">GLT Server Readme</a> ## MSG Server A realtime socket server. <a href="cg://source/CG.Server/MSG_README.md" class="mat-raised-button mat-primary">MSG Server Readme</a> ## Authors **[Haskasu](/profile/Haskasu)**
Server
Haskasu
visibility
code
OPEN
info_outline
# 我的光暈戰記 My Twilight Wars 光暈戰記的同人陣範本,編輯地圖和任務檔就可以製作出自己的任務了。 The template that help developers to build their own twilightwars-like game, your own map, your own mission. ## 快捷鈕 Shortcuts <a href="cg://source/CG.TWEventsGameTemplate/game.events" class="mat-raised-button mat-primary">編輯任務事件表 (Edit Events)</a> <a href="cg://source/CG.TWEventsGameTemplate/gamemap.twmap" class="mat-raised-button mat-primary">編輯地圖 (Edit Map)</a> ## 多重任務列表 將 appSeasons.ts 設為遊戲進入點,即可支援任務章節/列表。 <a href="cg://source/CG.TWEventsGameTemplate/seasons.ts" class="mat-raised-button mat-primary">編輯 seasons.ts 任務列表</a> Set appSeasons.ts as the entry point to support seasons/mission list. <a href="cg://source/CG.TWEventsGameTemplate/seasons.ts" class="mat-raised-button mat-primary">Edit seasons.ts (Mission List)</a>
My Twilight Wars
Haskasu
visibility
code
OPEN
info_outline
# hiddenmath One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[Haskasu](/profile/Haskasu)**
hiddenmath
Haskasu
visibility
code
OPEN
info_outline
# Tut_SpaceShooter A Space shooter game. Avoid astroids, and shoot as many monster as you can. For more info, go [here](https://code.gamelet.com/edit/Tut_SpaceShooter) ## Controls WASD to accelerate Mouse to shoot ## Edit Game <a href="cg://source/CG.Tut_SpaceShooter/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a>
Space Shooter
Haskasu
visibility
code
OPEN
info_outline
# Billiard_AI 訓練AI玩撞球。 一、花式擺台: 在出杆角度和力道固定的條件下,以基因演算法訓練AI找到讓桌面清台的置球方式。 * 科普影片 https://youtu.be/IPjPEKF1NGI 二、一杆清台: 太高估了AI的學習能力。 一杆清台的訓練: 失敗! 三、小試身手: 可讓玩家自己打撞球。 ## Authors **[Haskasu](/profile/Haskasu)**
花式撞球AI訓練所
Haskasu
visibility
code
OPEN
info_outline
# roguelike 使用Delaunay三角剖分以及最小生成樹,亂數生成Roguelike地下城地圖。
roguelike
Haskasu
visibility
code
OPEN
info_outline
# GrabCutter 利用GrabCut演算法幫助使用者將照片去背,並能載入多張圖片P圖。
GrabCutter
Haskasu
visibility
code
OPEN
info_outline
# Bulls And Cows Play Bulls and Cows with AI ### How to play https://en.wikipedia.org/wiki/Bulls_and_Cows ### How the AI is deisgned https://youtu.be/-3gLOGb1fLY
BullsAndCows
Haskasu
visibility
code
OPEN
info_outline
# impressionist A tool that transform your picture into an impressionist painting. ## References * [Generative Impressionism](https://medium.com/@mattdesl/generative-impressionism-afa98ccb97da) by Matt DesLauriers * [Perlin Noise](https://en.wikipedia.org/wiki/Perlin_noise) * [柏林噪聲影片教學](https://youtu.be/NqqIT_-xJls) ## Authors **[Haskasu](/profile/Haskasu)**
impressionist
Haskasu
visibility
code
OPEN
info_outline
# perlin_noise 示範Perlin Noise 1D/2D/3D 的應用。
perlin_noise
Haskasu
visibility
code
OPEN
info_outline
# isomap Demonstrate how objects are sorted in isometric map. # Controls * WASD / Arrow keys to move * Space to jump * click tile to change graphic or add object
isomap
Haskasu
visibility
code
OPEN
info_outline
# Ripples One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[Haskasu](/profile/Haskasu)**
Ripples
Haskasu
MORE RESULTS
ⒸCode.Gamelet.com |
Privacy Policy
|
Terms of Service