2018 Fall 期末專案示範網站

Lua-Cango << Previous Next >> Spacegame

網際模擬程式

https://github.com/mdecourse/webgame 是一套源自 https://github.com/tiggerntatie/brython-server 的網際模擬程式庫, 適合用來開發線上遊戲或與工程設計相關的網際程式.

之前的 js 程式庫都採用遠端資料, 目前將各程式庫升級為最新版本, 且改為自帶程式庫.

參考的網際程式庫: https://github.com/tiggerntatie/ggame 

由於此 ggame 程式庫使用

jquery-3.3.1.min.js - https://jquery.com/ 
jquery-ui.1.12.1.min.js - https://jqueryui.com/ 
pixi-4.8.2.min.js - http://www.pixijs.com/ 
buzz-1.2.1.js - http://buzz.jaysalvat.com/ 
brython-3.7.0.js - https://brython.info/ 
brython_stdlib-3.7.0.js

因此使用者必須對上述程式庫有些了解後, 再深入研究如何使用  ggame 程式庫開發專案套件.

目前的 spacewar: http://mde.tw/webgame/spacewar.html

Ggame Documentation

https://ggame.readthedocs.io/en/latest/introduction.html 

https://github.com/HHS-IntroProgramming/Standards-and-Syllabus/wiki/More-Graphics:-Assets-and-Looping 

Ggame is not intended to be a full-featured gaming API, with every bell and whistle. It is designed primarily as a tool for teaching computer programming, recognizing that the ability to create engaging and interactive games is a powerful motivator for many progamming students. Accordingly, any functional or performance enhancements that can be reasonably implemented by the user are left as an exercise.

Functionality Goals

The ggame library is intended to be trivially easy to use. For example:

from ggame import App, ImageAsset, Sprite
# Create a displayed object at 100,100 using an image asset
Sprite(ImageAsset("bunny.png"), (100,100))
# Create the app, with a default stage
app = App()  
# Run the app
app.run()

Extensions

Ggame is being extended for geometry exploration in a manner reminiscent of Geogebra, digital logic simulation, and with tools and classes to use with rocket and orbital simulations.

Overview

There are three major pieces in a ggame app: assets, sprites and the app itself.

Assets

Asset objects (i.e. ImageAsset, etc.) typically represent separate files that are provided by the “art department”. These might be background images, user interface images, or images that represent objects in the game. In addition, SoundAsset are used to represent sound files (.wav or .mp3 format) that can be played in the game.

Ggame also extends the asset concept to include graphics that are generated dynamically at run-time, such as geometrical objects, e.g. rectangles, lines, etc.

Sprites

All of the visual aspects of the game are represented by instances of Sprite or subclasses of it.

App

Every ggame application must create a single instance of the App class (or a sub-class of it). Create an instance of the App class to draw a graphics canvas in your browser window. Execute the app’s run() method to start refreshing and redrawing the visual assets on the screen.

Events

No game is complete without a player and players make events. Your code handles user input by registering to receive keyboard and mouse events using listenKeyEvent() and listenMouseEvent() methods of the App class.

Execution Environment

Ggame is designed to execute in a web browser using Brython, Pixi.js and Buzz. The easiest way to do this is by executing from runpython, with your source code stored atgithub. When you use ggame from within runpython, the Github ggame repository is automatically placed on the import search path.

Geometry

When referring to screen coordinates, note that the x-axis of the computer screen is horizontal with the zero position on the left hand side of the screen. The y-axis is vertical with the zero position at the top of the screen.

Increasing positive y-coordinates correspond to the downward direction on the computer screen. Note that this is different from the way you may have learned about x and y coordinates in math class!

Another example:

from ggame import App, ImageAsset, Sprite, MouseEvent
from random import random, randint

class Bunny(Sprite):
    
    asset = ImageAsset("bunny.png")
    
    def __init__(self, position):
        super().__init__(Bunny.asset, position)
        # register mouse events
        App.listenMouseEvent(MouseEvent.mousedown, self.mousedown)
        App.listenMouseEvent(MouseEvent.mouseup, self.mouseup)
        App.listenMouseEvent(MouseEvent.mousemove, self.mousemove)
        self.dragging = False

    
    def step(self):
        """
        Every now and then a bunny hops...
        """
        if random() < 0.01:
            self.x += randint(-20,20)
            self.y += randint(-20,20)
        
        
    def mousedown(self, event):
        # capture any mouse down within 50 pixels
        self.deltax = event.x - (self.x + self.width//2) 
        self.deltay = event.y - (self.y + self.height//2)
        if abs(self.deltax) < 50 and abs(self.deltay) < 50:
            self.dragging = True
            # only drag one bunny at a time - consume the event
            event.consumed = True
            
    def mousemove(self, event):
        if self.dragging:
            self.x = event.x - self.deltax - self.width//2
            self.y = event.y - self.deltay - self.height//2
            event.consumed = True
            
    def mouseup(self, event):
        if self.dragging:
            self.dragging = False
            event.consumed = True
            
        
class DemoApp(App):
    
    def __init__(self):
        super().__init__()
        for i in range(10):
            Bunny((randint(50,self.width),randint(50,self.height)))
        
    def step(self):
        """
        Override step to perform action on each frame update
        """
        for bunny in self.spritelist:
            bunny.step()


# Create the app
app = DemoApp()  
# Run the app
app.run()

特別注意

https://help.github.com/articles/files-that-start-with-an-underscore-are-missing/ 

因為 Github Pages 內建無視以 _ 開頭的檔案, 而 Brython 在導入模組時, 必須能夠擷取模組目錄下的 __init__.py, 因此必須設定 _config.yml 檔案, 指定 Github Pages 建立頁面時, 必須包含 static/ggame 目錄下的 __init__.py 檔案.

_config.yml 設定檔案內容為:

include: [static/ggame, __init__.py]

根據以上資訊所建立的網際互動程式範例倉儲:

https://github.com/mdecourse/kmolgame 

程式網頁:

http://mde.tw/kmolgame/

http://mde.tw/kmolgame/bunny.html 


Lua-Cango << Previous Next >> Spacegame