-
Notifications
You must be signed in to change notification settings - Fork 1
/
pygame-draw.html
161 lines (142 loc) · 12.8 KB
/
pygame-draw.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Tin tức Python PyMI.vn</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<link href="https://n.pymi.vn/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Tin tức Python PyMI.vn Full Atom Feed" />
<!-- twitter card metadata -->
<meta name="twitter:site" content="">
<meta name="twitter:title" content="pygame - vẽ logo Windows">
<meta name="twitter:description" content="">
<!-- OG Tags -->
<meta property="og:url" content="./pygame-draw.html"/>
<meta property="og:title" content="pygame - vẽ logo Windows | Tin tức Python PyMI.vn" />
<meta property="og:description" content="" />
<!-- favicon -->
<!-- moment.js for date formatting -->
<script src="./theme/js/moment.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="./theme/css/main.css" />
<script>
/*! grunt-grunticon Stylesheet Loader - v2.1.2 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
(function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),l=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||null,l.parentNode.insertBefore(i,l),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,l=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&l?0:e?1:2];n.method=e&&l?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);(function(e,t){"use strict";var n=t.document,r="grunticon:",o=function(e){if(n.attachEvent?"complete"===n.readyState:"loading"!==n.readyState)e();else{var t=!1;n.addEventListener("readystatechange",function(){t||(t=!0,e())},!1)}},a=function(e){return t.document.querySelector('link[href$="'+e+'"]')},c=function(e){var t,n,o,a,c,i,u={};if(t=e.sheet,!t)return u;n=t.cssRules?t.cssRules:t.rules;for(var l=0;n.length>l;l++)o=n[l].cssText,a=r+n[l].selectorText,c=o.split(");")[0].match(/US\-ASCII\,([^"']+)/),c&&c[1]&&(i=decodeURIComponent(c[1]),u[a]=i);return u},i=function(e){var t,o,a;o="data-grunticon-embed";for(var c in e)if(a=c.slice(r.length),t=n.querySelectorAll(a+"["+o+"]"),t.length)for(var i=0;t.length>i;i++)t[i].innerHTML=e[c],t[i].style.backgroundImage="none",t[i].removeAttribute(o);return t},u=function(t){"svg"===e.method&&o(function(){i(c(a(e.href))),"function"==typeof t&&t()})};e.embedIcons=i,e.getCSS=a,e.getIcons=c,e.ready=o,e.svgLoadedCallback=u,e.embedSVG=u})(grunticon,this);
grunticon(["./theme/css/icons.data.svg.css", "./theme/css/icons.data.png.css", "./theme/css/icons.fallback.css"]);
</script>
<noscript><link href="./theme/css/icons.fallback.css" rel="stylesheet"></noscript>
<!-- menu toggle javascript -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initMenu);
function initMenu(){
var menu = document.getElementById("menu");
var menulink = document.getElementById("menu-link");
menulink.addEventListener("click", function toggleMenu(){
window.event.preventDefault();
menulink.classList.toggle('active');
menu.classList.toggle('active');
});
};
</script>
<meta name="tags" content="python" />
<meta name="tags" content="pygame" />
<meta name="tags" content="draw" />
</head>
<body>
<div role="banner" id="masthead">
<header>
<h1><a href="/">Pymiers's Blog</a></h1>
<a href="#menu" id="menu-link">more stuff</a>
<nav id="menu">
<ul>
<li><a href="./category/features.html">features</a></li>
<li class="active"><a href="./category/news.html">news</a></li>
<li><a href="./category/pymivn.html">pymi.vn</a></li>
</ul>
</nav>
</header>
</div>
<div class="page" role="main">
<div class="article" role="article">
<article>
<footer>
<a name="top"></a>
<p>
<time datetime=" 2024-01-28 00:00:00+07:00">
<script>document.write(moment('2024-01-28 00:00:00+07:00').format('LL'));</script>
</time>
</p>
</footer>
<header>
<h2>
pygame - vẽ logo Windows
</h2>
<center>
<h4>
by Pymier0
</h4>
</center>
</header>
<div class="content">
<p>Pygame là thư viện làm game với Python, nhưng dùng để vẽ thì cũng không ai phản đối cả.
Lập trình viên JavaScript dễ dàng vẽ hình tròn, vuông với vài dòng code thì với lập trình viên Python, thế giới chỉ có màn hình đen chữ trắng, cần thêm chút “sắc màu”.</p>
<h3>Cài đặt pygame</h3>
<div class="highlight"><pre><span></span><code>pip install pygame
</code></pre></div>
<h3>Khái niệm main loop, surface, blit, framerate</h3>
<ul>
<li>Surface: Mỗi “hiển thị” trên cửa sổ pygame gọi là Surface. Vẽ surface theo tọa độ (x,y) với góc trên bên trái là (0, 0).</li>
<li>Framerate: Clock tick 60 gọi là framerate, ở đây sẽ hiển thị 60 hình mỗi giây.</li>
<li>blit: draw one image onto another</li>
</ul>
<p>Bộ màu lấy từ <a href="https://colorhunt.co">https://colorhunt.co</a> thay vì dùng logo của Windows để tránh vấn đề bản quyền.</p>
<h3>Code</h3>
<p><img alt="A flag" src="./images/pygame_flag.png"></p>
<div class="highlight"><pre><span></span><code><span class="kn">import</span> <span class="nn">pygame</span>
<span class="n">pygame</span><span class="o">.</span><span class="n">init</span><span class="p">()</span>
<span class="n">screen</span> <span class="o">=</span> <span class="n">pygame</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">set_mode</span><span class="p">((</span><span class="mi">800</span><span class="p">,</span> <span class="mi">600</span><span class="p">))</span>
<span class="n">clock</span> <span class="o">=</span> <span class="n">pygame</span><span class="o">.</span><span class="n">time</span><span class="o">.</span><span class="n">Clock</span><span class="p">()</span>
<span class="c1"># color pallete from https://colorhunt.co/palette/f38181fce38aeaffd095e1d3</span>
<span class="n">c1</span> <span class="o">=</span> <span class="n">pygame</span><span class="o">.</span><span class="n">Surface</span><span class="p">((</span><span class="mi">400</span><span class="p">,</span><span class="mi">300</span><span class="p">))</span>
<span class="n">c1</span><span class="o">.</span><span class="n">fill</span><span class="p">((</span><span class="mi">243</span><span class="p">,</span> <span class="mi">129</span><span class="p">,</span> <span class="mi">129</span><span class="p">))</span>
<span class="n">c2</span> <span class="o">=</span> <span class="n">pygame</span><span class="o">.</span><span class="n">Surface</span><span class="p">((</span><span class="mi">400</span><span class="p">,</span><span class="mi">300</span><span class="p">))</span>
<span class="n">c2</span><span class="o">.</span><span class="n">fill</span><span class="p">((</span><span class="mi">252</span><span class="p">,</span> <span class="mi">227</span><span class="p">,</span> <span class="mi">138</span><span class="p">))</span>
<span class="n">c3</span> <span class="o">=</span> <span class="n">pygame</span><span class="o">.</span><span class="n">Surface</span><span class="p">((</span><span class="mi">400</span><span class="p">,</span><span class="mi">300</span><span class="p">))</span>
<span class="n">c3</span><span class="o">.</span><span class="n">fill</span><span class="p">((</span><span class="mi">234</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">208</span><span class="p">))</span>
<span class="n">c4</span> <span class="o">=</span> <span class="n">pygame</span><span class="o">.</span><span class="n">Surface</span><span class="p">((</span><span class="mi">400</span><span class="p">,</span><span class="mi">300</span><span class="p">))</span>
<span class="n">c4</span><span class="o">.</span><span class="n">fill</span><span class="p">((</span><span class="mi">149</span><span class="p">,</span> <span class="mi">225</span><span class="p">,</span> <span class="mi">211</span><span class="p">))</span>
<span class="c1">#logo = pygame.image.load("graphics/Mi_200_200.jpeg").convert_alpha()</span>
<span class="n">pygame</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">set_caption</span><span class="p">(</span><span class="s2">"GAMI"</span><span class="p">)</span>
<span class="k">while</span> <span class="kc">True</span><span class="p">:</span>
<span class="k">for</span> <span class="n">e</span> <span class="ow">in</span> <span class="n">pygame</span><span class="o">.</span><span class="n">event</span><span class="o">.</span><span class="n">get</span><span class="p">():</span>
<span class="k">if</span> <span class="n">e</span><span class="o">.</span><span class="n">type</span> <span class="o">==</span> <span class="n">pygame</span><span class="o">.</span><span class="n">QUIT</span><span class="p">:</span>
<span class="n">pygame</span><span class="o">.</span><span class="n">quit</span><span class="p">()</span>
<span class="n">exit</span><span class="p">()</span>
<span class="n">screen</span><span class="o">.</span><span class="n">blit</span><span class="p">(</span><span class="n">c1</span><span class="p">,</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">))</span>
<span class="n">screen</span><span class="o">.</span><span class="n">blit</span><span class="p">(</span><span class="n">c2</span><span class="p">,</span> <span class="p">(</span><span class="mi">400</span><span class="p">,</span> <span class="mi">0</span><span class="p">))</span>
<span class="n">screen</span><span class="o">.</span><span class="n">blit</span><span class="p">(</span><span class="n">c3</span><span class="p">,</span> <span class="p">(</span><span class="mi">400</span><span class="p">,</span> <span class="mi">300</span><span class="p">))</span>
<span class="n">screen</span><span class="o">.</span><span class="n">blit</span><span class="p">(</span><span class="n">c4</span><span class="p">,</span> <span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">300</span><span class="p">))</span>
<span class="c1">#screen.blit(logo, (300, 200))</span>
<span class="n">pygame</span><span class="o">.</span><span class="n">display</span><span class="o">.</span><span class="n">update</span><span class="p">()</span>
<span class="n">clock</span><span class="o">.</span><span class="n">tick</span><span class="p">(</span><span class="mi">60</span><span class="p">)</span>
</code></pre></div>
<h3>Kết luận</h3>
<p>Pygame giúp vẽ dễ dàng không kém gì JavaScript trên trình duyệt.</p>
<p>Hết.</p>
<p>Đăng ký ngay tại <a href="https://pymi.vn">PyMI.vn</a> để học Python tại Hà Nội <span class="caps">TP</span> <span class="caps">HCM</span> (Sài Gòn),
trở thành lập trình viên #python chuyên nghiệp ngay sau khóa học.</p>
</div>
<div class="back-to-top">
<a href="#top">back to top</a>
</div>
</article>
</div>
<!-- end article -->
<footer>
<div class="icons">
<a href="https://github.com/pymivn" target="_blank"><div class="icon-github icon"></div></a>
</div>
<p>© <script>document.write(moment().format('YYYY'));</script> Pymiers</p>
</footer>
</div>
</body>
</html>